Webデスクトップの制作 #20 ファイル表示機能

これまで作ってきたWebデスクトップのアイコンは全てフォルダの扱いのみでしたが、実際にはファイルやアプリを実行するのがアイコンの役割でもあります。 フォルダは、それらのファイルなどを入れ込む単なる器なので、実はファイル表示する方がメイン機能と言ってもいいかもしれませんね。 そんな重要な機能を構築したいと思います。 ※今回は大幅に初期設定をいじるので、これまで開発を追従してデモ表示などしてきた人は、一度「メニュー」の中の「データ初期化」を選択して、ストレージデータを削除してから、今回の操作を行ってください。

デモ

データフォルダの中にサンプルファイルが入っています。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

https://github.com/yugeta/web_desktop/ 今回のCommitは"#20"です。

解説

今回使用したファイルは実際にモジュール内のdata/files内に配置しているサンプルファイル.txtというファイルです。 中身は以下のような適当なテキストファイルです。 これサンプルファイルです。 表示を確認するためのファイルです。 □□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□ □□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□ □□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□ □□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□ □□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□　□□□□□□□□□□ これをまず、アイコン表示する処理を追加しました。 asset/setting.json のdesktop_iconsの中のアイコンデータに、type : "file"という値を追加しました。 これまでは、type : folderというフォルダのみのタイプしか存在してなかったんですが、ようやくファイルタイプを設置できました。 実はこのファイル処理をいれる時に、これまでアイコンの画像ファイルとして、file : "アイコン画像のファイル名"を設置していたんですが、これを、icon : "アイコン画像のファイル名"に変更しました。 file : "表示するファイルのパス（detaフォルダ内の）"を書き込むようにするための仕様変更です。 この段階での仕様変更は、まあまあな影響範囲が大きいのですが、今後の事を考えて、あるべき姿の設定ファイルにすることに決めて作業を進めました。 こういう時に、本当はこうした方がいいんだけど、影響範囲が大きいからとりあえず別の名前で登録してしまうと、その後の作業ミスを引き起こす原因になったり、リファクタリングする際の足かせになりかねないので、 気がついた時にリファクタリングする方針は開発時には悪くない判断だと思います。 話を戻して、ファイルの表示は、file.jsとfile/view.jsというモジュールを作って、専用に表示するようにしておきました。 今後ファイルの種類などが増えたときや、アプリ起動する時に、同じ工程で処理が増やせるからですね。 ファイルの表示は、テキストファイルを読み込んで開くという処理なんですが、今後拡張子別に読み込み方を変えたり、ファイルタイプを判別したりする処理を加える必要はでてくるでしょう。 でも、今回はテキストファイルのみでお試し機能追加にしておきます。 今回使い倒しているAjax読み込みをして、ウィンドウを表示してから、非同期で内容を書き込むフローです。 内容を書き込んだ後で、ウィンドウ内のサイズを取得して、画面の半分以内に収まるようにサイズ調整を行って表示完了になります。

あとがき

今回作ったファイル表示は、テキストだけじゃなく、画像やいろいろなアプリのデータファイルなどにもできるだけ対応できるようにすると、もはやこのデスクトップ上で、いろいろなプレビューができるようになるので、ブラウザさえ開けば自分の共通デスクトップを持つことが可能になりますね。 ただ、ストレージをどうやって持つかを検討しなければいけません。 単一サーバーで、ユーザー分のストレージを持つことは不可能なので、Googleドライブや、AWSのS3、その他のストレージサービスなどとの連携を考えてやり取りできるようになると、独自のWebデスクトップが可能になるんですけどね。 その辺の技術仕様は、後に考えるようにする事にして、まだまだ基本機能を作り続けていきたいと思います。