iPhoneとAndroidにおいての“ジェスチャー”について

gesture

スマートフォンのUI設計において、まず考えるべきって何だと思いますか?
色々と挙げられますが、今回は”ジェスチャー”について考えてみましょうか。
ジェスチャーを使ったイベントを設定できるライブラリとかも紹介します。



さて。
まずぱっとマツモトが思いつくWebブラウザとスマートフォンでの表示の違いは、

  • クリックエリアを広く取らなくてはならない※場合によってはサイズが決められている
  • focusはない(タッチした瞬間がそうとも言えるけれど)
  • 基本的にリキッドでレイアウトする
というところです。

まぁその他にも結構留意するところはいっぱいあるのですが、
そもそも、一番大きいのは、
「タッチして操作する」ところ。
しかもマウスでのジェスチャーとは根本的に異なります。

まずはちゃんとここから考えてみようと思います。

gesture iPhoneとAndroidにおいての“ジェスチャー”について

スマートフォンのOS間で異なるジェスチャー

こちらを参考にしています。
【参考元(PDFファイル)】static.lukew.com



Platform ジェスチャ 説明
iPhone OS AndroidAndroid (only 2.1)
タップユーザーがコントールやリンクを押そうとするジェスチャーのこと。(デスクトップアプリケーションでのシングルクリック)指をすばやく上げるか下げて画面をタップする。
ダブルタップユーザーがズームまたはある画像以外のコンテンツをズームしようとするジェスチャー。ダブルタップは2回の素早いタップのこと。
フリックユーザーがスクロールまたはパンを素早く行うジェスチャー。
指を画面上で動かし素早く一定方向に指をすべらせる。
ドラッグユーザーがとあるポイントへ動かしたりスクロールしたりするジェスチャーのこと。
画面に指を置き好きな方向へ何かを動かしたい時にドラッグを行う。
ピンチオープンユーザーが2本の指を使ってズームインするジェスチャーのこと。ピンチオープンは2本の閉じていた指を開くような動作。
ピンチクローズユーザーが2本の指を使ってズームアウトするジェスチャーのこと。ピンチクローズは2本の開いていた指を閉じるような動作。
タッチアンドホールドユーザーがインフォメーションを表示させるためのジェスチャー。コンテンツを拡大したり、またアプリケーションの機能などを確認したりする。
タッチアンドホールドは、画面をタッチし、何か情報が出るかまたはアクションが起こるまでホールドし、その後指を離す動作。
2本指スクロールユーザーがoverflow要素かインラインフレーム要素をスクロールするためのジェスチャー。
2本指スクロールは2本の指を一緒に同じ方向にスクロールする動作のこと。


基本は押さえた。じゃ、これをJavascriptのイベントとして取得すれば最強じゃね?

ここまでで何となくスマートフォンのジェスチャーの基本は理解できましたね。
じゃ、これを今度はイベントして使いたい。
そんな時に下記を使ってみると良さそうです。
(マツモトはまだ試してません、スミマセン。。。)

jQueryとあわせて使うライブラリ「hammer.js」

サポートしているジェスチャーは、
タップ、ダブルタップ、ピンチ、ドラッグ、長押し

 iPhoneとAndroidにおいての“ジェスチャー”について
タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.js - かちびと.net
http://kachibito.net/web-design/hammer-js.html

タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.jsのご紹介。若干動きがアレでしたが・・




【jQueryを使ってスマートフォン用のイベントを扱ってみた】

スマホ特有のイベントの参考に。
こちらはjQuery上で扱うスマートフォン特有のイベントについて紹介されています。
タッチとジェスチャーのイベントの違いなどについて言及されています。

 iPhoneとAndroidにおいての“ジェスチャー”について
jQueryを使ってスマートフォン用のイベントを扱ってみた
http://blog.sus-happy.net/201112/jquery-smart-phone/

スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture***」というイベントが「二本指以上」の操作(ピンチイン、ピンチアウト、回転等)を行っている時のイベント、と考えていただければ良いかと思います。 また、「touch***」は一本指だけでなく、二本指以上の操作でも実行されるため、今何本の指が画面上にタッチされているかを確認しながら動作する必要があります。 イベントの実行される流れ 一本指での操作の場合 一本指だけのイベント進行は単純で以下のように進行していきます。 1.touchstart指が画面をタッチした時に実行2.touchmoveタッチした指を画面上で動かした時に実行3.touchend画面上から指を離した時に実行マウスイベントとほとんど変わらないと思います。 二本指での操作の場合 二本指が画面上にタッチされた時は少し特殊で、以下のような順番でイベントが進行します。 1.




【jQuery Mobileのイベント処理】

まぁ最初からMobileの方使ってるし!という方はこれですかね。
タップ、長押し、スワイプ、スクロール、ページ移動時にもイベントがつけられるようで、そちらが紹介されています。







コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>