Webデスクトップの制作 #33 設定データのファイル保存と復元処理

Webデスクトップ開発もいよいよ1ヶ月を超えてしまいました。 毎日、ちょこっとずつ開発しているので、次の日に何やってたか忘れてしまう事もしばしばありました。 だいぶ安定運用できそうな感じになってきたので、これまでデスクトップの初期化だけの設定だったのを、保存と復元処理を作ってみたいと思います。 そのほかいくつかにissueにも対応したので、今回は複数のアップデートを行います。

デモ

うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

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

解説

Issue対応 1. 壁紙設定時にJSエラーが表示される

前回のカレンダー実装の際に、Windowモジュールのview.jsを少しいじった箇所にバグがあり、壁紙設定ウィンドウが表示されない事象が発生していました。 単純なミスだったので、1行程度の修正で直りました。

Issue対応 2. アイコンの整列でゴミ箱も通常アイコンに入り込んでしまう

今頃気がついたんですが、「アイコンの整理」をすると、ゴミ箱がアイコンの並びに入り込んでしまっています。 ちゃんと、ゴミ箱アイコンと通常のアイコンを処理理由することで、定位置での整理ができるように修正できました。

Issueじゃないけどヘッダのデザイン変更

Webデスクトップのヘッダ部分のデザインを変更しました。 でも気が付かない程度の変更なので、あまり気にしなくてもいいかもしれませんが、 サブメニュー表示を、右クリックのコンテキストメニューと同じテイストにしました。 これを踏まえて、データダウンロードとアップロード機能を追加しておきました。

機能追加 1. デスクトップデータの保存（Download）

デスクトップでのアイコンの移動値や、表示しているウィンドウの情報は、 Storageクラスのグローバル変数(Storage.datas)に一手に格納しているので、そのデータをJSON化してbase64化したものを、自動ダウンロード機能を使ってファイルダウンロードさせます。 テキストデータのダウンロード処理は、比較的下記のソースの使い回しでできますね。 download(){ const data = テキストデータ const bom = new Uint8Array([0xef, 0xbb, 0xbf]) const blob = new Blob([bom, data], { type: "text/plane" }) const a = document.createElement("a") a.href = (window.URL || window.webkitURL).createObjectURL(blob) a.download = `web_desktop_${(+new Date())}.${this.ext}` a.hidden = true document.body.appendChild(a) a.click() a.parentNode.removeChild(a) } 今回は、Webデスクトップの設定ファイルということで、"webd"という拡張子を勝手に作って、そのファイル名でダウンロードしてもらうようにしました。 拡張子はなんでもいいんですが、他のアプリで使うものと被らないようにするか、.jsonや.txtのように汎用的なデータにするというのも悪くないと思います。

機能追加 2. デスクトップデータの復元（Upload）

データの復元は、ダウンロードの逆の操作なのですが、少しソースの工程は複雑になります。 まず、JavascriptのFileAPIを使って、ローカルにあるファイルを選択してもらって（事前にダウンロードしたファイル）それをJavascriptに取り込んで、データ復元するという流れになります。 ソースコードは // アップロードモジュールを作成 upload(){ const file = document.createElement("input") file.id = `web_desktop_upload_file_${(+new Date())}` file.type = "file" file.hidden = true file.accept = `.${this.ext}` file.onchange = this.upload_file_loaded.bind(this,file.id) document.body.appendChild(file) file.click() } // データの読み込みと復元 upload_file_loaded(id, e){ const file = document.getElementById(id) if(!file){return} const reader = new FileReader() reader.readAsText(file.files[0]) reader.onload = ((e)=>{ const data = e.target.result this.save(data) location.reload() }).bind(this) // アップロードモジュールを削除 if(file){ file.parentNode.removeChild(file) } } 本来のソースとは少し書き換えていますが、概ね上記のソースコードの流れで一般的に流用できます。 upload()関数は、inputタグのtype=file属性で、パソコンのローカルデータをダイアログを通して読み込む方法で使用します。 読み込まれたファイルデータは、upload_file_loaded()関数でデータ処理を行いますが、今回はテキストデータを扱っていますが、バイナリデータも扱うことができるので、 保存時に暗号化して、復元時にそれをデコードするようにすると、データの書き換えなどを防ぐことも可能になりますね。

あとがき

今回のシステムデータの保存と復元という機能は、管理者が使う程度のものなのですが、Webアプリで、操作をしてデータ保存をするような機能だったり、 先日作った、GoogleSpreadSheetのデータを保存、復元したりすることも可能になるように、汎用関数化しておくという手もありますね。 あ、でも今回のシステムデータの保存は、アプリ内のデータは保存されないので、あくまでデスクトップの状態データの保存という意味ですね。 やっぱり、管理者以外は使わない感じがします・・・