マルチタッチWebのメモ

マルチタッチWeb開発についてメモ書きしています。


※目次をクリックすると目次の下部にコンテンツが表示されます。

  1. タッチイベント
  2. Google Chromeのモバイルエミュレーションモード
  3. タッチを有効にしたアプリ
  4. ズーム、スクロールの防止
タッチイベント
●API、規格
 
・TouchEventインターフェイス
 
・touch events specification
 
●タッチイベント
 
・touchstart
指がDOM要素上に置かれた
 
・touchmove
指がDOM要素上をドラッグ
 
・touchend
指がDOM要素から離れた
 
上記のイベントはそれぞれ3つのtouchesのリストを含む。
 
●touchesのリスト
 
・touches
現在スクリーン上にあるすべての指のリスト
 
・targetTouches
現在のDOM要素上にある指のリスト
 
・changedTouches
現在のイベントに関わる指のリスト
 
●上記リストのオブジェクトが含む情報
 
・identifier
タッチセッション内で現在の指を一意に識別する数値
 
・target
そのアクションのターゲットとなったDOM要素
 
・client/page/screen coordinates
そのアクションがどのスクリーン上で起こったか
 
・radius coordinates and rotationAngle
指の形になぞらえた楕円

Google Chromeのモバイルエミュレーションモード

●モバイルエミュレーションモードを有効にする方法
 
①F12押下又はメニュー→ツール→デベロッパーツール
②上部メニューの右側にある”>三”のボタン押下
③下に”Emulation”タブが表示される。
④”Emulate”ボタンと”Reset”ボタンで有効、無効を設定できる。
 
●画面の項目
 
①Deviceセクション
・iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy phonesなど主要なモバイルデバイスを選択してエミュレートする事が出来る。
 
②Screenセクション
・Resolution、Devise pixel ratioなどカスタムできる。
 
③User Agentセクション
・HTTPリクエストヘッダーの”User Agent”をGoogle Chromeのものではなく、ここで指定した文字列に変更する。
 
④Sensorセクション
・touch、geolocation、accelerometerなどデバイスのハードウェア面のエミュレーションを設定できる。
・touchエミュレーションを有効にするとマウスカーソルが影のついた小丸に変る。
・ピンチングのようなマルチタッチイベントは、Shiftを押しながらマウスをドラッグしてシミュレートできる。
 
※touchモードはJavaScriptのtouchstart、touchmove、touchendイベントに対応する。
※モバイルブラウザはmouseoverなどのマウスイベントを発行することによって互換性を保証するようにしているが、要素をタップしたときのみ発行する。
 
・エミュレータはタッチカーソルをホバーしたときにはmouseoverイベントを無視して正しくエミュレートする。

タッチを有効にしたアプリ

・touchstart、touchmove、touchendイベントは、pinch-zoom, rotationのような一般のmulti-touch gesturesを含むタッチベースの相互作用をサポートする機能を提供する。
 
・シングルフィンガータッチを使ってDOM要素をドラッグするコードの例

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

●マルチタッチのデモ
 
・canvas-based drawing
 
・Browser Ninja
 
Google Chromeでモバイルエミュレーションモードを有効にするとキャンパス上にフィンガータッチでお絵かきできる。

ズーム、スクロールの防止

●ズームの防止
 
・スワイプやジェスチャーはスクロールやズームなどのブラウザの動作に関連付けられている事が多いので、デフォルト設定ではマルチタッチにうまく対応できないことがある。
 
・ズームを無効にするにはviewportを下記のように設定する。

<meta name="viewport" 
  content="width=device-width, initial-scale=1.0, user-scalable=no">

●スクロールの防止
 
・touchmoveに対してデフォルトの動作が設定されているモバイルデバイスがある。
 
たとえば従来のiOSのオーバースクロール効果(コンテンツの境界を越えてスクロールすると表示が戻る)などがあるが、この挙動はマルチタッチアプリケーションで混乱が生じることがある。
 
・このデフォルトのスクロールを防止するには下記のように設定する。

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false); 

※preventDefault
イベントがキャンセル可能である場合、上位ノードへのイベントの伝播(propagation)を止めずに、そのイベントをキャンセルする。

ズーム、スクロールの防止

関連記事の目次

コメントを残す

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