階層型のナビゲーションの概要 (HTML)

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

Windows ストア アプリのコンテンツを、詳細レベルが異なる関連した別個のセクションやカテゴリに整理できる場合は、階層型のナビゲーション パターンを使います。 これは、一般的でなじみのあるパターンであり、推奨される順序で移動するリレーショナル情報アーキテクチャに適しています。

選ぶべきナビゲーション パターンは、アプリがサポートしているシナリオによって異なります。アプリにさまざまなエクスペリエンスが備わっていて、組織や構造を伴うコンテンツが用意されている場合は、階層型パターンが最適と思われます。ただし、アプリに多数の情報密度や階層構造がない場合は、「フラット ナビゲーションの概要」をご覧ください。このパターンでは、ユーザーが小さい関連ページ セット間をすばやく移動できます。

ここでは、JavaScript を使って、階層型ナビゲーション パターンを使い、基本的な Windows ストア認定要件をすべて満たす Windows ストア アプリを作る方法について概要を説明します。たとえば、次のようなものがあります。

• イメージ リソース: オペレーティング システム全体にアプリを表示する。
• アプリ バー: ナビゲーションとコマンド実行をサポートする。
• 設定: プライバシー、ヘルプ、その他のアプリ情報を提供する。
• データ ローミング: セッションとデバイスの間でアプリを同期する。
• グローバリゼーション: 世界中の国と地域のユーザーが利用できるようにする。
• アクセシビリティ: ユーザーが物理的な能力や入力デバイスに関係なくタスクを実行できるようにする。

基本的な階層構造に加えて、Windows ストア アプリの階層型ナビゲーション パターンのワイヤーフレームを次に示します。

JavaScript 用 Windows ライブラリの Hub コントロールは、この種類のアプリ用に特別に設計されています。一般的な情報から具体的な情報まで、このコントロールはハブ、セクション、項目/詳細ページを使ってさまざまな情報を直感的で一貫性のある構造にまとめることができるようにします。

通常はフラット ナビゲーション アプリで使われるナビゲーション バーは、階層型アプリのコンテンツを移動する際にも役立つことがあります。このバーは画面の上端に表示できる一時的な要素で、ユーザーが上端または下端をスワイプすると表示されます (マウスで右クリックする、Windows ロゴ キーを押しながら Z キーを押す、またはキーボードのメニュー キーを押す)。

ナビゲーション バーがなくてもユーザーがアプリ内を直感的に移動できるようなコンテンツ構造を持つアプリを作るようにしてください。できない場合は、グローバルなナビゲーション コントロールを提供する手段としてハブ ページのセクション ヘッダーの代わりにナビゲーション バーを使うことができます。ナビゲーション バーは、各ページと、アプリのすべてのレベルに表示される必要があります。

注  ユーザーが現在のページまで移動したのと逆の順序で移動できるようにしてください。WinJS には、この目的で BackButton と PageControl が用意されています。

正しいナビゲーション パターンと適切な UI レイアウトを使うと、必要ない永続的なコントロールをなくすことができるので、ユーザーはアプリ内の重要なコンテンツに集中できます。

階層型ナビゲーションのサンプル

基本的な階層型ナビゲーションのサンプルは、独自のコンテンツやエクスペリエンスを加える際の出発点となります。このサンプルでは、ここで説明する原則、推奨事項、実装の詳細がアプリ内で示されており、基本的な Windows ストア認定要件がすべて満たされています。下の図に示すように、このサンプルには、各種セクションがあるハブ ページ、1 つのデータ駆動型セクション ページ (セクション 3)、そのセクションの項目詳細ページが含まれています。必要に応じて、ページを追加してアプリを拡張します。 ガイダンスがどのように実践されているかを確かめてください。そうすると時間を節約できます。このサンプルをインスピレーションの基盤として使ってください。

Windows ストアへの準拠

Windows ストアは、Windows ストア アプリをユーザーに配布し、それらのユーザーをできる限り多くの優れたアプリにつなげるための主要な手段です。ストアのアプリは、Windows ストアと Windows Phone ストアのポリシーに準拠している必要があります。

対応するサンプルには、ここで説明されている機能と、すべての Windows ストア アプリが認定を受けるための基本的な要件が実装されています。たとえば、次のとおりです。

• スプラッシュ画面とタイル画像
• タッチ入力、マウス入力、キーボード入力の完全なサポート
• さまざまなウィンドウ サイズ、デバイスの向け、ディスプレイ サイズのサポート
• ローミングとセッション状態
• グローバリゼーション、ローカライズ、アクセシビリティのための最適化

アプリを開発する際は、Windows ストアと Windows Phone ストアのポリシーを検討し、一般的な認定エラーを回避するようにしてください。

ナビゲーションの実装

	階層型ナビゲーションのサンプルを開くか、Visual Studio のハブ アプリ プロジェクト テンプレートで作業を開始します。必要な場合は、次のテンプレートの概要を確認できます。 Windows ランタイム アプリ用 JavaScript プロジェクト テンプレート: ナビゲーション モデル、データ モデル、ビュー状態の処理などに関する、実装の詳細がまとめられています。 Windows ストア アプリ用 JavaScript 項目テンプレート: よく使われるコードが含まれており、これで開発時間を短縮できます。
	単一ページ ナビゲーションの使用 PageControl オブジェクトが単一ページ ナビゲーションをサポートする方法について詳しく説明しています。「Page コントロールの追加」では、実装できるさまざまな方法について説明されています。 サンプルで確認しましょう:PageControl は、\pages\home\home.js と \pages\page2\page2.js で使われる \js\navigator.js で定義されます。

UI とイメージの追加

