ユーザー操作の概要 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
.jpg "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 カラーと回転角度を指定します (これは、対応する赤、緑、青のレベルに変換されます)。
このサンプルでは、次の機能を説明しています。
- フォーム トラバーサル
- 埋め込みのパン/スクロール動作
- タッチ キーボードの動作
- プラットフォーム コントロールと組み込みのユーザー操作サポート
このサンプルの動作とサンプルに実装されているユーザー操作機能を把握できるように、ワイヤフレーム図を次に示します。
.png "サンプル アプリのワイヤーフレーム") |
| サンプルには、2 つのページがあります (上から下)。ホーム ページと、各種プラットフォーム コントロールおよび色ミキサーを備えたフォームが含まれる 2 番目のページです。 |
今のところは、Windows ストア アプリにおけるユーザー操作のベスト プラクティスに従った基本的なアプリを作るのに役立つ、タスクの緩やかなアウトラインがあります。各タスクは、Windows ストア アプリのデベロッパー センターの対応する情報にリンクしています。
Windows ストア アプリ開発が初めての場合や、ユーザー操作、使いやすさ、アクセシビリティにあまり詳しくない場合は、各手順を復習することをお勧めします。ユーザー操作開発の関連する側面が同じ場所にまとめられています。
アプリの計画
アプリの設計と開発を始める前に、アプリを計画します。時間を取って、どのようなユーザーを対象とするかを考え、アプリでサポートする機能やアクティビティについて考えます。
Windows 8.1 アプリの UI は、主にタッチ操作を念頭に置いて設計することをお勧めします。タッチ入力は、通常はピクセル単位の精度を持つ他の種類の入力と比べて、本質的に正確ではありません (入力領域が必要)。タッチに最適化されたコントロールと、ポインター ベースのイベント処理を行う一連のプラットフォーム操作 API を組み合わせると、最小限のコードを追加するだけで、デバイス間で同等の機能を実現できます。
.jpg "スタート アイコン") |
アプリに最適なナビゲーション パターンとそのコンテンツを選びます。詳しくは、「ナビゲーション パターン」をご覧ください。 このチュートリアルをサポートするユーザー操作サンプルでは、基本的なフラット ナビゲーション テンプレートを使って始めています。テンプレートをダウンロードして、アウトラインに従う際にいろいろと試してみるか、すぐにテンプレートを使ってアプリの設計と開発を開始します。 |
.jpg "ステップ アイコン") |
アプリ ウィンドウ、ポップアップ、ダイアログ、アプリ バーなど、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 を移動したり、その機能にアクセスしたりする唯一の方法としてキーボードを使います。アプリに十分なキーボード操作機能が備わっていない場合、これらのユーザーはアプリをうまく使えなかったり、まったく使えないこともあります。 |
まとめ
.jpg "ストアの要件のアイコン") |
Windows アプリ認定キットを使って、アプリの認定を受けます。 Windows アプリ認定キットを実行し、Windows ストア要件を満たすことができるようにします。アプリに主要な機能を追加した場合は、必ずこの作業を行ってください。 |
.jpg "ストップ アイコン") |
これで完了です。 ユーザー操作サンプルと同じような実装になっていることでしょう。 あとはアプリの成功を待つだけです。 |
その他の情報
ユーザーにどのようなエクスペリエンスを提供するかをご覧ください。
ユーザーによってできる操作、できない操作、好ましい操作が大きく異なることについて説明します。
さまざまなデバイス、入力方式、画面の向きを扱う方法について説明します。
ユーザー エクスペリエンスに関するガイドラインの完全な一覧を確認してください。