Webデスクトップの制作 #11 整列処理

WindowsのOSとMaxOSのデスクトップを見て、本当に良くできているな〜と関心するようになってしまいました。 それぞれファイルやフォルダのデータ管理方法は違うはずなんですが、GUIとしては、似たような感じなんですよね。 きっと効率的な管理方法で、且つ処理が重くなりにくい方法があるはずなので、今回のWebデスクトップでは、それを採用して、 実際にWebで公開した時に、運用やメンテナンスがやりやすいように構築したいと改めて考えてしまいました。 さて、前回アイコンをデスクトップ上で、移動してどこにでも配置できるようになったので、今回はバラバラになったアイコンを並べ直す整列処理を作ってみたいと思います。

デモ

事前にデスクトップ上のアイコンをバラバラに移動しておいて、 デスクトップ上で、右クリックをして、表示されたメニューに「デスクトップの整理」を選択してください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

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

解説

今回の大きなポイントは、デスクトップを右クリックしたら現れるコンテキストメニュー（右クリックメニュー）を表示するまでが一山ありました。 その後、アイコンを自動整列する処理は、さほど難しくなかったので、表題間違ってるやろ！と思いましたが、アイコン作業続きという事で、勘弁してやってください。 通常Webページで右クリックをすると、ブラウザのコンテキストメニューが表示されるんですが、event.jsの中で、e.preventDefault()という、便利な処理食い止め機能を使うことで、右クリックメニューを表示することを防止できます。 通常は、oncontextMenu = function(){return false}と要素に書き込んで防止するのですが、プログラマーらしい処理を使ってみました。 そして、同時に、メニューを表示します。 これまで、desktop.jsモジュールは初回のアイコン表示でしか使っていなかったんですが、ここに来てようやく使い道が見えてきました。 desktopでコンテキストメニューをコントロールするんですね。 右クリックからどのメニューを選んだかを判定して、それぞれの処理に振り分けるいわゆるコントローラ的な役割が、このdesktop.jsです。 少し複雑なのは、右クリックをして、コンテキストメニューを表示させて、今度そのメニュー内の項目をクリック（選択）して、それぞれ別の処理を振り分けるので、今何の右クリックメニューが表示されているのかを判別しなければいけません。 其の為、デフォルトデータのタメ口である、Bootstrap.jsを利用して、この中にcontext_menuというデータを保持して、それで対応するようにしています。 今後、アイコンの右クリックなどを行って、いろいろな処理を追加する必要がありますからね。 そして、選択されたメニューの処理ですが、今回は、アイコンの整列なので、iconフォルダのモジュール群に、alignment.js（整列モジュール）を追加して、対応しました。 でも、アイコンを表示する時に使った、position.jsをそのまま使えたので、結構簡単にできちゃいましたね。 ただ、思った通りの順番に整列させようとするともっと処理を書き込まないと行けないのですが、今回はきれいに並べば良いや・・・程度で許してあげましょう。

あとがき

すでに気がついている人もいるかもしれませんが、ヘッダメニューの中にも「アイコン整列」というメニューが初めから用意されています。 OSなどでもよくある処理ですが、こうした汎用的な処理は、いろいろな場所から実行されるケースが多いので、利便性を考慮して、こういう操作は必要だろうな・・・と思って事前に仕込んでいました。 でも、今回の処理でもまだ（ヘッダメニューは）動きません。 そのうち同じ処理で動くようにヘッダメニューモジュールを作り込んで行きたいと思いますが、その前にちゃんとGUIで動くものを作っておくほうが大事だと思ってまだまだ処理を続けていきたいと思います。 さて、次回はどんなバージョンアップがあるのかな？