デスクトップの大きな特徴は、ビジュアルでフォルダの中にアイコンをポイポイ入れるアレですよね。
Webデスクトップと言いつつ、そんな事もできないのって、一体なんなんや？
という事で、ボチボチちゃんと階層を見据えた動きを構築していきたいと思います。
でも、今回は単純にWindowの中にアイコンを表示するだけなんですけど、大きな一歩になりました。
ていうか、今回は裏で扱うデータ部分の大リファクタリングして大幅に時間を取られてしまいました。
デモ
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回のCommitは"#14"です。
解説
デスクトップのウィンドウの中にアイコンがあるって一体どういう状況なのかというと、コマンドラインなどを操作できる人は理解できると思いますが、ファイル階層そのものなんですよね。
rootというトップ階層があって、そこから中にフォルダやファイルがあって、フォルダの中にさらにフォルダやファイルがあるという、再帰的な構造体になっている状態です。
少し良い方がわかりにくくなってしまいましたが、トーナメントリーグの優勝からの逆が階層みたいな感じですね。
Macのフォルダ構造は次の図のようになってます。
これをどういう構造体で持つのが効率的かな〜と考えていたんですが、
とりあえず、これまで４つのアイコンを表示していたので、その中の2つは、1番目のアイコン（フォルダ）に入れるという初期設定を想定したところ、
２つの方法が考えられて、次の2パターンです。
1. 親に当たるアイコンの子供を設定する。
2. 子に当たるアイコンの親を設定する。
この２つを比べた時に、1番は、子供を配列で保つ必要があるのに対して、親の指定は、それぞれのアイコンごとに1つのみでいいので、parent_idという文字列設定を、setting.jsonに埋め込めば良いということになるので、
この仕様を採用することにしました。
この仕様に合わせて、これまでストレージ（localStorage）に格納しているデータと、setting.jsonのデータは、同じアイコンの設定でも、内容が違っていたので、まずこれを合わせるようにしようと思って、大規模なデータリファクタリングを行うことにしました。
setting.jsonは、システム側でデフォルトで持っておくデータなので、最悪無くても問題無い状態にしておこうと思います。
ストレージに格納するデータを同じにすることで、必要なシステムアイコン設定を簡単に確実にセットできるようになるというメリットもあるので、できるだけ早いタイミングでこの仕様にしたいと思っていました。
これに合わせて、ウィンドウのストレージ格納データも、こちらも独自仕様だったのですが、なるべっくアイコンと同じ仕様にできるように組みなおして、なんとかデータの統一ルールにすることができました。
というわけで、setting.jsonのアイコンに、parent_idをセットして、一番上のアイコンをダブルクリックして、ウィンドウ表示したら、中にアイコンが入っている状態を作ることができました。
それぞれ、アイコンやウィンドウを動かして、リロードしても、ちゃんと同じ表示が再現しているので、データも正常に保存されていることが確認できました。
あとがき
でも、まだ、デスクトップの動きとしては、全然できていなくて、
アイコンをウィンドウの中に入れたり、外に出したり、アイコンをフォルダアイコンに重ねて入れ込むような動作はできていません。
実はここにきて、ウィンドウ内にあるアイコンを外に出す事が、現状に仕様だとできないことが判明してしまいました。
何故かと言うとウィンドウの要素内にアイコンを入れているから、ウィンドウをはみ出すアイコン表示ができないからですね。
これは、アイコンドラッグの仕様を大きく組み直すしか無いですね。
次回はそれをどうやって解消するかをプログラミングしてみたいと思いますね。
0 件のコメント:
コメントを投稿