階層型のナビゲーションの概要 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
Windows ストア アプリのコンテンツを、詳細レベルが異なる関連した別個のセクションやカテゴリに整理できる場合は、階層型のナビゲーション パターンを使います。 これは、一般的でなじみのあるパターンであり、推奨される順序で移動するリレーショナル情報アーキテクチャに適しています。
選ぶべきナビゲーション パターンは、アプリがサポートしているシナリオによって異なります。アプリにさまざまなエクスペリエンスが備わっていて、組織や構造を伴うコンテンツが用意されている場合は、階層型パターンが最適と思われます。ただし、アプリに多数の情報密度や階層構造がない場合は、「フラット ナビゲーションの概要」をご覧ください。このパターンでは、ユーザーが小さい関連ページ セット間をすばやく移動できます。
ここでは、JavaScript を使って、階層型ナビゲーション パターンを使い、基本的な Windows ストア認定要件をすべて満たす Windows ストア アプリを作る方法について概要を説明します。たとえば、次のようなものがあります。
- イメージ リソース: オペレーティング システム全体にアプリを表示する。
- アプリ バー: ナビゲーションとコマンド実行をサポートする。
- 設定: プライバシー、ヘルプ、その他のアプリ情報を提供する。
- データ ローミング: セッションとデバイスの間でアプリを同期する。
- グローバリゼーション: 世界中の国と地域のユーザーが利用できるようにする。
- アクセシビリティ: ユーザーが物理的な能力や入力デバイスに関係なくタスクを実行できるようにする。
基本的な階層構造に加えて、Windows ストア アプリの階層型ナビゲーション パターンのワイヤーフレームを次に示します。
.png "階層型ナビゲーション パターンの基本的な実装") |
|
.png "Windows ストア アプリのハブ ページ、セクション ページ、詳細ページ")
JavaScript 用 Windows ライブラリの Hub コントロールは、この種類のアプリ用に特別に設計されています。一般的な情報から具体的な情報まで、このコントロールはハブ、セクション、項目/詳細ページを使ってさまざまな情報を直感的で一貫性のある構造にまとめることができるようにします。
| ページ | 説明 |
|---|---|
ハブ |
ハブは、アプリの最初のページであり、アプリの全体をプレビューできる場所です。コンテンツのセクションが 1 つ以上表示され、それぞれそのセクションに関連する項目の小さいサンプルが表示されます。各種条件 (アプリやユーザー設定に応じて異なります) を適用して、表示されるセクションと項目を制御することができます。通常、項目ごとにプレビュー概要、またはコンテンツの要約が表示されます。 このページでは、ユーザーがセクションや項目詳細ページに移動できます。 多様なビジュアルによってハブを設計してユーザーの関心を集め、アプリのさまざまな領域に引き込むことをお勧めします。 |
セクション |
セクション ページはアプリの第 2 レベルであり、セクションに関連するプレビュー、概要、または項目の要約が表示されます。このページの項目は、シナリオとセクションに含まれるコンテンツが最適に表現されるような形で表示できます。 通常は、ハブ ページよりこのページに多くの項目を表示します。各項目は、詳細ページにリンクされます。 |
項目/詳細 |
詳細ページはアプリの第 3 レベルであり、ハブまたはセクション ページで選択された特定の項目のほとんど (すべてではありません) のコンテンツや機能が表示されます。フィード リーダーなどの一部のアプリでは、コンテンツが大きすぎてアプリに表示できないと判断された場合、ソースの記事とサイトにリンクされることがあります。 詳細ページには、多様な情報、画像やビデオなどの単一のオブジェクト、他のアプリ機能が含まれます。 |
通常はフラット ナビゲーション アプリで使われるナビゲーション バーは、階層型アプリのコンテンツを移動する際にも役立つことがあります。このバーは画面の上端に表示できる一時的な要素で、ユーザーが上端または下端をスワイプすると表示されます (マウスで右クリックする、Windows ロゴ キーを押しながら Z キーを押す、またはキーボードのメニュー キーを押す)。
ナビゲーション バーがなくてもユーザーがアプリ内を直感的に移動できるようなコンテンツ構造を持つアプリを作るようにしてください。できない場合は、グローバルなナビゲーション コントロールを提供する手段としてハブ ページのセクション ヘッダーの代わりにナビゲーション バーを使うことができます。ナビゲーション バーは、各ページと、アプリのすべてのレベルに表示される必要があります。
注 ユーザーが現在のページまで移動したのと逆の順序で移動できるようにしてください。WinJS には、この目的で BackButton と PageControl が用意されています。
正しいナビゲーション パターンと適切な UI レイアウトを使うと、必要ない永続的なコントロールをなくすことができるので、ユーザーはアプリ内の重要なコンテンツに集中できます。
階層型ナビゲーションのサンプル
基本的な階層型ナビゲーションのサンプルは、独自のコンテンツやエクスペリエンスを加える際の出発点となります。このサンプルでは、ここで説明する原則、推奨事項、実装の詳細がアプリ内で示されており、基本的な Windows ストア認定要件がすべて満たされています。下の図に示すように、このサンプルには、各種セクションがあるハブ ページ、1 つのデータ駆動型セクション ページ (セクション 3)、そのセクションの項目詳細ページが含まれています。必要に応じて、ページを追加してアプリを拡張します。 ガイダンスがどのように実践されているかを確かめてください。そうすると時間を節約できます。このサンプルをインスピレーションの基盤として使ってください。
.png "ハブ ページが表示されたサンプル アプリ")
.png "セクション ページが表示されたサンプル アプリ")
.png "項目ページが表示されたサンプル アプリ")
Windows ストアへの準拠
Windows ストアは、Windows ストア アプリをユーザーに配布し、それらのユーザーをできる限り多くの優れたアプリにつなげるための主要な手段です。ストアのアプリは、Windows ストアと Windows Phone ストアのポリシーに準拠している必要があります。
対応するサンプルには、ここで説明されている機能と、すべての Windows ストア アプリが認定を受けるための基本的な要件が実装されています。たとえば、次のとおりです。
- スプラッシュ画面とタイル画像
- タッチ入力、マウス入力、キーボード入力の完全なサポート
- さまざまなウィンドウ サイズ、デバイスの向け、ディスプレイ サイズのサポート
- ローミングとセッション状態
- グローバリゼーション、ローカライズ、アクセシビリティのための最適化
アプリを開発する際は、Windows ストアと Windows Phone ストアのポリシーを検討し、一般的な認定エラーを回避するようにしてください。
ナビゲーションの実装
.jpg "ステップ アイコン") |
階層型ナビゲーションのサンプルを開くか、Visual Studio のハブ アプリ プロジェクト テンプレートで作業を開始します。必要な場合は、次のテンプレートの概要を確認できます。
|
.jpg "ステップ アイコン") |
PageControl オブジェクトが単一ページ ナビゲーションをサポートする方法について詳しく説明しています。「Page コントロールの追加」では、実装できるさまざまな方法について説明されています。 サンプルで確認しましょう:PageControl は、\pages\home\home.js と \pages\page2\page2.js で使われる \js\navigator.js で定義されます。 |
UI とイメージの追加
アプリケーション マニフェストの [アプリケーション UI] タブで、アプリの画像リソース (スプラッシュ画面やタイル画像などのビジュアル アセット) を指定します。これを行うには、ソリューション エクスプローラーで package.appxmanifest を開きます。 「マニフェスト デザイナーの使用」をご覧ください。
注 コンパニオン アプリには、Windows ストア要件を満たすプレースホルダ―画像が含まれています。テンプレートには、デモンストレーション目的で、さまざまなコントラスト設定が可能なアクセシビリティをサポートする画像と、フランス語 (fr-FR) でのローカライズが追加されています。ほとんどの画像は複数の解像度で用意されています。
.jpg "ステップ アイコン") |
できる限り最良のエクスペリエンスを実現する画像を指定します。また、さまざまな画面解像度の拡大/縮小されたバージョンも含めます。 アプリには、ストアの認定に合格できる基本的な画像セットが必要です。
|
|
ファイル リソースに名前を付けてフォルダーに整理するには、この手順に従います。 |
|
アプリの画像リソースを作ってプロジェクトに追加し、アプリケーション マニフェストで見つけます。 |
|
ナビゲーション、コマンド、ツールをオンデマンドでユーザーに表示します。アプリ バーは、ユーザーのコンテキスト (通常は現在のページや現在の選択) に関連するコマンドを表示します。必要に応じてカスタマイズします。詳しい例については、HTML AppBar コントロールのサンプルに関するページをご覧ください。 |
|
ユーザーの現在のコンテキストに関連するすべての設定にアクセスできるようにします。必要に応じてカスタマイズします。アプリケーション設定のサンプルに関するページをご覧ください。コンパニオン アプリには、プライバシー ポリシーとヘルプ コンテンツの両方が含まれており、設定チャームからアクセスできます。 |
アプリケーション データのローミング
|
ランタイム状態、ユーザー設定、その他の設定などのアプリケーション データを管理します。このデータは、アプリの実行時に作成、読み取り、更新、削除が行われます。 |
|
アプリのデータと状態が複数のデバイス間で同期されるようにし、ユーザーが他のデバイスでセットアップ タスクや反復作業を行わなくてよいようにします。データが更新されると、Windows によってクラウドにレプリケートされ、アプリがインストールされている別のデバイスに同期されます。 |
グローバル化
グローバリゼーションとの一貫性を考慮し、スクリーン ショットでアプリをローカライズしたことを明示します 言語と市場は別のものであることにご注意ください。
|
さまざまなスケール ファクター、アクセシビリティ オプション、ユーザーとコンピューターに関するその他のコンテキストに対し、リソースを独立して保守、ローカライズ、およびカスタマイズできるように Windows ストア アプリを設計します。アプリ リソースとローカライズのサンプルに関するページをご覧ください。 |
|
アプリ マニフェストで説明されているアプリの表示名、説明、その他の識別機能をローカライズします。 |
|
他の言語、市場、カルチャ、地域に合わせてソフトウェアを適応させることができます。 |
アクセシビリティのサポート
アクセシビリティのシナリオを想定して具体的な設計とテストを行った場合に限り、アプリをアクセシビリティ対応として宣言してください。
|
Windows 8 用 Windows ソフトウェア開発キット (Windows SDK) に含まれている、アプリのアクセシビリティを確認するのに役立つアクセシビリティ テスト ツールを確かめます。 |
|
アプリがアクセシビリティ対応であることの Windows ストアでの宣言 アプリがアクセシビリティに対応していることをテストした場合は、[販売の詳しい情報] ページの [アクセシビリティ] チェック ボックスをオンにすることによってそれを示すことができます。 |
まとめ
.jpg "ストアの要件のアイコン") |
Windows アプリ認定キットを使って、アプリの認定を受けます。 Windows アプリ認定キットを実行し、Windows ストア要件を満たすことができるようにします。アプリに主要な機能を追加した場合は、必ずこの作業を行ってください。 |
.jpg "ストップ アイコン") |
開発タスクを完了したので、ストアにアプリを提出することができます。
|
その他の情報
ユーザーにどのようなエクスペリエンスを提供するかをご覧ください。
ユーザーによってできる操作、できない操作、好ましい操作が大きく異なることについて説明します。
さまざまなデバイス、入力方式、画面の向きを扱う方法について説明します。
ユーザー エクスペリエンスに関するガイドラインの完全な一覧を確認してください。