タッチパッド操作への反応 (HTML)

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

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

ユーザーがタッチパッドで操作できる Windows ストアアプリを設計し、構築します。

ヒント このトピックの情報は、JavaScript を使った Windows ストアアプリにのみ適用されます。

C++、C#、Visual Basic を使った Windows ストアアプリについては、「タッチパッド入力への反応 (XAML)」をご覧ください。

前提条件: JavaScript を使って Windows ストアアプリを開発するのが初めての場合は、以下のトピックに目を通して、ここで説明されているテクノロジをよく理解できるようにしてください。

JavaScript を使った初めての Windows ストアアプリの作成

JavaScript を使った Windows ストアアプリのためのロードマップ

イベントについては、「クイックスタート: HTML コントロールの追加とイベントの処理」をご覧ください。

アプリの機能の概要: この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。

ユーザー操作の概要 (HTML)

ユーザー操作のカスタマイズの概要 (HTML)

ユーザーエクスペリエンスガイドライン:

プラットフォームコントロールライブラリ (HTML と XAML) は、標準的な対話式操作、アニメーション化された物理的効果、視覚的フィードバックなど、Windows の完全なユーザー操作エクスペリエンスを提供しています。操作のサポートをカスタマイズする必要がない場合は、これらのビルトインコントロールを使います。

プラットフォームコントロールでは十分に対応できない場合は、以下のユーザー操作ガイドラインに従うと、どの入力モードでも一貫性のある、魅力的でイマーシブな対話式操作エクスペリエンスを実現できます。これらのガイドラインは、主にタッチ入力を対象として説明していますが、タッチパッド、マウス、キーボード、スタイラスでの入力にも当てはまります。

サンプル: Windows ストアアプリのサンプルで、この機能の動作を実際に確かめることができます。

ユーザー操作のカスタマイズの概要のサンプルに関するページ

入力: デバイス機能のサンプルに関するページ

入力: DOM ポインターイベント処理のサンプルに関するページ

HTML のスクロール、パン、ズームのサンプルに関するページ

入力: 操作とジェスチャ (JavaScript) のサンプルに関するページ

入力: インスタンス化できるジェスチャのサンプルに関するページ

概要

タッチパッドは、間接的なマルチタッチ入力と、マウスのようなポインティングデバイスの精密入力を組み合わせたものです。この組み合わせにより、タッチパッドはタッチに最適化された UI にも、生産性アプリとデスクトップ環境で使用される一般的に小さなターゲットにも適しています。Windows ストアアプリの設計はタッチ入力用に最適化し、既定のタッチパッドのサポートを利用します。

タッチパッドでサポートされている対話式操作のエクスペリエンスは複合的であるため、タッチ入力の組み込みサポートのほかにマウススタイル UI コマンドも提供することをお勧めします。たとえば、コンテンツをパンするだけでなく、"前へ" ボタンと "次へ" ボタンを使ってコンテンツのページをフリップできるようにします。

このトピックで説明されているジェスチャとガイドラインを利用することで、アプリはタッチパッド入力を最小限のコードでシームレスにサポートできます。

タッチパッド操作をサポートするためのユーザーエクスペリエンスガイドライン

Windows では、タッチパッド入力用に最適化された一連の一般的なジェスチャがサポートされています。ここでは、タッチパッド操作をサポートするためのガイドラインを示します。

Windows 8.1 タッチパッド言語

システム内では一貫して、タッチパッド操作の簡単なセットが使われます。アプリをタッチとマウス入力用に最適化すると、ユーザーが慣れている操作感がこの言語によって実現されるので、信頼感が高まり、アプリの習得や使用も簡単になります。

