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のデータを保存、復元したりすることも可能になるように、汎用関数化しておくという手もありますね。
あ、でも今回のシステムデータの保存は、アプリ内のデータは保存されないので、あくまでデスクトップの状態データの保存という意味ですね。
やっぱり、管理者以外は使わない感じがします・・・
0 件のコメント:
コメントを投稿