Webデスクトップと通常のパソコンOSの圧倒的な違いは、レスポンシブデザイン対応をしなければいけないという点でしょう。
インターネットのサイトには、ウェブブラウザを持っているあらゆる端末からアクセスができます。
パソコンもスマホもタブレットも、何ならコンシューマゲーム器から、最近では家電のテレビなどからもアクセスできます。
もちろん全てに対応するのは難しいとは思いますが、PCとスマホの2種類は標準対応しておくのが、今どきのホームページ制作の常識です。
ということで、今回開発しているWebデスクトップも、スマートフォンでのアクセスに対応してみたいと思います。
デモ
うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回の最終Commitは"#35"です。
解説
スマホ対応の前にいくつかバグを修正しました。
これまでの機能追加で、いろいろな箇所に細かなバグが生まれていました。
今回はバグはメインの課題ではないので、気になる方はgithubの
issueのclosedを御覧ください。
他にも、faviconや、ロゴタイトル、アイコンなどなど見た目の変更をいくつか行っています。
スマホ対応の基本ルール
スマホと言っていますが、実はiPadなどのタブレット機器も対象にします。
というのも、そもそも今回のWebデスクトップの操作は、パソコンの右クリックやダブルクリックという、マウス操作を主体に作っているので、
クリックとタッチイベントしかできない端末では、表示はできますが、まともに動きません。
とりあえず、マウスドラッグなどの代わりにタッチ操作に対応してもいいのですが、
アイコンやウィンドウは、自由座標から、順番に並ぶwrap方式に切り替えます。
これにより、無駄にドラッグするような操作はタッチデバイスでは、無くすという仕様になります。
js/desktop/click.js
このモジュールで、クリック時に、クリック対象のエレメントを判別して処理していたんですが、ここにタッチイベントがある場合の処理を追加しました。
window.ontouchstart
ちなみに、タッチイベントの判定は、上記の値が、undefinedであれば、タッチイベントは存在せず、それ以外(nullなど）であれば、タッチイベント端末という判定で行うことにしました。
ヘッダメニューをハンバーガーメニューに変更
PCの大画面時は今まで通りなんですが、タブレットサイズの768pxを下回ると、ハンバーガーメニュー方式に切り替えるようにしました。
これにより、メニューは、ホームページなどで使われる画面とは別表示っぽい感じで使うことができます。
アイコンやウィンドウの並び
基本的にCSSの対応がほとんどだったのですが、
.iconと.windowをそれぞれ、position:absoluteをposition:staticに切り替えて、
display:flexにすることで、orderプロパティが使えるようになるので、アイコンは手前（上部）に越させるために、-1をセット
ウィンドウはその次に来るように、1をセットします。
ちなみに、ゴミ箱は一番下に表示したいので、10をセットしておきました。
これで、iconは、flex-wrapモードで横並びにして、
windowは、横幅が100%なので、縦並びになってくれます。
アプリなどの表示は、それぞれの中で対応するしかないのですが、こればっかりはWebデスクトップのOS側ではどうしようもないですからね。
スマホは縦スクロール
最後に、デスクトップのmain部分にoverflow:scrollをセットして、スクロールできるようにして、対応完了です。
あとがき
実は表示と簡単な基本操作は今回の対応でできるようになっているんですが、
右クリックのコンテキストメニュー操作と、ドラッグ操作などが仕様から漏れています。
どんな操作方法で対応するのがいいか考えきれていないので、今後いい感じに仕上げていこうと思います。
スマホのOS部分が非常に参考になりますからね。
汎用的な操作方法にしておくことで、誰でも使いやすくなるはずです。
0 件のコメント:
コメントを投稿