ユーザー操作のカスタマイズの概要 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
.jpg "Windows ストア アプリによりサポートされる入力デバイス")
直感的で魅力的であると同時に、効率的かつすべての入力デバイスで一貫したカスタム ユーザー操作を作ることができます。 ここで説明するガイドライン、ベスト プラクティス、例に従って、Windows ストア アプリにこのようなユーザー エクスペリエンスを定義しましょう。
注 可能であれば、プラットフォーム コントロール ライブラリ (HTML と XAML) を使うことをお勧めします。これらのライブラリのコントロールでは、標準的な対話式操作、アニメーション化された物理的効果、視覚的フィードバック、アクセシビリティなど、Windows 8.1 の完全なユーザー操作エクスペリエンスが提供されます。操作のサポートをカスタマイズする必要がない場合は、これらの組み込みコントロールを使います。
Windows ストア アプリはタッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど、さまざまなソースからの入力を処理できます。さらに、タッチ キーボード、マウス ホイール、ペンの消しゴムなど、さまざまな入力デバイス モードからの入力も処理できます。他のプラットフォームでは主にタッチ入力が重視されますが、必要な種類の Windows ストア アプリを制約なく作ることができます。たとえば、PC、ノート PC、タブレット、世の中にある (まだ登場していないものも含めて) ほぼあらゆる種類のフォーム ファクターで使うことができる消費アプリ、生産性アプリ、革新的なハイブリッド アプリなどです。
プラットフォーム コントロールとその操作の動作について詳しく知りたい場合は、「ユーザー操作の概要 (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 カラーと回転角度を指定します (これは、対応する赤、緑、青のレベルに変換されます)。
このサンプルでは、次の機能を説明しています。
- カスタム コントロール
- ユーザー操作の動作の基本的なカスタマイズ サポート (HTML と XAML)
- カスタマイズされたジェスチャの検出、認識、処理
このサンプルの動作とサンプルに実装されているユーザー操作機能を把握できるように、ワイヤフレーム図を次に示します。
.png "サンプル アプリのワイヤーフレーム") |
| サンプルには、3 つのページが含まれています (左から右)。ホーム ページ、DOM ベースの回転をサポートするカスタム コントロールが含まれる 2 番目のページ、Windows.UI.Input GestureRecognizer API を通じた追加機能が実装されたカスタム コントロールが含まれている 3 番目のページです。 |
今のところは、Windows ストア アプリにおけるユーザー操作のベスト プラクティスに従った基本的なアプリを作るのに役立つ、タスクの緩やかなアウトラインがあります。各タスクは、Windows ストア アプリのデベロッパー センターの対応する情報にリンクしています。
Windows ストア アプリ開発が初めての場合や、ユーザー操作、使いやすさ、アクセシビリティにあまり詳しくない場合は、各手順を復習することをお勧めします。ユーザー操作開発の関連する側面が同じ場所にまとめられています。
アプリの計画
アプリの設計と開発を始める前に、アプリを計画します。時間を取って、どのようなユーザーを対象とするかを考え、アプリでサポートする機能やアクティビティについて考えます。
Windows ストア アプリの UI は、主にタッチ操作を念頭に置いて設計します。タッチ入力は、通常はピクセル単位の精度を持つ他の種類の入力と比べて、本質的に正確ではありません (入力領域が必要)。タッチに最適化されたコントロールと、ポインター ベースのイベント処理を行う一連のプラットフォーム操作 API を組み合わせると、少ないコードを追加するだけで、デバイス間で同等の機能を実現できます。
.jpg "スタート アイコン") |
アプリに最適なナビゲーション パターンとそのコンテンツを選びます。詳しくは、「Windows ストア アプリのナビゲーション デザイン」をご覧ください。 このチュートリアルをサポートするユーザー操作サンプルでは、フラット ナビゲーション テンプレートを使って始めています。テンプレートをダウンロードして、アウトラインに従う際にいろいろと試してみるか、すぐにテンプレートを使ってアプリの設計と開発を開始します。 |
.jpg "ステップ アイコン") |
アプリ ウィンドウ、ポップアップ、ダイアログ、アプリ バーなど、UI 要素とコンテンツを設計してレイアウトします。 Windows 8.1 の UI 機能を活用し、直感的で他の Windows ストア アプリと一貫した UI を作ることができるように、ガイドライン、ベスト プラクティス、例を使っています。 |
|
ユーザー操作のプラットフォーム、入力ソース (タッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど)、モード (タッチ キーボード、マウス ホイール、ペンの消しゴムなど)、Windows ストア アプリでサポートされている操作について説明します。 |
|
一般的な対話的操作の比較と、それらがタッチ、マウス、キーボードのジェスチャにどのように対応しているかを示します。 |
入力デバイス
タッチ入力に最適化されていますが、プラットフォームではここに示されている他の入力デバイスが完全にサポートされます。
|
ポイントとクリックの正確さが求められるアプリには、マウス操作を使います。 |
|
キーボードは、特定の障碍のあるユーザーや、キーボードを使った方がアプリを効率よく操作できると考えるユーザーにとって欠かせません。 |
|
ペンやスタイラスはポインティング デバイスと描画デバイスの両方として使用できます。通常は、デジタル インク機能に関連付けられます。 |
|
タッチパッドは、マルチタッチ入力と、マウスのようなポインティング デバイスの精密入力を組み合わせたものです。この組み合わせにより、タッチパッドは Windows 8.1 のタッチに最適化された UI にも、生産性アプリとデスクトップ環境のより小さいターゲットにも適しています。 |
操作の設計
ユーザー操作に関する Windows UX ガイドに従うときは、創造性を大切にしてください。アプリでサポートする入力デバイスと、反応する方法を選びます。デバイス間のユーザー エクスペリエンスを強化すること、できるだけ幅広い機能と設定をサポートすること、Windows ストアでできるだけ多くの潜在顧客にアピールすることを心がけてください。そうすれば、アプリの使い勝手、移植性、アクセシビリティが最大限に高まります。
|
これらのユーザー操作ガイドラインが、どの入力モードでも一貫して魅力的でイマーシブな対話式操作エクスペリエンスを提供するのに役立ちます。
|
ユーザー操作の処理
ここでは、アプリでのユーザー操作を処理して反応するためのオプションについて考えます。さらに、ユーザー操作サンプルに含まれている UI と機能の詳細についてもいくつか説明します。
|
ポインター イベントを通じてユーザー操作をカスタマイズします。 |
|
ドキュメント オブジェクト モデル (DOM) を通じてユーザー操作をカスタマイズします。 |
|
GestureRecognizer を通じてユーザー操作をカスタマイズします。 |
|
アニメーションのプラットフォーム アニメーション ライブラリ スイート (ポインター イベントまたはスワイプ ジェスチャの場合) を使って Windows 8 の見た目や操作感を Windows ストア アプリに取り入れるか、カスケード スタイル シート レベル 3 (CSS3) の切り替え、アニメーション、変換を使ってアニメーションをカスタマイズします。 |
|
視覚障碍のあるまたは運動障碍のある多くのユーザーは、アプリの UI を移動したり、その機能にアクセスしたりする唯一の方法としてキーボードを使います。アプリに十分なキーボード操作機能が備わっていない場合、これらのユーザーはアプリをうまく使えなかったり、まったく使えない可能性があります。 |
|
ポインター イベントをマウス クリック イベントにフックして、タッチ入力をアクセシビリティ対応にします。 |
|
Windows 8 用 Windows ソフトウェア開発キット (Windows SDK)、Inspect、UI Accessibility Checker (AccChecker) を使うと、アプリのアクセシビリティを確認するのに役立ちます。 アクセシビリティを備えたアプリであることを Windows ストアで宣言するには、Accessible Rich Internet Applications (ARIA) Web 検証を有効にした AccChecker によって報告される優先度 1 のエラーのすべてに対処します。 注意: ナレーターでは、アプリのコンテンツを移動して読み上げるための一連のカスタム タッチ ジェスチャ (このトピックで説明します) がサポートされます。 |
まとめ
.jpg "ストアの要件のアイコン") |
Windows アプリ認定キットを使って、アプリの認定を受けます。 Windows アプリ認定キットを実行し、Windows ストア要件を満たすことができるようにします。アプリに主要な機能を追加した場合は、必ずこの作業を行ってください。 |
.jpg "ストップ アイコン") |
これで完了です。 ユーザー操作サンプルと同じような実装になっていることでしょう。 あとはアプリの成功を待つだけです。 |
その他の情報
ユーザーにどのようなエクスペリエンスを提供するか。
ユーザーによってできる操作、できない操作、好ましい操作が大きく異なることについて説明します。
さまざまなデバイス、入力方式、画面の向きを扱う方法について説明します。
ユーザー エクスペリエンスに関するガイドラインの完全な一覧を確認してください。
サンプル
DOM
Windows ストア アプリ API