言語: HTML | XAML

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

Applies to Windows only

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

概要

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

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

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

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

ここでは、タッチパッド操作をサポートするためのガイドラインを示します。

Windows 8.1 タッチパッド言語

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

用語説明

ホバーによる説明の表示

要素にホバーすると、詳しい情報や説明を伝える視覚効果 (ヒントなど) が表示されます。操作はコミットされません。ヒントについて詳しくは、「ヒントの追加」をご覧ください。

1 本指でのタップによるプライマリ操作

1 本指を使って要素をタップすると、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。

2 本指でのタップによる右クリック

2 本の指で同時にタップすると、グローバル コマンドが含まれているアプリ バーが表示されます。要素上でタップすると、その要素が選択され、状況依存のコマンドが含まれているアプリ バーが表示されます。

  選択またはアプリ バーのコマンドが適切な UI 動作ではない場合は、2 本指でのタップによりショートカット メニューが表示されます。ただし、すべてのコマンド動作にアプリ バーを使うことを強くお勧めします。

2 本指でのスライドによるパン

スライドは主にパン操作に使われますが、移動、描画、筆記などの操作に使うこともできます。

ピンチとストレッチによるズーム

ピンチ ジェスチャとストレッチ ジェスチャは、通常、サイズ変更とセマンティック ズームに使われます。

1 本指でのプレスとスライドによる移動

要素をドラッグします。

1 本指でのプレスとスライドによるテキストの選択

選択可能なテキスト内を押してスライドし、選択します。単語を選択するには、ダブルタップします。

左と右のクリック ゾーン

マウス デバイスの左ボタンと右ボタンの機能をエミュレートします。

システム コマンドのための端の操作 (システムに依存する)

画面の右端 (右から左のレイアウトでは左端) からスワイプすると、システム コマンドが含まれているチャームが表示されます。

左端 (右から左のレイアウトでは右端) からスワイプすると、実行中のアプリの一覧が表示されます。

 

ハードウェア

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

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

視覚的なフィードバック

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

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

カーソル

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

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

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

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

関連トピック

概念
ユーザー操作への応答

 

 

表示:
© 2015 Microsoft