クイックスタート: ナビゲーションバー (NavBar) の追加

[アーティクル]
12/03/2015

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

JavaScript を使った Windows ストアアプリにナビゲーションバー ("ナビバー"または"トップアプリバー"とも呼ばれます) を追加する方法を説明します。 JavaScript 用 Windows ライブラリ (WinJS) には、単一ページナビゲーションアプリの作成をサポートするために、NavBar、NavBarCommand、NavBarContainer の各コントロールが用意されています。

注 NavBar、NavBarCommand、NavBarContainer の各コントロールは Windows 8.1 で追加されました。Windows 8 では、AppBar コントロールと placement プロパティを使ってナビゲーションバーを実現します。

Windows ストアアプリ用のほとんどの Microsoft Visual Studio 2013 テンプレートには、ナビゲーションフレームワークが実装されているため、開発者が実装する必要はありません。これらのテンプレートは、ページコントロール項目テンプレート (「Page コントロールの追加」参照) も含めて、逆方向のナビゲーションができる BackButton コントロールを含みます。

注 Windows ストアアプリは通常、2 つのナビゲーションパターン (階層システムとフラットシステム) のどちらかを使っています。フラットナビゲーションアプリでは BackButton オブジェクトを使わないことをお勧めします。詳しくは、「Windows ストアアプリのナビゲーションデザイン」をご覧ください。

ここで取り上げる例では、Microsoft Visual Studio の "空のアプリケーション" テンプレートを使います。既定のスタイルとマークアップを使うと、NavBar コントロールに表示するコマンドのスタイルが適切に設定されます。これはコマンドアイコンの画像スプライトとフォントグリフの両方も対象です。

アプリに最適なナビゲーションパターンの選択については、「ナビゲーションパターン」をご覧ください。

また、「アプリの機能の概要」シリーズの「フラットナビゲーションパターン」と「階層型のナビゲーションパターン」もご覧ください。

必要条件

手順

1. 空のアプリテンプレートを使って新しいプロジェクトを作る

Visual Studio 2013 を起動します。

