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

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

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

Windows ストアアプリによりサポートされる入力デバイス

Windows ストアアプリプラットフォームコントロールに組み込まれた操作の動作を使って、すべての入力デバイスで一貫性を保ちながら、効率的かつ直感的で魅力的なユーザーエクスペリエンスを生み出します。ここで説明するガイドライン、ベストプラクティス、例に従って、Windows ストアアプリにこのようなユーザーエクスペリエンスを定義しましょう。

プラットフォームコントロールは、タッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど、さまざまなソースからの入力を処理し、反応することができます。さらに、タッチキーボード、マウスホイール、ペンの消しゴムなど、さまざまな入力デバイスモードからの入力も処理できます。

他のオペレーティングシステムでは主にタッチ入力が重視されますが、Windows では入力デバイスに関係なく必要な種類のアプリを作ることができます。たとえば、PC、ノート PC、タブレット、世の中にある (まだ登場していないものも含めて) ほぼあらゆる種類のフォームファクターで使うことができる消費アプリ、生産性アプリ、革新的なハイブリッドアプリなどです。

プラットフォームコントロールを使うと、幅広い機能と設定をサポートすること、アプリをできるだけ使いやすく、持ち運びしやすく、アクセスしやすくすること、Windows ストアでできるだけ多くの潜在顧客にアピールすることができます。

カスタム操作の動作について詳しく知りたい場合は、「ユーザー操作のカスタマイズの概要 (HTML)」をご覧ください。

前提条件

ここのガイドライン、タスク、サンプルコードは、JavaScript を使った Windows ストアアプリの開発に固有のものです。C++、C#、Visual Basic バージョンを使った Windows ストアアプリの場合は、「ユーザー操作の概要 (XAML)」をご覧ください。

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

JavaScript を使った Windows ストアアプリの開発

スタート画面から UI レイアウトとコントロールまで、JavaScript を使った Windows ストアアプリについてあらゆることを確かめます。
JavaScript を使った初めての Windows ストアアプリの作成

JavaScript で、HTML5 とカスケードスタイルシート (CSS) を使って基本的な Windows ストアアプリを作ります。

ユーザー操作のサンプル

以下で参照するトピックに掲載されているサンプルやコードスニペットに加えて、ユーザー操作のサンプルを使います。このサンプルは、Windows ストアアプリでさまざまな操作機能や概念を使用または調整する方法を示しています。サンプルには、パンとスクロール、フォームレイアウト、タッチキーボードの動作、UI のアクセシビリティ、カスタマイズされた操作に関する原則、推奨事項、実装の詳細が含まれています。ガイダンスがどのように実践されているかを確かめてください。

サンプルの簡単な説明

サンプルでは、色ミキサーを作ります。フォーム経由で直接入力を取得する正方形オブジェクトの形をしており、このデータを使って RGB カラーと回転角度を指定します (これは、対応する赤、緑、青のレベルに変換されます)。

このサンプルでは、次の機能を説明しています。

フォームトラバーサル
埋め込みのパン/スクロール動作
タッチキーボードの動作
プラットフォームコントロールと組み込みのユーザー操作サポート

このサンプルの動作とサンプルに実装されているユーザー操作機能を把握できるように、ワイヤフレーム図を次に示します。

サンプルには、2 つのページがあります (上から下)。ホームページと、各種プラットフォームコントロールおよび色ミキサーを備えたフォームが含まれる 2 番目のページです。

今のところは、Windows ストアアプリにおけるユーザー操作のベストプラクティスに従った基本的なアプリを作るのに役立つ、タスクの緩やかなアウトラインがあります。各タスクは、Windows ストアアプリのデベロッパーセンターの対応する情報にリンクしています。

Windows ストアアプリ開発が初めての場合や、ユーザー操作、使いやすさ、アクセシビリティにあまり詳しくない場合は、各手順を復習することをお勧めします。ユーザー操作開発の関連する側面が同じ場所にまとめられています。

アプリの計画

アプリの設計と開発を始める前に、アプリを計画します。時間を取って、どのようなユーザーを対象とするかを考え、アプリでサポートする機能やアクティビティについて考えます。

Windows 8.1 アプリの UI は、主にタッチ操作を念頭に置いて設計することをお勧めします。タッチ入力は、通常はピクセル単位の精度を持つ他の種類の入力と比べて、本質的に正確ではありません (入力領域が必要)。タッチに最適化されたコントロールと、ポインターベースのイベント処理を行う一連のプラットフォーム操作 API を組み合わせると、最小限のコードを追加するだけで、デバイス間で同等の機能を実現できます。

	アプリに最適なナビゲーションパターンとそのコンテンツを選びます。詳しくは、「ナビゲーションパターン」をご覧ください。このチュートリアルをサポートするユーザー操作サンプルでは、基本的なフラットナビゲーションテンプレートを使って始めています。テンプレートをダウンロードして、アウトラインに従う際にいろいろと試してみるか、すぐにテンプレートを使ってアプリの設計と開発を開始します。
	Windows ストアアプリ UI の概要 (HTML) アプリウィンドウ、ポップアップ、ダイアログ、アプリバーなど、UI 要素とコンテンツを設計してレイアウトします。 Windows 8.1 の UI 機能を活用し、直感的で他の Windows ストアアプリと一貫した UI を作ることができるように、ガイドライン、ベストプラクティス、例を使っています。
	ユーザー操作への応答ユーザー操作のプラットフォーム、入力ソース (タッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど)、モード (タッチキーボード、マウスホイール、ペンの消しゴムなど)、Windows ストアアプリと Windows 8 でサポートされている操作について説明します。
	ユーザーが入力デバイスを操作する方法一般的な対話的操作の比較と、それらがタッチ、マウス、キーボードのジェスチャにどのように対応しているかを示します。

