Webデスクトップの制作 #12 データ保持機能

Webデスクトップでのデータ保持ってどういうデータが存在するんでしょう？ デスクトップ内で使用するアプリのインストールや、ファイルなどのデータをアップロードした場合のファイルデータなど、 様々なデータを想定していますが、今回はデスクトップ操作のデータを保持して、リロードしても表示を継続できる仕組みを作っておきたいと思います。

デモ

アイコンを移動した後で、画面をリロードしても、アイコンの位置はそのままになっています。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

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

解説

今回の処理では、アイコンの移動値のみのデータ保持でしたが、開いているウィンドウの位置やサイズなども保持する必要がありますね。 処理の仕様としては、localStorageというブラウザの持っているデータ保存領域にデータを作って格納するようにします。 このlocalStorageは、ブラウザによって許容量が違いますが、大体のブラウザが5MBぐらいのデータは保持できるので、画像データとかじゃない限りオーバーすることは無いでしょう。 何でシステム設定データや、アイコンやウィンドウの座標データぐらいなら1MBも使用しないと想定しています。 保存するデータですが、平文（何も暗号化していない状態）の文字列だと、アホみたいなシステムに見えるので、ちゃんと暗号化っぽく見えるようにbase64データに変換して保持して、 使う時はデコードするようにしています。 正直デバッグする時は、平文の方が、その場で確認することが容易なのでいいんですが、公開型のWebデスクトップは、ちゃんと暗号化しておいたほうがいいですね。 もっと堅牢に暗号化することもできますが、ここは簡易で十分です。 さらに普通にbase64に変換しようとすると、全角文字などが正常に変換されないので、ちゃんとencodeURIComponentで、コード化を行ってから処理しています。 また、致し方なくescape処理を使っているんですが、この命令、基本的に非推奨ではないものの、あまり使う事は良くないとされているらしく、代替方法が見つかっていません。 参考ページ : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/escape これ、うまく代替する方法ないかな？と思っていつもこの処理を書いています・・・ 今回のストレージへのデータ保持に伴って、起動時のアイコン配置の処理の際にストレージデータを参照する処理を入れ込んでいます。 さほど難しくないフローになってて、安心できました。 あと、アイコンを整理するを選択した時は、座標データを全て削除して、何もなかったかのように元通りにする処理も追加しています。 でも、アイコンの並び順が変わってしまうので、アイコン一つづつのデータ保持をした方がいいかもしれませんね。（この辺は今後検討していきます）

あとがき

データ保存機能ができたところで気がついたんですが、 ソースが汚くなってきました。 具体的に言うと、event.jsの処理がたくさん増えてきて、ソースへの記述が増えて、分岐も関数も膨大になってきています。 そろそろこの辺もリファクタリングする時期なのかもしれないので、そのうちシレっとリファクタされていることでしょう。 やっぱりデスクトップ作るって、まあまあな機能がたくさんあって、時間かかりますね。 あ、ちなみに、このブログ書いている時に気がついたんですが、ページロードした時に、ストレージデータがない状態の場合に、アイコンの並びがおかしくなる場合があります。 ※リロードしてください。