Webデスクトップの制作 #16 ウィンドウのリスト表示

表示系のシステムとデータがだいぶ安定してきたので、ちょっとした機能追加を行いたいと思います。 ウィンドウの表示をこれまでのデスクトップと同じアイコン表示から、リスト表示に切り替えてみます。

デモ

表示したウィンドウに切り替えボタンを付けました。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

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

解説

windowのヘッダ表示のアセットは、asset/window.htmlに格納しているので、この中のHTMLでのヘッダ部分に、view-typeのボタンを設置しました。表示しているタイプによって、アイコンが切り替わるように、クリックイベントに切り替え処理を入れて準備完了。 あとは、cssに、属性で切り替わるdata-view-typeを、"icon"と"list"で、それぞれの表示方式を書いて対応完了です。 問題点としては、リスト表示時にアイコンをドラッグしようとクリックしたときに、アイコン状態のインスタンスが表示されるので、少し動きがおかしく感じてしまいます。 きっと、表示状態のままのインスタンス表示にしたほうがいいかもしれませんね。 あと、今回もう一つ機能追加をしていて、これまでデスクトップの右クリックのみで、コンテキストメニューが表示されていたんですが、 ウィンドウの中で右クリックしても、「アイコン整列」などのコンテキストメニューを表示するように機能追加しました。 これで、デスクトップだけじゃなく、ウィンドウでも、散らかったアイコンを、整列させることができるようになりました。 最後にもうひとつだけ機能追加したんですが、ウィンドウの名称の横に、アイコンを表示するようにしました。 文字だけだと、何のアイコンをクリックしたのかわかりにくかったので、これは必須の機能でしたね。

あとがき

もう2週間以上Webデスクトップを作り続けていますが、ゴールはまだまだ届いていません。 これをWebサイトとして公開できる状態にして、サイトとしての機能を追加してナンボのWebデスクトップです。 あとは、何かしらのシステムのGUIとして、システムとの機能のつなぎ込みができる事もミッションのひとつですね。 wifiなどの管理画面にうんざりしている人も多いと思いますが、是非このWebデスクトップ採用してもらいたいですね。 まあまあ、操作性いいでしょ？ 今後、いろいろなアプリを立ち上げるようにもするんですが、表示するコンテンツは、Web上のURLから、canvasを直接ウィンドウで表示したりと、なかなか可能性は無限大の世界なので、コンテンツは未知数ということで、ワクワクがとまりません。 そんなわけで、次回のWebデスクトップのアップデートを見守ってやってください。