次の方法で共有


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

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

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

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

 

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

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

 

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

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

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

必要条件

手順

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

  1. Visual Studio 2013 を起動します。

      Visual Studio を初めて起動したときに、開発者用ライセンスを取得するように求められます。

     

  2. [ファイル][新しいプロジェクト] の順にクリックするか、[スタート ページ] タブで [新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. [インストール済み] ウィンドウで、[テンプレート][JavaScript] の順に展開し、テンプレートの種類として [Windows ストア アプリ] を選びます。JavaScript で使うことができるプロジェクト テンプレートがダイアログ ボックスの中央のウィンドウに表示されます。

  4. 中央のウィンドウで、[空のアプリケーション] プロジェクト テンプレートを選びます。

  5. [名前] ボックスに、プロジェクトの名前を入力します。このトピックの例では、「Nav bar demo」を使っています。

  6. [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.onnavigatingNavigation.onnavigated) を生成するため、ハンドラー コードを NavBarCommand オブジェクトに追加する必要はありません。代わりに、ハンドラー コードを、default.html ファイルに関連付けられた default.js ファイル内の Navigation.onnavigating イベントまたは Navigation.onnavigated イベントに追加する必要があります。

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

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

  2. 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手作業でプロジェクトに新しいページを追加する

  1. ソリューション エクスプローラーで、プロジェクト名 (Nav bar demo) を右クリックし、[追加][新しいフォルダー] の順にクリックします。新しいフォルダーに "pages" という名前を付けます。

  2. 作成した pages フォルダーを右クリックし、[追加][新しいフォルダー] の順にクリックします。新しいフォルダーに "home" という名前を付けます。

  3. pages の下に 2 つ目のフォルダーを作ります。このフォルダーに "page2" という名前を付けます。

  4. home フォルダーを右クリックし、[追加][新しい HTML ファイル] の順にクリックします。[新しい項目の追加] ダイアログ ボックスで、このファイルに "home.html" という名前を付け、[追加] をクリックします。

    既定の HTML を次の HTML に置き換えます。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p>Home</p>
    </body>
    </html>
    
  5. 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ページ コントロール項目テンプレートを使ってプロジェクトに新しいページを追加する

  1. 先に説明したように、pages フォルダーと homepage2 サブフォルダーを作ります。

  2. home フォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。[新しい項目の追加] ダイアログが表示されます。

  3. 一覧から [ページ コントロール] を選びます。[名前] ボックスに「"home.html"」と入力します。

    ページ コントロール項目テンプレート ダイアログ

  4. [追加] をクリックします。新しい PageControl オブジェクトがソリューション エクスプローラーに表示されます。

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

      このようにして追加した HTML ファイルは BackButton コントロール用のコードを含みます。先に述べたように、フラット ナビゲーション パターンを使ってい場合は、BackButton オブジェクトを使わないことをお勧めします。したがって、このコードは削除しても問題ありません。詳しくは、「Windows ストア アプリのナビゲーション デザイン」をご覧ください。

     

  5. page2 フォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。[新しい項目の追加] ダイアログが表示されます。

  6. 一覧から [ページ コントロール] を選びます。[名前] ボックスに「"page2.html"」と入力します。

  7. [追加] をクリックします。新しい PageControl オブジェクトがソリューション エクスプローラーに表示されます。

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

5. アプリをテストする

  1. F5 キーを押してアプリを実行します。アプリに [Home] ページが表示されます。

  2. アプリの実行中にアプリの任意の場所で右クリックしてナビゲーション バーを表示し、[Page2] をクリックします。

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

  3. もう一度右クリックしてナビゲーション バーを表示し、[Home] をクリックします。

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

要約と次のステップ

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

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

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

関連トピック

初めてのアプリ - パート 3: PageControl オブジェクトとナビゲーション

アプリ バーの追加

クイック スタート: 単一ページ ナビゲーションの使用

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

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

HTML Hub コントロールのサンプルに関するページ

HTML AppBar コントロールのサンプルに関するページ

HTML NavBar コントロールのサンプルに関するページ

ナビゲーションとナビゲーション履歴のサンプルに関するページ

デザイナー向け

ナビゲーション パターン

コマンド パターン

レイアウト

戻るボタン

ハブ コントロールのガイドライン

アプリ バーのガイドライン (Windows ストア アプリ)

アプリ バーをアクセシビリティ対応にする