Webデスクトップの制作 #10 アイコン操作

GUIの操作性は、アイコン操作次第でクオリティ判定がされてしまいます。 これまでダブルクリック以外、全く動かなかったアイコンを自由に動かして操作できるようにしてみます。

デモ

※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

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

解説

アイコン操作をする前に、似たような操作をするwindowのリファクタリングをしておきます。 event.jsの内容を変更しました。 これまで、pointermoveイベントとして、意識せずにドラッグ移動をする事のみを処理していましたが、 これまで多様していた、mousedown -> mosemove -> moseup の用に、開始->挙動->終了のような作業をそれぞれ処理できるようにする仕様にしました。 いっそのこと、これまでの down->move-up イベントで対応しようと思ったんですが、pointermoveイベントがあまりにも便利すぎたので、mousemove系はできるだけこれで対応できるように仕組み作りをしようと思い、無理やりですが、内容にコメントを書いて置きました。 （そのうち、仕様変更するかもしれませんが・・・） あと、変更点としては、これまで、windowの移動では、.windowの要素に対して、style属性で、left,top,width,heightなど、直接スタイルシートを書き込んでいましたが、css変数機能を使って、--x,--y,--w,--hにそれぞれの値を入れて、css内部で対応するようにしました。 htmlタグに直接スタイルの記述をするのが、個人的に気持ち悪かったので、変数での対応にしました。 どちらにしても、タグ記述になってしまうのですが、値がそのまま見えるのが気持ち悪いのであれば、暗号化したハッシュ値っぽい文字列での対応にすることは可能ですが、今のところはこの状態にしておきます。 アイコンの移動は、基本的にwindow移動の処理とほぼ同じ状態で、イベントでのモード振り分けにて対応できました。 ただ、windowとiconは、それぞれ処理モジュールが違うので、新たにmove.jsを作っての対応になります。 （モジュールがどんどん増えていきますね） アイコンは移動する時に、HTMLのタグ属性に、data-status="move"という値を追加して、移動が終わるとその属性を消すという処理を入れています。 これにより、通常はアイコンの座標が変わる時（まだ処理入れてないですが、ウィンドウリサイズなどの時）に、transitionが効いてスムーズな移動を行ってくれるんですが、マウス移動する時に、この処理があると、コンフリクトを起こしてしまうので、除外する意味でステータスをセットしています。 また、移動中は、ウィンドウよりも手前に表示する必要があるので、z-indexを変更する処理にも連動しています。 もちろん、移動が終わったタイミングで、data-status属性は破棄するために、イベント処理の見直しを行ったんですね。

あとがき

アイコンが移動できるようになって、ウィンドウの中にアイコンを入れようとした人、それはまだできません。 アイコンを入れ子にするためには、さらなる内部データを作り込んでシステム設計しなければいけません。 そもそも、今現在の仕様では、アイコン=フォルダとしてしか扱っていないので、ちゃんとファイルやアプリケーションみたいな処理区分をもたせる必要がありますね。 なんなら、PDFファイルなんかも、ウィンドウとして開きたいですからね。 というわけで、その辺の大きな仕様変更が控えていますが、まだまだ操作性的なところも足りていないので、もっともっとGUIを作り込んで行きたいと思います。 カメ足的な速度での開発ですが、お付き合いくださいませ。