注 Visual Studio を初めて起動したときに、開発者用ライセンスを取得するように求められます。
[ファイル]、[新しいプロジェクト] の順にクリックするか、[スタートページ] タブで [新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログボックスが表示されます。
[インストール済み] ウィンドウで、[テンプレート]、[JavaScript] の順に展開し、テンプレートの種類として [Windows ストアアプリ] を選びます。JavaScript で使うことができるプロジェクトテンプレートがダイアログボックスの中央のウィンドウに表示されます。
中央のウィンドウで、[空のアプリケーション] プロジェクトテンプレートを選びます。
[名前] ボックスに、プロジェクトの名前を入力します。このトピックの例では、「Nav bar demo」を使っています。
[OK] をクリックしてプロジェクトを作ります。

2. プロジェクトにナビゲーションバーの定義を追加する

ナビゲーションバーは、HTML ページで宣言を使って定義することも、ページと共に読み込まれる JavaScript ファイルで実行時に定義することもできます。この例では、HTML マークアップ内で宣言を使ってナビゲーションバーを作ります。

default.html を開き、次の HTML を body 要素に挿入します。ナビゲーションバーは body 要素の直接の子にする必要があります。

ここでは、NavBarContainer コントロールと 2 つの NavBarCommand コントロールを含む NavBar コントロールを宣言します。

注 NavBarCommand コントロールを NavBar の直接の子要素として追加することは有効ですが、お勧めしません。ボタンのレイアウトとキーボードのアクセシビリティの両方に悪影響を与えます。


<div id="navBar" data-win-control="WinJS.UI.NavBar">
  <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Home',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. ナビゲーションハンドラーコードを追加する

マークアップ内に宣言された NavBarCommand オブジェクトは内部でナビゲーションイベント (Navigation.onnavigating と Navigation.onnavigated) を生成するため、ハンドラーコードを NavBarCommand オブジェクトに追加する必要はありません。代わりに、ハンドラーコードを、default.html ファイルに関連付けられた default.js ファイル内の Navigation.onnavigating イベントまたは Navigation.onnavigated イベントに追加する必要があります。

この例では、Navigation.onnavigated イベントにハンドラーを追加します。このハンドラーは、イベントオブジェクトから移動先の URL を取得します (NavBarCommand の data-win-options 属性の location プロパティで定義)。ハンドラーは既にあるコンテンツのコンテンツホスト (ページコントロール) を空にした後、ホストに新しいページをレンダリングします。

ソリューションエクスプローラーで、js フォルダーの default.js を開きます。

default.js で既定のコードを次のコードに置き換えます。


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    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.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. 移動する 2 ページを追加する

このページは手作業で追加することも、必要なマークアップと JavaScript コードがすべて用意された Visual Studio ページコントロール項目テンプレートを使って追加することもできます。

Dn376409.wedge(ja-jp,WIN.10).gif 手作業でプロジェクトに新しいページを追加する

ソリューションエクスプローラーで、プロジェクト名 (Nav bar demo) を右クリックし、[追加]、[新しいフォルダー] の順にクリックします。新しいフォルダーに "pages" という名前を付けます。
作成した pages フォルダーを右クリックし、[追加]、[新しいフォルダー] の順にクリックします。新しいフォルダーに "home" という名前を付けます。
pages の下に 2 つ目のフォルダーを作ります。このフォルダーに "page2" という名前を付けます。
home フォルダーを右クリックし、[追加]、[新しい HTML ファイル] の順にクリックします。[新しい項目の追加] ダイアログボックスで、このファイルに "home.html" という名前を付け、[追加] をクリックします。

既定の HTML を次の HTML に置き換えます。
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
page2 フォルダーでも同じ手順を繰り返します。ファイルには "page2.html" という名前を付けます。

既定の HTML を次の HTML に置き換えます。
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

別の方法として、Visual Studio の Windows ストアアプリ用 JavaScript 項目テンプレートを使うこともできます。

Dn376409.wedge(ja-jp,WIN.10).gif ページコントロール項目テンプレートを使ってプロジェクトに新しいページを追加する

先に説明したように、pages フォルダーと home、page2 サブフォルダーを作ります。
home フォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。[新しい項目の追加] ダイアログが表示されます。
一覧から [ページコントロール] を選びます。[名前] ボックスに「"home.html"」と入力します。
[追加] をクリックします。新しい PageControl オブジェクトがソリューションエクスプローラーに表示されます。

新しい PageControl には、home.css、home.html、home.js の 3 つのファイルがあります。

注このようにして追加した HTML ファイルは BackButton コントロール用のコードを含みます。先に述べたように、フラットナビゲーションパターンを使ってい場合は、BackButton オブジェクトを使わないことをお勧めします。したがって、このコードは削除しても問題ありません。詳しくは、「Windows ストアアプリのナビゲーションデザイン」をご覧ください。
page2 フォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。[新しい項目の追加] ダイアログが表示されます。
一覧から [ページコントロール] を選びます。[名前] ボックスに「"page2.html"」と入力します。
[追加] をクリックします。新しい PageControl オブジェクトがソリューションエクスプローラーに表示されます。

新しい PageControl には、page2.css、page2.html、page2.js の 3 つのファイルがあります。

5. アプリをテストする

F5 キーを押してアプリを実行します。アプリに [Home] ページが表示されます。
アプリの実行中にアプリの任意の場所で右クリックしてナビゲーションバーを表示し、[Page2] をクリックします。

[Page2] ページがアプリのページコントロールに表示されます。
もう一度右クリックしてナビゲーションバーを表示し、[Home] をクリックします。

[Home] ページがアプリのページコントロールに表示されます。

要約と次のステップ

このクイックスタートでは、1 つの NavBarContainer オブジェクトと 4 つの NavBarCommand オブジェクトを含む NavBar オブジェクトをアプリに追加しました。また、Navigation.onnavigated イベント用の単純なハンドラー関数を追加しました。

複雑な階層型のナビゲーションとレイアウトの例について詳しくは、Hub コントロールに関する次のチュートリアルをご覧ください。

クイックスタート: レイアウトとナビゲーションのためのハブコントロールの使用

必要条件

手順

1. 空のアプリテンプレートを使って新しいプロジェクトを作る

2. プロジェクトにナビゲーションバーの定義を追加する

3. ナビゲーションハンドラーコードを追加する

4. 移動する 2 ページを追加する

5. アプリをテストする

要約と次のステップ

関連トピック

その他のリソース

クイック スタート: ナビゲーション バー (NavBar) の追加

必要条件

手順

1. 空のアプリ テンプレートを使って新しいプロジェクトを作る

2. プロジェクトにナビゲーション バーの定義を追加する

3. ナビゲーション ハンドラー コードを追加する

4. 移動する 2 ページを追加する

5. アプリをテストする

要約と次のステップ

関連トピック

その他のリソース

クイックスタート: ナビゲーションバー (NavBar) の追加

1. 空のアプリテンプレートを使って新しいプロジェクトを作る

2. プロジェクトにナビゲーションバーの定義を追加する

3. ナビゲーションハンドラーコードを追加する