スマートフォンのUI設計において、まず考えるべきって何だと思いますか？
色々と挙げられますが、今回は”ジェスチャー”について考えてみましょうか。
ジェスチャーを使ったイベントを設定できるライブラリとかも紹介します。
さて。
まずぱっとマツモトが思いつくWebブラウザとスマートフォンでの表示の違いは、
- クリックエリアを広く取らなくてはならない※場合によってはサイズが決められている
- focusはない(タッチした瞬間がそうとも言えるけれど)
- 基本的にリキッドでレイアウトする
まぁその他にも結構留意するところはいっぱいあるのですが、
そもそも、一番大きいのは、
「タッチして操作する」ところ。
しかもマウスでのジェスチャーとは根本的に異なります。
まずはちゃんとここから考えてみようと思います。
スマートフォンのOS間で異なるジェスチャー
こちらを参考にしています。【参考元(PDFファイル)】static.lukew.com
| Platform | ジェスチャ | 説明 | ||
|---|---|---|---|---|
| iPhone OS | Android | Android (only 2.1) | ||
| ○ | ○ | ○ | タップ | ユーザーがコントールやリンクを押そうとするジェスチャーのこと。（デスクトップアプリケーションでのシングルクリック）指をすばやく上げるか下げて画面をタップする。 |
| ○ | ○ | ○ | ダブルタップ | ユーザーがズームまたはある画像以外のコンテンツをズームしようとするジェスチャー。ダブルタップは2回の素早いタップのこと。 |
| ○ | ○ | ○ | フリック | ユーザーがスクロールまたはパンを素早く行うジェスチャー。 指を画面上で動かし素早く一定方向に指をすべらせる。 |
| ○ | ○ | ○ | ドラッグ | ユーザーがとあるポイントへ動かしたりスクロールしたりするジェスチャーのこと。 画面に指を置き好きな方向へ何かを動かしたい時にドラッグを行う。 |
| ○ | ピンチオープン | ユーザーが2本の指を使ってズームインするジェスチャーのこと。ピンチオープンは2本の閉じていた指を開くような動作。 | ||
| ○ | ピンチクローズ | ユーザーが2本の指を使ってズームアウトするジェスチャーのこと。ピンチクローズは2本の開いていた指を閉じるような動作。 | ||
| ○ | ○ | ○ | タッチアンドホールド | ユーザーがインフォメーションを表示させるためのジェスチャー。コンテンツを拡大したり、またアプリケーションの機能などを確認したりする。 タッチアンドホールドは、画面をタッチし、何か情報が出るかまたはアクションが起こるまでホールドし、その後指を離す動作。 |
| ○ | 2本指スクロール | ユーザーがoverflow要素かインラインフレーム要素をスクロールするためのジェスチャー。 2本指スクロールは2本の指を一緒に同じ方向にスクロールする動作のこと。 | ||
基本は押さえた。じゃ、これをJavascriptのイベントとして取得すれば最強じゃね？
ここまでで何となくスマートフォンのジェスチャーの基本は理解できましたね。じゃ、これを今度はイベントして使いたい。
そんな時に下記を使ってみると良さそうです。
（マツモトはまだ試してません、スミマセン。。。）
jQueryとあわせて使うライブラリ「hammer.js」
サポートしているジェスチャーは、タップ、ダブルタップ、ピンチ、ドラッグ、長押し
【jQueryを使ってスマートフォン用のイベントを扱ってみた】
スマホ特有のイベントの参考に。こちらはjQuery上で扱うスマートフォン特有のイベントについて紹介されています。
タッチとジェスチャーのイベントの違いなどについて言及されています。
【jQuery Mobileのイベント処理】
まぁ最初からMobileの方使ってるし！という方はこれですかね。タップ、長押し、スワイプ、スクロール、ページ移動時にもイベントがつけられるようで、そちらが紹介されています。