入力デバイス

タッチ入力に最適化されていますが、プラットフォームではここに示されている他の入力デバイスが完全にサポートされます。

	マウス操作への反応マウス操作は、正確なポイントとクリックが求められるアプリケーションに最適です。
	キーボード操作への反応キーボードは、特定の障碍のあるユーザーや、キーボードを使った方がアプリを効率よく操作できると考えるユーザーにとって欠かせません。
	ペン操作とスタイラス操作への反応ペンやスタイラスはポインティングデバイスと描画デバイスの両方として使用できます。通常は、デジタルインク機能に関連付けられます。
	タッチパッド操作への反応タッチパッドは、マルチタッチ入力と、マウスのようなポインティングデバイスの精密入力を組み合わせたものです。この組み合わせにより、タッチパッドは Windows 8.1 のタッチに最適化された UI にも、生産性アプリとデスクトップ環境のより小さいターゲットにも適しています。

操作の設計

ここでは、ユーザー操作サンプルに含まれている UI と機能の詳細をいくつか確かめます。

これらの詳細の中には一部のアプリに適用されないものがあります。必要に応じて選んでください。

	フォームレイアウトのガイドライン優れた操作エクスペリエンスを提供し、最小限のスクロールで済むフォームを設計します。ユーザーがどのようにフォームに入力するか、どこでスクロールが必要になるか、タッチキーボードとインラインエラー通知の外観をどのように処理するかを考えます。
	テキスト入力のガイドライン適切なコントロールを選びます。単一行のテキスト入力コントロールや複数行のテキスト入力コントロールをいつ使うべきかを考えます (母親から決して教えられなかった注意事項をすべて守ってください)。
	タッチキーボードと手書きパネルのガイドラインハードウェアキーボードなどのキーボードデバイスを持たないフォームファクターのテキスト入力をサポートします。タッチキーボードは、編集できる入力フィールドをユーザーがタップすると表示され、入力フィールドからフォーカスが移動すると消えます。
	パンのガイドラインコンピューターのフォルダー構造、ドキュメントライブラリ、フォトアルバムなどの単一のビュー内でユーザーが移動する場合に、パンとスクロールがどのように役立つかを考えます。さらに、ビューポート内に収まらないコンテンツを、ユーザーがどのように横または縦方向に移動するかを調べます。
	アプリのアクセシビリティのテスト Windows 8 用 Windows ソフトウェア開発キット (Windows SDK)、Inspect、UI Accessibility Checker (AccChecker) を使うと、アプリのアクセシビリティを確認するのに役立ちます。アクセシビリティを備えたアプリであることを Windows ストアで宣言するには、Accessible Rich Internet Applications (ARIA) Web 検証を有効にした AccChecker によって報告される優先度 1 のエラーのすべてに対処する必要があります。注意: ナレーターでは、アプリのコンテンツを移動して読み上げるための一連のカスタムタッチジェスチャ (このトピックで説明します) がサポートされます。

ユーザー操作の処理

ここでは、アプリでのユーザー操作を処理して反応するために使うことができるオプションについて確かめ、ユーザー操作サンプルに含まれている UI と機能の詳細をいくつか説明します。

	クイックスタート: HTML コントロールの追加とイベントの処理ボタン、チェックボックス、ドロップダウンリストなどのコントロールはほとんどのアプリに必要です。このサンプルには、静的な色ミキサーでプロパティを設定する各種コントロールが存在するフォームが含まれています。
	テキストの表示と編集テキスト入力コントロールを Windows ストアアプリに追加します。
	タッチキーボードタッチキーボードの起動と終了を行います。
	キーボードアクセシビリティの実装視覚障碍のあるまたは運動障碍のある多くのユーザーは、アプリの UI を移動したり、その機能にアクセスしたりする唯一の方法としてキーボードを使います。アプリに十分なキーボード操作機能が備わっていない場合、これらのユーザーはアプリをうまく使えなかったり、まったく使えないこともあります。

まとめ

Windows アプリ認定キットを使って、アプリの認定を受けます。

Windows アプリ認定キットを実行し、Windows ストア要件を満たすことができるようにします。アプリに主要な機能を追加した場合は、必ずこの作業を行ってください。

これで完了です。ユーザー操作サンプルと同じような実装になっていることでしょう。

あとはアプリの成功を待つだけです。

その他の情報

