マルチタッチWebのメモ

●モバイルエミュレーションモードを有効にする方法
　
①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イベントを無視して正しくエミュレートする。

●ズームの防止
　
・スワイプやジェスチャーはスクロールやズームなどのブラウザの動作に関連付けられている事が多いので、デフォルト設定ではマルチタッチにうまく対応できないことがある。
　
・ズームを無効にするには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)を止めずに、そのイベントをキャンセルする。

・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でモバイルエミュレーションモードを有効にするとキャンパス上にフィンガータッチでお絵かきできる。