フラット ナビゲーションの概要 (HTML)

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

Windows ストア アプリのページ数が少なく、その情報が階層で編成されていない場合は、フラット ナビゲーション パターンを使います。言い換えると、ページ、タブ、モードが論理的なピアの場合です。

アプリでは、ユーザーが場所や理由ではなくアプリの重要な内容に集中できるようにする必要があります。アプリに階層と構造が必要な多数の情報密度、ページ、シナリオがない場合は、ユーザーがページ間をすばやく移動できるフラット構造を検討してください。ただし、アプリにさまざまなエクスペリエンスが備わっていて、推奨される順序で移動する必要がある組織や構造を伴うコンテンツが用意されている場合は、「階層型ナビゲーションの概要」をご覧ください。

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

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

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

 

これらの画像が示すように、このパターンにより定義されるフラット コンテンツ構造では、アプリ内の各ページに他のどのページからでもアクセスできる必要があります。ユーザーは、分岐せずに前のページにも次のページにもランダムに移動できます。

フラット ナビゲーション アプリでは、すばやく切り替えることができるようにナビゲーション アプリ バー (上のワイヤーフレームに表示) を使います。このバーは画面の上端に表示できる一時的な要素で、ユーザーが上端または下端をスワイプすると表示されます (マウスで右クリックする、Windows ロゴ キーを押しながら Z キーを押す、またはキーボードのメニュー キーを押す)。

電卓アプリにフラット ナビゲーション パターンがどのように実装されているかを次に示します。一時的な標準ナビゲーション バーではなく、永続的なナビゲーション バーが使われている点に注目してください。これは、Windows ストア アプリ プラットフォームがアプリ特有のシナリオにどのように適用できるかを示す例です。

標準電卓ページ	科学計算用電卓ページ	変換電卓ページ

 

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

フラット ナビゲーションのサンプル

基本的なフラット ナビゲーションのサンプルは、独自のコンテンツやエクスペリエンスを加える際の出発点となります。このサンプルでは、ここで説明する原則、推奨事項、実装の詳細がアプリ内で示されており、基本的な Windows ストア認定要件がすべて満たされています。下の図に示すように、このサンプルには、2 枚のページ (アプリを紹介するホーム ページと、コンテンツを配置できる 2 番目のページ) が含まれます。 ガイダンスがどのように実践されているかを確かめてください。そうすると時間を節約できます。このサンプルをインスピレーションの基盤として使ってください。

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