パン、ズーム、タップにとどまらない操作性を実現するジェスチャ イベント

皆様からのフィードバックに基づき、Windows 8 Release Preview に搭載の IE10 では、ジェスチャ イベントを使った高度なタッチ操作エクスペリエンスをサイトで提供するための方法が改良されています。このブログではこれまでに、サイトをタッチ操作に対応させるために Web 開発者が最初に行うべきステップと、ハードウェアに依存しないポインター イベントを使って、さまざまな入力デバイスに対応した、マルチタッチを含む新しいエクスペリエンスを作り上げる方法について紹介しました。今回の記事では、IE10 のジェスチャ イベント (英語) について説明します。ジェスチャ イベントは、たとえば下の画像の Test Drive デモ "Browser Surface" (英語) でも使用されています。

写真のドラッグ、ピンチ、回転などを楽しむことができる Browser Surface デモ (英語)

Windows 8 Release Preview の IE10 では、JavaScript のジェスチャ認識オブジェクトが新たに導入されています。サイトはジェスチャ オブジェクトを作成し、処理するポインター (マウス、ペン、またはタッチ操作による接触) を選んで、ジェスチャ イベントを任意の要素に渡すことができます。ブラウザーは行われたジェスチャを計算し、イベントを介してページに通知します。これによって開発者は、現時点では他のどのブラウザーでもネイティブには実現できないジェスチャ エクスペリエンスを作り上げることができます。たとえば、複数ジェスチャの同時並行処理 (パズルのピースを 2 つ同時に手で回転させるなど) も可能です。

では、コード上ではどのようになるか見てみましょう。

ジェスチャ オブジェクトの作成

サイトでジェスチャを扱う場合、まずジェスチャ オブジェクトのインスタンス化を行います。

var myGesture = new MSGesture();

次に、ジェスチャにターゲット要素を与えます。これは、ブラウザーがジェスチャ イベントを呼び出す対象となる要素を指します。また、イベントで使用される座標空間を決定する要素でもあります。

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

最後に、ジェスチャ認識の際に処理するべきポインターをジェスチャ オブジェクトに伝えます。

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

注: –ms-touch-action (英語) を使って、パンやズームといった既定のタッチ操作アクションを行わず、代わりに入力に対してポインター イベントを提供するよう、要素を構成する必要があります。

ジェスチャ イベントのハンドリング

ジェスチャ オブジェクトに有効なターゲットを設定し、1 つ以上のポインターを追加すると、ジェスチャ イベントの呼び出しが始まります。ジェスチャ イベントは 2 種類あります。静的ジェスチャ (タップ、ホールドなど) と動的ジェスチャ (ピンチ、回転、スワイプなど) です。

タップ

最も基本的なジェスチャ認識はタップです。タップが検出されると、ジェスチャ オブジェクトのターゲット要素に対して MSGestureTap イベントが呼び出されます。クリック イベントと異なり、タップ ジェスチャは、ユーザーがタッチし (あるいはマウス ボタンをクリック、またはペンでタッチし)、移動することなく指を離した場合にのみ呼び出されます。このことは、要素をタップする操作と要素をドラッグする操作を判別する際に役立ちます。

長押し (プレス アンド ホールド)

長押しジェスチャは、ユーザーが指 1 本でタッチし、タッチしたままひと呼吸おいてから、移動することなく指を離した場合に呼び出されます。長押し操作では、ジェスチャのさまざまな状態を反映するため、複数回にわたって MSGestureHold イベントが呼び出されます。

element.addEventListener("MSGestureHold", handleHold);

function handleHold(evt) {

if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {

// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.

}

if (evt.detail & evt.MSGESTURE_FLAG_END) {

// End signals the end of the gesture.

}

if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {

// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.

}

}

動的ジェスチャ (ピンチ、回転、スワイプ、ドラッグ)

ピンチや回転などの動的なジェスチャは、CSS の 2D Transform と似た、トランスフォーム (変換) の形でレポートされます。動的ジェスチャでは、3 つのイベントが呼び出されます。MSGestureStart、MSGestureChange (ジェスチャの続行に対応して連続的に呼び出し)、そして MSGestureEnd です。各イベントには、スケール (ピンチ)、回転、トランスレーション、および速度についての情報 (英語) が含まれます。

動的ジェスチャはトランスフォームの形でレポートされるため、MSGesture と CSS 2D Transform を使って、簡単に写真やパズルのピースなどの要素を操作することができます。たとえば、次のようにして要素のスケール、回転、ドラッグを有効にすることができます。

targetElement.addEventListener("MSGestureChange", manipulateElement);

function manipulateElement(e) {

// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition

// if (e.detail == e.MSGESTURE_FLAG_INERTIA)

// return;

 

var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element

e.target.style.transform = m

.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture

.rotate(e.rotation * 180 / Math.PI) // Apply Rotation

.scale(e.scale) // Apply Scale

.translate(e.translationX, e.translationY) // Apply Translation

.translate(-e.offsetX, -e.offsetY); // Move the transform origin back

}

スケールや回転などの動的ジェスチャは、マウスの場合、キー (スケールの場合は Ctrl、回転の場合は Shift) を押しながらホイールを回すことで行います。

まとめ

IE10 のジェスチャ イベントでは、現在他のどのブラウザーでも実現できないタッチ エクスペリエンスを作り上げることができます。MSGesture オブジェクト (英語) と MSGesture イベント (英語) の詳しいドキュメントは、MSDN でご覧いただけます。

ジェスチャ イベントを活用して、パン、ズーム、タップにとどまらない、多様な操作性を持つサイトを製作してみてください。

— Internet Explorer 担当プログラム マネージャー Jacob Rossi