用語	説明
ホバーによる説明の表示	要素にホバーすると、詳しい情報や説明を伝える視覚効果 (ヒントなど) が表示されます。操作はコミットされません。ヒントについて詳しくは、「ヒントの追加」をご覧ください。
1 本指でのタップによるプライマリ操作	1 本指を使って要素をタップすると、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。
2 本指でのタップによる右クリック	2 本の指で同時にタップすると、グローバルコマンドが含まれているアプリバーが表示されます。要素上でタップすると、その要素が選択され、状況依存のコマンドが含まれているアプリバーが表示されます。注選択またはアプリバーのコマンドが適切な UI 動作ではない場合は、2 本指でのタップによりショートカットメニューが表示されます。ただし、すべてのコマンド動作にアプリバーを使うことを強くお勧めします。
2 本指でのスライドによるパン	スライドは主にパン操作に使われますが、移動、描画、筆記などの操作に使うこともできます。
ピンチとストレッチによるズーム	ピンチジェスチャとストレッチジェスチャは、通常、サイズ変更とセマンティックズームに使われます。
1 本指でのプレスとスライドによる移動	要素をドラッグします。
1 本指でのプレスとスライドによるテキストの選択	選択可能なテキスト内を押してスライドし、選択します。単語を選択するには、ダブルタップします。
左と右のクリックゾーン	マウスデバイスの左ボタンと右ボタンの機能をエミュレートします。
システムコマンドのための端の操作 (システムに依存する)	画面の右端 (右から左のレイアウトでは左端) からスワイプすると、システムコマンドが含まれているチャームが表示されます。左端 (右から左のレイアウトでは右端) からスワイプすると、実行中のアプリの一覧が表示されます。

ハードウェア

マウスデバイス機能 (MouseCapabilities) を照会して、タッチパッドハードウェアから直接アクセスできるアプリ UI の要素を識別します。タッチ入力とマウス入力の両方の UI を用意することをお勧めします。

デバイス機能の照会について詳しくは、「クイックスタート: ポインターデバイスの識別」をご覧ください。

視覚的なフィードバック

移動イベントまたはホバーイベントを通じてタッチパッドカーソルが検出されたら、マウス固有の UI を表示して、要素によって公開されている機能を示します。タッチパッドカーソルが一定の期間動かされなかった場合や、ユーザーがタッチ操作を始めた場合は、タッチパッド UI を徐々に非表示にします。これにより、UI の簡潔さが保たれます。
ホバーのフィードバックにカーソルを使わないでください。要素によるフィードバックで十分です (以下の「カーソル」をご覧ください)。
静的テキストなど、要素で対話式操作がサポートされていない場合は、視覚的なフィードバックを返さないでください。
タッチパッド操作ではフォーカス用の四角形を使わないでください。これはキーボード操作専用です。
同じ入力対象を表すすべての要素に対して視覚的なフィードバックを同時に表示します。

視覚的なフィードバックに関する一般的なガイダンスについては、「視覚的なフィードバックのガイドライン」をご覧ください。

カーソル

タッチパッドポインターとして利用できる標準のカーソルセットが用意されています。これらが要素のプライマリ操作を示すために使われます。

標準のカーソルには、それぞれ対応する既定の画像が関連付けられています。ユーザーまたはアプリは、標準のカーソルに関連付けられている既定の画像をいつでも変更できます。Windows ストアアプリでは、PointerCursor 関数を使ってカーソル画像を指定します。

タッチパッドカーソルをカスタマイズする必要がある場合は、以下のガイドラインに従ってください。

クリック可能な要素には常に矢印カーソル () を使います。リンクなどのインタラクティブな要素には手の形のポインティングカーソル () を使いません。代わりに、前に説明したホバー効果を使います。
選択可能なテキストにはテキストカーソル () を使います。
ドラッグやトリミングなど、移動がメインの操作である場合は、移動カーソル () を使います。スタート画面のタイルなどでのナビゲーションがメインの操作である場合は、要素に対して移動カーソルを使いません。
サイズ変更ができるオブジェクトに対しては、横、縦、対角線のサイズ変更カーソル (、、、) を使います。
地図など、固定キャンバス内のコンテンツのパンを行うときは、手で摑む形のカーソル (、) を使います。