ジェスチャ、操作、対話的操作 (HTML)

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

タッチ操作によって、アプリで物理的なジェスチャを使って UI 要素の直接的な操作をエミュレートできます。

タッチ操作は、画面上でそれらの要素を対話方式で操作するときに現実的で自然なエクスペリエンスを提供します。一方、プロパティウィンドウやその他のダイアログボックスを使ったオブジェクトとの対話的操作は、間接的な操作と見なされます。このほか、Windows では、さまざまな入力モードとデバイス (タッチ、マウス、ペンなど) でタッチ操作をサポートしています。

Windows ランタイムプラットフォーム API は、ポインター、ジェスチャ、操作という 3 種類の対話式操作イベントを通じてユーザー操作をサポートします。

ポインターイベントは、場所やデバイスの種類などの基本的な接触情報と、圧力や接触形状などの拡張情報を取得し、より複雑な対話式操作をサポートするために使われます。
ジェスチャイベントは、タップや長押しなど、1 本の指での静的な対話式操作を処理するために使われます (ダブルタップと右タップは、これらの基本的なジェスチャから派生したジェスチャです)。
操作イベントは、ピンチやストレッチなどの動的なマルチタッチ操作、パン/スクロール、ズーム、回転などの慣性と速度データを使った操作に使われます。注操作イベントで取得された情報は、対話式操作を識別するものではなく、位置、変換デルタ、速度などの入力データを指定するものです。このデータは、その後、操作の特定と対話式操作の実行のために使われます。

詳しくは次のクイックスタートをご覧ください。

次に、ジェスチャ、操作、対話式操作の関係について説明します。

ジェスチャ

ジェスチャは、入力デバイス (1 本の指、複数の指、ペン/スタイラス、マウスなど) 上で、または入力デバイスにより実行される物理的な動作や動きです。たとえば、コマンドの起動、アクティブ化、呼び出しを行うには、タッチとタッチパッドデバイスでは 1 本指でのタップ (マウスでの左クリック、ペンでのタップ、キーボードでの Enter キーに相当) を使います。

次に示すのは、UI を操作したり対話的操作を実行したりするための基本的なタッチジェスチャのセットです。

名前	種類	説明
タップ	静的ジェスチャ	1 本の指で画面をタッチし、その指を上げます。
長押し	静的ジェスチャ	1 本の指で画面をタッチし、そのまま押し続けます。
スライド	操作ジェスチャ	1 本または複数の指で画面をタッチし、同じ方向に動かします。
スワイプ	操作ジェスチャ	1 本または複数の指で画面をタッチし、同じ方向に少しだけ動かします。
回転	操作ジェスチャ	2 本以上の指で画面をタッチし、時計回りまたは反時計回りに動かします。
ピンチ	操作ジェスチャ	2 本以上の指で画面をタッチし、それらの指を近づけていきます。
ストレッチ	操作ジェスチャ	2 本以上の指で画面をタッチし、それらの指を離していきます。

操作

操作は、ジェスチャに対するオブジェクトまたは UI の即時の継続的な反応や応答です。たとえば、スライドジェスチャとスワイプジェスチャはどちらも、要素または UI をある方向に動かします。

最終的な操作の結果、画面上のオブジェクトと UI を通じて示される動作が、対話的操作です。

対話的操作

対話式操作は、操作の解釈方法とその操作の結果のコマンドやアクションに基づきます。たとえば、スライドジェスチャとスワイプジェスチャではオブジェクトを移動できますが、その結果は距離のしきい値を超えているかどうかによって異なります。スライドはオブジェクトのドラッグやビューのパンのために使いますが、スワイプは項目の選択や AppBar の表示のために使います。

このセクションでは、一般的な対話的操作について説明します。

学習

長押しジェスチャは、アクションやコマンドをコミットせずに、詳細情報や説明を伝える視覚効果 (ヒントやショートカットメニューなど) を表示するために使います。パンは、視覚効果が表示されている間にスライドジェスチャを開始した場合でも実行できます。詳しくは、「視覚的なフィードバックのガイドライン」をご覧ください。

学習操作

コマンド実行

タップジェスチャは、プライマリ操作 (アプリの起動、コマンドの実行など) を呼び出します。

コマンド操作

パン

スライドジェスチャは主にパン操作に使われますが、移動、描画、筆記などの操作に使うこともできます。パンは、コンテンツの小さなセット (コンピューターのフォルダー構造、ドキュメントライブラリ、フォトアルバムなど) を単一のビュー内で少し移動するための、タッチに最適化された手法です。マウスやキーボードを使ったスクロールと同様に、パンはビュー内のコンテンツの量によってコンテンツ領域の表示可能な領域がオーバーフローする場合にのみ必要です。詳しくは、「パンのガイドライン」をご覧ください。

パン操作

ズーム

ピンチジェスチャとストレッチジェスチャは 3 種類の対話式操作 (光学式ズーム、サイズ変更、セマンティックズーム) に使われます。

光学式ズームとサイズ変更

光学式ズームでは、コンテンツ領域全体の拡大レベルを調整し、コンテンツをさらに詳しく表示します。一方、サイズ変更は、コンテンツ領域に対する表示は変更せずに、コンテンツ領域内で 1 つまたは複数のオブジェクトの相対的なサイズを調整する手法です。ここに示す上の 2 つの図は光学式ズームを示しています。また、下の 2 つの図では、他のオブジェクトのサイズを変更せずに画面上の四角形のサイズを変更しています。詳しくは、「光学式ズームとサイズ変更のガイドライン」をご覧ください。

光学式ズーム操作

サイズ変更操作

セマンティックズーム

セマンティックズームは、パン、スクロール、ツリービューコントロールを使わずに、1 つのビュー内で構造化されたデータまたはコンテンツ (コンピューターのフォルダー構造、ドキュメントライブラリ、フォトアルバムなど) を表示したり移動したりするための、タッチに最適化された手法です。セマンティックズームでは、拡大すると詳細が表示され、縮小すると簡易表示になるようにして、同じコンテンツの 2 つの異なるビューを提供します。詳しくは、「セマンティックズームのガイドライン」をご覧ください。

セマンティックズーム操作

回転

回転ジェスチャは、平面上で紙片を回転させる操作をシミュレートします。この操作は、オブジェクト上に 2 本の指を置き、1 本の指をもう 1 本の指を軸にして動かすか、両方の指を中央を軸にして動かし、目的の方向に手を回転させて実行します。片方の手の 2 本の指または左右の手から 1 本ずつ使うことができます。詳しくは、「回転のガイドライン」をご覧ください。

回転操作

選択と移動

スライドジェスチャとスワイプジェスチャは、コンテンツ領域のパン方向に対する垂直移動であるクロススライド操作に使われます。この操作は、選択操作、または距離のしきい値を超えている場合は移動 (ドラッグ) 操作と解釈されます。次の図は、これらのプロセスを表しています。詳しくは、「クロススライドのガイドライン」をご覧ください。

選択操作とドラッグアンドドロップ操作

コマンドバーの表示

スワイプジェスチャは、さまざまなコマンドバーやログイン画面の表示に使われます。

画面の上端または下端からスワイプすると、アプリコマンドが表示されます。AppBar を使ってアプリコマンドを表示します。

アプリコマンドの表示

システムコマンドは右端からスワイプすると表示され、最近使ったアプリは左端からスワイプすると表示されます。また、上端から下端にスワイプすると、ドッキングコマンドや閉じるコマンドが表示されます。

システムコマンドの表示

ジェスチャ、操作、対話的操作 (HTML)

ジェスチャ

操作

対話的操作