Windows8 Gesture動作

Rev.2を表示中。最新版はこちら。

Vivo Tabを買った

Windows8タブレットでの動作確認用にASUSのVivo Tab RTを買った。タブレットとして使う分にはWindows8のメトロUIはなかなか使いやすい。

Gesture関連のイベント

早速、JavaScriptからタッチ等ジェスチャ関連のイベントをどのように扱えるか試してみた。

まず、iOS,Androidのタッチ関連のイベントとはまったく異なる。Windows8ではタッチ関連のイベントにはマウスイベント、ポインタイベント、ジェスチャーイベントの3種類がある。

(a) マウスイベント

従来のマウス操作で使っていたmousedown,mouseup,click等のイベント。これらは、タッチパネル操作でも従来どおりイベント発生するので、PC用のサイトなどでは特に修正をしなくてもタッチパネルから操作できる(このあたりはiOS,Androidも同じ)。ただし、マルチタッチなどに対応するには以下ポインタイベント、ジェスチャーイベントを使う必要がある。

(b) ポインタイベント

タッチパネル上での指の動き(Up/Down/Move)を検出するイベント。MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancelのようにイベント名はMSPointerで始まる。

iOS,Androidなどでは、touchmoveイベントのevent.touches[]で全ての指の状況を把握できたが、Windows8のポインタイベントでは、指1本毎にポインタIDというものが割り振られて、それぞれのポインタ(指)毎にイベントが発生するため、イベントハンドラではイベントに関連するポインタ(指)の情報しか参照できない。このため、全ての指の状況を把握するには、自分で管理してやる必要がある。

タップやホールド等の操作を検出するのに使われるイベント。ポインタイベントでは、単純にUp/Down/Moveしか取得できないので、ホールド等を検出しようとすると、指を降ろしていた時間を監視したりと面倒になるのだが、ジェスチャイベントを使えば簡単にホールド等のジェスチャを検出できる。

なお、iOS,Androidではジェスチャイベントとは複数の指での操作を意味していたが、Windows8では1本指での操作(タップ)等もジェスチャ動作として扱われるので、若干意味が異なる。

ポインタイベントの使い方

ポインタイベントを使うには、まずデバイスがポインタイベントをサポートしているかどうかを確認する必要がある。

デバイスがポインタイベントをサポートしているかどうかは、 window.navigator.msPointerEnabledで判断できる。msPointerEnabledがtrueなら、 window.addEventListener('MSPointerDown', onPointerEvent, false) のようにしてポインタイベントを取得できる。

イベントリスナーの登録

// ポインタイベントのサポート有無チェック
if (window.navigator.msPointerEnabled) {
    // ポインタイベントのリスナー登録
    window.addEventListener('MSPointerDown', onPointerEvent, false);
    window.addEventListener('MSPointerMove', onPointerEvent, false);
    window.addEventListener('MSPointerUp', onPointerEvent, false);
    window.addEventListener('MSPointerCancel', onPointerEvent, false);
}

イベントリスナー側では以下のようにしてイベントを処理できる。

リスナーの例

function onPointerEvent(e)
{
  var id = e.pointerId;   // IDで指を識別する

  if (e.type == "MSPointerDown") {
    :
  }
  if (e.type == "MSPointerUp") {
    :
  }
  :
}

e.pointerIdにはポインタを識別するID値が入っている。ポインタIDはパネルに指を触れた時(MSPointerDown)に新しく割り当てられ、指がパネルに触れている間は同じIDが維持される。Windows8では、iOSのevent.touches[]のように一つのイベントで複数の指の情報は取得できないので、複数の指の情報を参照したい場合は、このポインタIDをキーにして各指の情報をどこかに保存しておく必要がある(ページ下のサンプル参照)。

なお、デバイスが何本の指まで識別できるかは、navigator.msMaxTouchPointsで取得できる。Vivo Tabは5だった。

ジェスチャーイベントの使い方

マウスイベントや、ポインタイベントは

イベントを使ったサンプル

タッチ関連のイベントの勉強用に作ったサンプル。

http://www.bit-hive.com/~tomita/Win8Gesture/

マウス

参考ページ

Pointer and gesture events (Windows)

編集中