Windows ストアアプリの計画

ユーザーにどのようなエクスペリエンスを提供するかをご覧ください。

アクセシビリティのための設計

ユーザーによってできる操作、できない操作、好ましい操作が大きく異なることについて説明します。

さまざまなフォームファクター向けの設計

さまざまなデバイス、入力方式、画面の向きを扱う方法について説明します。

UX ガイドラインの索引

ユーザーエクスペリエンスに関するガイドラインの完全な一覧を確認してください。

	アプリに最適なナビゲーションパターンとそのコンテンツを選びます。詳しくは、「ナビゲーションパターン」をご覧ください。このチュートリアルをサポートするユーザー操作サンプルでは、基本的なフラットナビゲーションテンプレートを使って始めています。テンプレートをダウンロードして、アウトラインに従う際にいろいろと試してみるか、すぐにテンプレートを使ってアプリの設計と開発を開始します。
	Windows ストアアプリ UI の概要 (HTML) アプリウィンドウ、ポップアップ、ダイアログ、アプリバーなど、UI 要素とコンテンツを設計してレイアウトします。 Windows 8.1 の UI 機能を活用し、直感的で他の Windows ストアアプリと一貫した UI を作ることができるように、ガイドライン、ベストプラクティス、例を使っています。
	ユーザー操作への応答ユーザー操作のプラットフォーム、入力ソース (タッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど)、モード (タッチキーボード、マウスホイール、ペンの消しゴムなど)、Windows ストアアプリと Windows 8 でサポートされている操作について説明します。
	ユーザーが入力デバイスを操作する方法一般的な対話的操作の比較と、それらがタッチ、マウス、キーボードのジェスチャにどのように対応しているかを示します。

	マウス操作への反応マウス操作は、正確なポイントとクリックが求められるアプリケーションに最適です。
	キーボード操作への反応キーボードは、特定の障碍のあるユーザーや、キーボードを使った方がアプリを効率よく操作できると考えるユーザーにとって欠かせません。
	ペン操作とスタイラス操作への反応ペンやスタイラスはポインティングデバイスと描画デバイスの両方として使用できます。通常は、デジタルインク機能に関連付けられます。
	タッチパッド操作への反応タッチパッドは、マルチタッチ入力と、マウスのようなポインティングデバイスの精密入力を組み合わせたものです。この組み合わせにより、タッチパッドは Windows 8.1 のタッチに最適化された UI にも、生産性アプリとデスクトップ環境のより小さいターゲットにも適しています。

	フォームレイアウトのガイドライン優れた操作エクスペリエンスを提供し、最小限のスクロールで済むフォームを設計します。ユーザーがどのようにフォームに入力するか、どこでスクロールが必要になるか、タッチキーボードとインラインエラー通知の外観をどのように処理するかを考えます。
	テキスト入力のガイドライン適切なコントロールを選びます。単一行のテキスト入力コントロールや複数行のテキスト入力コントロールをいつ使うべきかを考えます (母親から決して教えられなかった注意事項をすべて守ってください)。
	タッチキーボードと手書きパネルのガイドラインハードウェアキーボードなどのキーボードデバイスを持たないフォームファクターのテキスト入力をサポートします。タッチキーボードは、編集できる入力フィールドをユーザーがタップすると表示され、入力フィールドからフォーカスが移動すると消えます。
	パンのガイドラインコンピューターのフォルダー構造、ドキュメントライブラリ、フォトアルバムなどの単一のビュー内でユーザーが移動する場合に、パンとスクロールがどのように役立つかを考えます。さらに、ビューポート内に収まらないコンテンツを、ユーザーがどのように横または縦方向に移動するかを調べます。
	アプリのアクセシビリティのテスト Windows 8 用 Windows ソフトウェア開発キット (Windows SDK)、Inspect、UI Accessibility Checker (AccChecker) を使うと、アプリのアクセシビリティを確認するのに役立ちます。アクセシビリティを備えたアプリであることを Windows ストアで宣言するには、Accessible Rich Internet Applications (ARIA) Web 検証を有効にした AccChecker によって報告される優先度 1 のエラーのすべてに対処する必要があります。注意: ナレーターでは、アプリのコンテンツを移動して読み上げるための一連のカスタムタッチジェスチャ (このトピックで説明します) がサポートされます。

	クイックスタート: HTML コントロールの追加とイベントの処理ボタン、チェックボックス、ドロップダウンリストなどのコントロールはほとんどのアプリに必要です。このサンプルには、静的な色ミキサーでプロパティを設定する各種コントロールが存在するフォームが含まれています。
	テキストの表示と編集テキスト入力コントロールを Windows ストアアプリに追加します。
	タッチキーボードタッチキーボードの起動と終了を行います。
	キーボードアクセシビリティの実装視覚障碍のあるまたは運動障碍のある多くのユーザーは、アプリの UI を移動したり、その機能にアクセスしたりする唯一の方法としてキーボードを使います。アプリに十分なキーボード操作機能が備わっていない場合、これらのユーザーはアプリをうまく使えなかったり、まったく使えないこともあります。