ユーザー操作への応答 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ユーザー操作のプラットフォーム、入力ソース (タッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど)、モード (タッチ キーボード、マウス ホイール、ペンの消しゴムなど)、Windows、Windows ストア アプリ、Windows Phone ストア アプリでサポートされているユーザー操作について理解しましょう。
Windows 8.1 の変更点: Windows 8.1 では、ポインター入力 API に対するさまざまな変更や改良が行われています。詳しくは、「Windows 8.1 の API の変更点」をご覧ください。
ここでは、各種の言語フレームワーク (JavaScript を使ったアプリ、C++、C#、または Visual Basic を使ったアプリ、DirectX と C++ を使ったアプリ) のビルトイン コントロールによる基本的な入力機能と対話式操作機能の無償提供、言語フレームワーク間での操作パターンの共有、ユーザー操作エクスペリエンスのカスタマイズ方法について説明します。
直感的、魅力的、イマーシブなユーザー エクスペリエンスを使って、Windows の対話式操作機能を活用してアプリを構築する方法を、ガイドライン、ベスト プラクティス、例を用いて説明します。
ヒント このトピックの情報は、JavaScript を使ったアプリにのみ適用されます。
C++、C#、Visual Basic を使ったアプリについては、「ユーザー操作への応答 (XAML)」をご覧ください。
DirectX と C++ を使ったアプリについては、「ユーザー操作への応答 (DirectX と C++)」をご覧ください。
前提条件: JavaScript を使ってアプリを開発するのが初めての場合は、以下のトピックに目を通して、ここで説明されているテクノロジをよく理解できるようにしてください。
JavaScript を使った初めての Windows ストア アプリの作成
JavaScript を使った Windows ストア アプリのためのロードマップ
イベントについては、「クイック スタート: HTML コントロールの追加とイベントの処理」と「DOM イベントを使ったイベントのキャプチャとイベントのバブル」をご覧ください。
アプリの機能の概要: この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。
ユーザー エクスペリエンス ガイドライン:
プラットフォーム コントロール ライブラリ (HTML と XAML) は、標準的な対話式操作、アニメーション化された物理的効果、視覚的フィードバックなど、Windows の完全なユーザー操作エクスペリエンスを提供しています。 操作のサポートをカスタマイズする必要がない場合は、これらのビルトイン コントロールを使います。
プラットフォーム コントロールでは十分に対応できない場合は、以下のユーザー操作ガイドラインに従うと、どの入力モードでも一貫性のある、魅力的でイマーシブな対話式操作エクスペリエンスを実現できます。これらのガイドラインは、主にタッチ入力を対象として説明していますが、タッチパッド、マウス、キーボード、スタイラスでの入力にも当てはまります。
- 一般的なユーザー操作のガイドライン
- クロススライドのガイドライン
- 光学式ズームとサイズ変更のガイドライン
- パンのガイドライン
- 回転のガイドライン
- セマンティック ズームのガイドライン
- テキストと画像の選択のガイドライン
- ターゲットの設定のガイドライン
- 視覚的なフィードバックのガイドライン
サンプル: アプリのサンプルで、この機能の動作を実際に確かめることができます。
HTML のスクロール、パン、ズームのサンプルに関するページ
入力: DOM ポインター イベント処理のサンプルに関するページ
入力: インスタンス化できるジェスチャのサンプルに関するページ
入力: GestureRecognizer によるジェスチャと操作
Windows 8 ユーザー操作プラットフォームの概要
アプリは、タッチ操作を念頭に置いて設計します。タッチ入力はますます多くのデバイスによってサポートされるようになってきており、タッチ操作は Windows の操作の基本部分です。
タッチは Windows と Windows Phone のユーザーの対話式操作の主要モードであるため、プラットフォームはタッチ入力に最適化されており、アプリの応答性、精度、使いやすさが向上しています。確実で信頼できる入力モード (マウス、ペン、キーボードなど) は完全にサポートされ、機能はタッチと一貫しているため、安心して使うことができます (「ジェスチャ、操作、対話的操作」をご覧ください)。これらの従来型入力モードの速度、精度、触覚的なフィードバックは、多くのユーザーにとって親しみやすく、魅力的です。こうした独自の直感的な対話式操作のエクスペリエンスは損なわれていません。
このユーザー操作エクスペリエンスの設計は創造的なものにしてください。多様な機能や基本設定をサポートし、できるだけ幅広い対象者の関心を引くことで、アプリのユーザーを増やすことができます。
ビルトイン コントロールから完全なカスタマイズまで、ユーザー操作のプラットフォームは機能のレイヤーに基づいており、柔軟性と性能を段階的に引き上げることができます。
ビルトイン コントロール
ビルトイン コントロールを利用して、Windows と Windows Phone のアプリの大半で機能する一般的なユーザー操作エクスペリエンスを実現します。
ビルトイン コントロールはタッチ操作に最適化して新規設計されており、すべての入力モードで一貫性があって魅力的な操作エクスペリエンスを実現しています。また、包括的なジェスチャのセット (長押し、タップ、スライド、スワイプ、ピンチ、拡大、回転) をサポートしています。これらを直接的な操作 (パン、ズーム、回転、ドラッグなど) や慣性動作と組み合わせると、ベスト プラクティスに従った、Windows プラットフォーム間で一貫した魅力的でイマーシブな操作エクスペリエンスを提供できます。
コントロール ライブラリについて詳しくは、「コントロールおよびコンテンツの追加」をご覧ください。
ビュー
アプリのビューのパン/スクロールとズームの設定を使って、ユーザー操作エクスペリエンスを調整します。アプリ ビューによって、ユーザーがアプリとそのコンテンツにアクセスして操作する方法が決まります。ビューは、慣性、コンテンツ境界の跳ね返り、スナップ位置などの動作も提供します。
パンとスクロールの設定により、ビューのコンテンツがビューポートに収まらない場合に、単一のビュー内でユーザーがどのように移動するかが決まります。単一のビューは、たとえば雑誌や本のページ、コンピューターのフォルダー構造、ドキュメントのライブラリ、フォト アルバムなどです。
ズームの設定は、光学式ズームと SemanticZoom コントロールの両方に適用されます。セマンティック ズームは、タッチに最適化された手法の 1 つであり、関連する大量のデータやコンテンツを 1 つのビュー内に表示してナビゲートします。この機能では、2 つの分類モード (ズーム レベル) が使われます。 これは、1 つのビュー内でのパンとスクロールに似ています。 パンとスクロールは、セマンティック ズームと組み合わせて使うことができます。
パン/スクロールとズームの動作を変更するには、アプリ ビューと以下のカスケード スタイル シート (CSS) プロパティ、ドキュメント オブジェクト モデル (DOM) 属性、DOM イベントを使います。こうすることで、ポインターとジェスチャ イベントを処理する場合よりもスムーズな操作エクスペリエンスを提供できます。
| API サーフェス | CSS プロパティ | DOM 属性 | DOM イベント |
|---|---|---|---|
| touch-action は、特定の領域をパンまたはズームで操作できるかどうかを指定します。 | |||
| パン/スクロール | |||
| ズーム | msContentZoomFactor | onmscontentzoom | |
| 両方 | onmsmanipulationstatechanged | ||
アプリ ビューについて詳しくは、「レイアウトとビューの定義」をご覧ください。
ズームについて詳しくは、「光学式ズームとサイズ変更のガイドライン」または「セマンティック ズームのガイドライン」をご覧ください。
パン/スクロールについて詳しくは、「パンのガイドライン」をご覧ください。
DOM ポインター イベントとジェスチャ イベント
ポインターは、統合イベント メカニズムを持つ一般的な入力の種類です。アクティブな入力ソース (タッチ、タッチパッド、マウス、またはペン) についての画面位置などの基本的な情報を公開します。 ジェスチャには、タップのような単純な静的対話式操作から、ズーム、パン、回転のような複雑な操作まであります。 詳しくは、「ジェスチャ、操作、対話的操作」をご覧ください。
注
静的ジェスチャ イベントは、対話式操作が完了した後に発生します。 操作ジェスチャ イベントは継続的な対話式操作を示します。操作ジェスチャ イベントはユーザーが要素にタッチしたときに発生し、ユーザーが指を離すか操作が取り消されるまで続きます。
ポインターとジェスチャのイベントにアクセスすると、Windows 8 タッチ操作の設計言語を次の用途で利用できます。
- ゲーム
- カスタム コントロールとフィードバックの視覚効果
- カスタム操作
次の DOM ジェスチャ イベントを通じて提供されるビルトイン ジェスチャ認識を活用してください。
| 種類 | DOM ジェスチャ イベント |
|---|---|
| 一般的なイベント | MSManipulationStateChanged |
| ポインター イベント | |
| 静的ジェスチャ イベント | |
| 操作ジェスチャ イベント |
ポインター イベントとジェスチャ イベントの処理について詳しくは、「クイック スタート: ポインター」と「クイック スタート: DOM ジェスチャおよび操作」をご覧ください。
ユーザー エクスペリエンスのカスタマイズ
Windows ランタイム API を使って、アプリの対話式操作のエクスペリエンスを細かくカスタマイズ、制御します。これらの API を使うと、ユーザー操作をカスタマイズし、追加の構成オプションとハードウェア機能 (右ボタン、ホイール ボタン、チルト ホイール、X ボタンを備えたマウス デバイスや、バレル ボタンと消しゴム ボタンを備えたペン デバイスなど) を処理することができます。
ほとんどの対話式操作の API は、Windows.UI.Core、Windows.UI.Input、Windows.UI.Input.Inking 型によって提供され、入力デバイスのデータは Windows.Devices.Input によって公開されます。
ジェスチャと操作の処理に役立つのは、GestureRecognizer、PointerPoint、PointerPointProperties クラスです。
ジェスチャや操作を新しく作ったり変更したりしてカスタマイズした操作エクスペリエンスを提供する前に、次の点を考慮してください。
- アプリで必要なエクスペリエンスを既存のジェスチャで実現できないか。既存のジェスチャをサポートしたり変換したりするようにアプリを変更するだけでよい場合は、ズームやパンを行うカスタム ジェスチャを作りません。
- カスタム ジェスチャによって、アプリ全体で不整合が発生する可能性はないか。
- ジェスチャが特定のハードウェア サポート (接触の数など) を必要とするか。
- 必要な操作エクスペリエンスを提供するコントロール (SemanticZoom など) があるか。コントロールがユーザー入力を処理できる場合、カスタム ジェスチャや操作は必要か。
- カスタム ジェスチャや操作は、スムーズで自然な操作エクスペリエンスを実現できるか。
- 操作エクスペリエンスが意図どおりに機能するか。操作が接触の数、速度、時間 (お勧めしません)、慣性などに依存する場合は、これらの制約や依存関係が一貫していてわかりやすいようにします。たとえば、ユーザーが "速い" と "遅い" をどの程度の速度だと考えるかが、アプリの機能やユーザーのエクスペリエンスに対する満足度に直接影響する場合があります。
- ジェスチャまたは操作が、ユーザーの身体能力によって影響を受けるか。アクセシビリティがあるか。
- アプリ バーのコマンドやその他の UI コマンドは十分か。
要するに、明確に定義されている要件があり、基本的なジェスチャではシナリオをサポートできない場合のみ、カスタム ジェスチャや操作を作成してください。
カスタムの対話式操作について詳しくは、「クイック スタート: 静的ジェスチャ」と「クイック スタート: 操作ジェスチャ」をご覧ください。
関連トピック
概念