クイック スタート: レイアウトとナビゲーションのためのハブ コントロールの使用
この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]
JavaScript を使って Hub コントロールを Windows ストア アプリに追加する方法について説明します。
アプリに最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。
また、「アプリの機能の概要」シリーズの「フラット ナビゲーション パターン」と「階層型のナビゲーション パターン」もご覧ください。
必要条件
手順
1. 空のアプリ テンプレートを使って新しいプロジェクトを作る
Microsoft Visual Studio Express 2013 for Windows を起動します。
[スタート ページ] タブで、[新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログ ボックスが表示されます。
[インストール済み] ウィンドウで、[テンプレート]、[JavaScript] の順に展開し、テンプレートの種類として [Windows ストア アプリ] を選びます。JavaScript で使うことができるプロジェクト テンプレートがダイアログの中央のウィンドウに表示されます。
中央のウィンドウで、[新しいアプリ] プロジェクト テンプレートを選びます。
[名前] ボックスに「Hub demo」と入力します。
[OK] をクリックしてプロジェクトを作ります。
2. プロジェクトにハブの定義を追加する
Hub コントロールは、HTML ページで宣言を使って定義するか、ページと共に読み込まれる JavaScript を使って実行時に定義します。この例では、HTML マークアップ内で宣言を使ってハブを作ります。
default.html を開き、次の HTML を body 要素に挿入します。ハブは body 要素の直接の子にする必要があります。ユーザーがアプリをサイズ変更したときに最適なレイアウトになるように、ドキュメント オブジェクト モデル (DOM) 内の状況依存のコマンドの前にグローバル コマンドを配置することをお勧めします。
この例では、3 つの HubSection オブジェクトを含む宣言を使ってハブを追加します。2 番目の HubSection が Hub に最初に表示されるセクションです。Hub コントロールと子の HubSection コントロールには、既定のスタイルを使うか、独自のカスケード スタイル シート (CSS) を記述します。
<div data-win-control="WinJS.UI.Hub" id="hub"
data-win-options="{
sectionOnScreen : '1',
}">
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Ancient Greek authors',
isHeaderStatic: true
}">
My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
<ul>
<li>Homer</li>
<li>Herodotus</li>
<li>Thucydides</li>
<li>Plato</li>
</ul>
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Latin authors'
}">
<div>
My favorite authors of works in Classical Latin:
<ul>
<li>Marcus Tullius Cicero</li>
<li>Caius Julius Caesar</li>
<li>Publius Virgilius Maro (Virgil)</li>
<li>Titus Livius Patavinus (Livy)</li>
</ul>
</div>
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'English authors',
isHeaderStatic: false
}">
My favorite authors of works in Middle and Early Modern English:
<ul>
<li>Geoffrey Chaucer</li>
<li>William Shakespeare</li>
<li>Christopher Marlowe</li>
</ul>
</div>
</div>
3. ハブ イベントを処理するコードを追加する
この例で HubSection オブジェクトのうちの 2 つには動的ヘッダーがあります。クリックすると、既定で Hub.onheaderinvoked イベントが発生します。動的または静的なヘッダーを設定するには、HubSection.isHeaderStatic プロパティを使います。既定では、このプロパティは false に設定されています。
Hub.onheaderinvoked イベント ハンドラーでは、イベント引数から HubSection オブジェクトを抽出したり、呼び出された HubSection オブジェクトのインデックスを抽出したりできます (インデックスはゼロ起点です)。
次の例では、Hub.onheaderinvoked イベントにハンドラーを追加します。ハンドラーは、呼び出された HubSection のインデックスを取得し、Hub.sectionOnScreen の値を設定します。
ソリューション エクスプローラーで、js フォルダーの default.js を開きます。
default.js ファイルで、既存のコードを次のコードに置き換えます。
(function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var hub; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // Add your initialization code here. } else { // Restore app state here. } args.setPromise(WinJS.UI.processAll()); } // Get the hub control from the HTML page and // add a handler to the headerInvoked event. hub = WinJS.Utilities.query("#hub")[0]; hub.winControl.onheaderinvoked = onHeaderInvoked; }; app.oncheckpoint = function (args) { // Add app suspension code here. }; // When a HubSection header is clicked, call this code to // make the section completely visible within the hub. function onHeaderInvoked(args) { hub.winControl.sectionOnScreen = args.detail.index; } app.start(); })();環境変数を Simulator に設定し、F5 キーを押してアプリを実行します。
シミュレータ ウィンドウの解像度を変更して、ハブ ページを左側にパンすると最後のハブ セクションの一部が画面から隠れるようにします。
最後の一部しか見えないハブ セクションの見出しをクリックすると、ハブ ページにパンされて、そのハブ セクションがすべて見えるようになります。
4. ハブ アプリ内でのナビゲーション
ハブ アプリは、いわゆる階層型ナビゲーション パターンに従っています。Windows ストア アプリのナビゲーションについて詳しくは、「ナビゲーション パターン」をご覧ください。
大量のコンテンツ コレクションや多数のコンテンツ セクションを含むアプリの場合、一般に、ユーザーがその場所に進んだのと同じ方法ですばやく元の場所に戻る方法を用意します。ハブ アプリのページとセクション見出しは、BackButton コントロールをホストできます。各ページがホストする戻るボタンは、通常は表示されておらず、別のページからそのページに移動すると表示されます。BackButton コントロールは、ページの HTML で宣言を使って作成することも、JavaScript を使って実行時に作成することもできます。
BackButton コントロールに必要な設定作業は多くありません。実際、戻るボタンのナビゲーション機能に関連するコードのほとんどは JavaScript 用 Windows ライブラリ (WinJS) プラットフォームに組み込まれています。必要なのは HTML マークアップで次のようにコントロールを宣言することだけです。
<!DOCTYPE html>
<html>
<head>
<title>home</title>
</head>
<body>
<header role="banner">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea">Home</h1>
</header>
</body>
</html>
スタイルが指定されていない場合、BackButton コントロールはページ タイトルの上に別のブロックとして表示されます。戻るボタンがタイトルと同じ行に表示される Windows スタイルを実現するには、プロジェクトにいくつかのカスタム CSS を追加する必要があります。具体的には、親要素 (<section> タグ) 内に 2 つの要素を並べて配置するグリッドを作成する必要があります。
default.css (css フォルダー内) で、次の CSS コードを追加してページの BackButton コントロールとタイトルのレイアウトを調整します。
#contenthost {
height: 100%;
width: 100%;
}
header[role=banner] {
display: -ms-grid;
-ms-grid-columns: 37px 83px 1fr;
-ms-grid-rows: 1fr;
}
header[role=banner] button {
-ms-grid-column: 2;
margin-top: 57px;
}
header[role=banner] h1 {
-ms-grid-column: 3;
margin-top: 37px;
}
要約
このクイック スタートでは、3 つの HubSection オブジェクトを含む 1 つの Hub コントロールを追加しました。また、単純なハンドラー関数を Hub.onheaderinvoked イベントに追加しました。
また、アプリの各ページに BackButton コントロールを追加しました。
関連トピック
開発者向け
初めてのアプリ - パート 3: PageControl オブジェクトとナビゲーション
クイック スタート: ナビゲーション バー (NavBar) の追加
HTML AppBar コントロールのサンプルに関するページ
HTML NavBar コントロールのサンプルに関するページ
デザイナー向け