アプリケーション マニフェストの [アプリケーション UI] タブで、アプリの画像リソース (スプラッシュ画面やタイル画像などのビジュアル アセット) を指定します。これを行うには、ソリューション エクスプローラーで package.appxmanifest を開きます。 「マニフェスト デザイナーの使用」をご覧ください。

注  コンパニオン アプリには、Windows ストア要件を満たすプレースホルダ―画像が含まれています。テンプレートには、デモンストレーション目的で、さまざまなコントラスト設定が可能なアクセシビリティをサポートする画像と、フランス語 (fr-FR) でのローカライズが追加されています。ほとんどの画像は複数の解像度で用意されています。

	アプリを表す画像の選択 できる限り最良のエクスペリエンスを実現する画像を指定します。また、さまざまな画面解像度の拡大/縮小されたバージョンも含めます。 アプリには、ストアの認定に合格できる基本的な画像セットが必要です。 ストア ロゴ 検索結果のアプリの内容と、内容ページのアプリの説明に表示されます。 ロゴ スタート画面にあるアプリの正方形タイルに表示されます。「タイルとバッジの作成」と「アプリのタイルとバッジのサンプル」をご覧ください。 小さいロゴ 小さいロゴは、スタート画面で返された検索結果にアプリの表示名と共に表示されます。さらに、検索可能なアプリの一覧内と、[スタート] ページが縮小表示されるときにも使われます。 スプラッシュ画面 アプリが起動されると表示され、アプリが操作できるようになると消えます。 スプラッシュ画面は、画像と背景色で構成され、どちらもカスタマイズできます。「スプラッシュ画面の追加」と「スプラッシュ画面のサンプル」をご覧ください。
	ファイルまたは画像リソースの追加 ファイル リソースに名前を付けてフォルダーに整理するには、この手順に従います。
	さまざまな画面解像度に合わせた画像の最適化 アプリの画像リソースを作ってプロジェクトに追加し、アプリケーション マニフェストで見つけます。
	アプリ バーの追加 ナビゲーション、コマンド、ツールをオンデマンドでユーザーに表示します。アプリ バーは、ユーザーのコンテキスト (通常は現在のページや現在の選択) に関連するコマンドを表示します。必要に応じてカスタマイズします。詳しい例については、HTML AppBar コントロールのサンプルに関するページをご覧ください。
	アプリ設定の追加 ユーザーの現在のコンテキストに関連するすべての設定にアクセスできるようにします。必要に応じてカスタマイズします。アプリケーション設定のサンプルに関するページをご覧ください。コンパニオン アプリには、プライバシー ポリシーとヘルプ コンテンツの両方が含まれており、設定チャームからアクセスできます。

アプリケーション データのローミング

	アプリ データの管理 ランタイム状態、ユーザー設定、その他の設定などのアプリケーション データを管理します。このデータは、アプリの実行時に作成、読み取り、更新、削除が行われます。
	アプリケーション データのローミング アプリのデータと状態が複数のデバイス間で同期されるようにし、ユーザーが他のデバイスでセットアップ タスクや反復作業を行わなくてよいようにします。データが更新されると、Windows によってクラウドにレプリケートされ、アプリがインストールされている別のデバイスに同期されます。

グローバル化

グローバリゼーションとの一貫性を考慮し、スクリーン ショットでアプリをローカライズしたことを明示します 言語と市場は別のものであることにご注意ください。

	アプリ リソースとローカライズについて さまざまなスケール ファクター、アクセシビリティ オプション、ユーザーとコンピューターに関するその他のコンテキストに対し、リソースを独立して保守、ローカライズ、およびカスタマイズできるように Windows ストア アプリを設計します。アプリ リソースとローカライズのサンプルに関するページをご覧ください。
	パッケージ マニフェストのローカライズ アプリ マニフェストで説明されているアプリの表示名、説明、その他の識別機能をローカライズします。
	アプリのグローバル化 他の言語、市場、カルチャ、地域に合わせてソフトウェアを適応させることができます。

アクセシビリティのサポート

アクセシビリティのシナリオを想定して具体的な設計とテストを行った場合に限り、アプリをアクセシビリティ対応として宣言してください。

	アプリのアクセシビリティのテスト Windows 8 用 Windows ソフトウェア開発キット (Windows SDK) に含まれている、アプリのアクセシビリティを確認するのに役立つアクセシビリティ テスト ツールを確かめます。
	アプリがアクセシビリティ対応であることの Windows ストアでの宣言 アプリがアクセシビリティに対応していることをテストした場合は、[販売の詳しい情報] ページの [アクセシビリティ] チェック ボックスをオンにすることによってそれを示すことができます。

まとめ

	Windows アプリ認定キットを使って、アプリの認定を受けます。 Windows アプリ認定キットを実行し、Windows ストア要件を満たすことができるようにします。アプリに主要な機能を追加した場合は、必ずこの作業を行ってください。
	開発タスクを完了したので、ストアにアプリを提出することができます。 提出する前に、アプリの対象を適切なユーザーに設定します。 アプリの機能が明確に表されるように、アプリの説明を、できるだけ詳しく記載します。 配布プロセスを開始します。 Windows ストアから入手できるプロモーション ツールを使って、ユーザーがアプリを見つけられるようにします。 製品利用統計情報を使って、使用状況データを分析し、アプリの品質とパフォーマンスを高めます。

その他の情報

Windows ストア アプリの計画

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

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

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

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

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

UX ガイドラインの索引

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

サンプル

• HTML AppBar コントロールのサンプルに関するページ
• ナビゲーションとナビゲーション履歴のサンプルに関するページ
• アプリのタイルとバッジのサンプル
• スプラッシュ画面のサンプル
• アプリケーション設定のサンプルに関するページ
• アプリ リソースとローカライズのサンプルに関するページ