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

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

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

ここでは、単一ページナビゲーションモデルと、PageControl オブジェクトと WinJS.Navigation 機能を使ってアプリにこのモデルを実装する方法について説明します。

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

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

必要条件

基本的なアプリを作成できることを前提としています。不明な点がある場合は、「JavaScript を使った初めてのアプリの作成」をご覧ください。
このトピックは、JavaScript 用 Windows ライブラリのコントロールに習熟していることを前提としています。WinJS コントロールの使用方法については、「クイックスタート: JavaScript 用 Windows ライブラリのコントロールとスタイルの追加」をご覧ください。

基本的なリンクの作成

最も簡単で広く使われているナビゲーションの 1 つはハイパーリンクです。次の HTML コードは、page2.html に移動するハイパーリンクを作成します。

<p><a href="page2.html">Go to page 2</a></p>

これは相対リンクであるため、現在のドキュメントのベース URL を基準とし、page2.html はアプリに含まれているローカルページだと判断されます。たとえば、このリンクが /folder/default.html に表示されている場合、クリックすると、/folder/page2.html が表示されます。

注ローカライズのためにアプリを最適化している場合 (これは常によい考えです)、この挙動は /folder/ にあるローカライズしたコンテンツフォルダーに基づいて変わります。「アプリのグローバル化」をご覧ください。

アプリケーション内のローカルファイルの URI 全体を明示的に指定するには、新しいパッケージコンテンツ URL スキーム (ms-appx) を次のように使います。

**ms-appx://package name/**file path

パッケージ名は省略できます。

**ms-appx:///**file path

次に例を示します。

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

ms-appx URL スキームを使って、アプリのパッケージに含まれている任意のファイルを参照できます。ただし、ドキュメントのベース URL に基づいて自動的に解決される相対 URL の使用をお勧めします。

単一ページナビゲーション: 推奨モデル

前の例ではトップレベルのナビゲーションを行うリンクの作成方法を示しました。これは Web ページには適していますが、アプリでは、以下のような理由でトップレベルのナビゲーションを避ける必要があります。

アプリが次のページを読み込んでいる間、画面が空白になります。
スクリプトのコンテキストが破棄され、初期化し直す必要があります。スクリプトのコンテキストが破棄され、再初期化されるため、アプリは、システムイベントを受け取ってもそれらを処理しません。

単一ページナビゲーションを使うと、トップレベルのナビゲーションよりパフォーマンスが向上すると共に、より適したエクスペリエンスをアプリで実現できます。ナビゲーションコントロールは、新しい Microsoft Visual Studio プロジェクトでは自動的には提供されません。このため、新しいページに対するトップレベルのナビゲーションでは、最初のページに戻るためのナビゲーションメカニズム (リンクなど) を手動で作らない限り、最初のページに戻ることはできません。スタートページは、アプリがライフサイクルを管理する方法 (起動、停止、一時停止が発生するときにどのように動作するか) を定義する場所でもあります。複数のトップレベルページが存在する場合は、各ページにアプリのライフサイクルと状態を管理するロジックを含める必要があります。

次に、どのコントロールを使ってコンテンツをメインページに読み込むべきかを示します。

ドキュメントオブジェクトモデル (DOM) を使うと、別のソースからドキュメントを読み込むことができます。
シンプルな HTML コンテンツ (対話的でなく、スクリプト参照を含まないコンテンツ) の場合、HtmlControl オブジェクトを使います。
外部 Web コンテンツの場合、可能な限り x-ms-webview コントロールを使います。iframe と比べると、このコントロールは、分離とナビゲーションに優れ、SmartScreen フィルターを利用でき、iframe でホストできないサイトをサポートします。
これらのコンテンツ以外には、ページコントロールを使います。

Visual Studio には、ナビゲーション管理を容易にするアプリ用の JavaScript プロジェクトテンプレートがいくつか付属しています。これらのプロジェクトテンプレートには PageControlNavigator と呼ばれるナビゲーションコントロールが用意されています。これを使って PageControl オブジェクト間を移動できます。 PageControlNavigator クラスは、PageControl を使って単一ページナビゲーションをスムーズに行う方法の 1 つを示しています。

以下の手順は、複数の PageControl オブジェクトを含むアプリを作る方法と、単一ページナビゲーションモデルを使ってそれらのページ間を移動する方法を示します。

手順 1: 新しいナビゲーションアプリプロジェクトの作成

Microsoft Visual Studio 2013 Update 2 を起動します。

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

新しいナビゲーションアプリケーション プロジェクトには、スタートページ、ホームページ、いくつかの追加のサポートファイルが含まれます。ソリューションエクスプローラーでは次のように表示されます。

新しいナビゲーションアプリケーション プロジェクトには、いくつかのファイルが含まれます。Windows アプリ固有のファイル、Phone アプリ固有のファイル、共有のファイルがあります。

このプロジェクトには、次の HTML ファイルが含まれています。
- default.html—スタートページです。これは最初に読み込まれます。このページには、各ページをメインウィンドウに読み込む PageControlNavigator のインスタンスが入っています。このページは AppBar を作る場所です (アプリで AppBar が使われる場合)。注 HTML ページは 1 つのコンテンツホスト (default.html で宣言された div 要素) に読み込まれます。default.html では、JavaScript 用 Windows ライブラリ (WinJS) に用意されている data-win-control 属性を使って、コンテンツホスト div 要素が PageControlNavigator 型のコントロールとして宣言されています。
- home.html—ホームページです。「ようこそ」というタイトルが表示されます。
このプロジェクトには、次の JavaScript ファイルが含まれています。
- default.js— アプリが起動されたときの動作を指定します。
- home.js— ホームページに関連付けられる動作を指定します。
- navigator.js— Windows ストアアプリの JavaScript テンプレート用のナビゲーションモデルをサポートする PageControlNavigator オブジェクトを実装します。
このプロジェクトには、次の CSS ファイルが含まれています。
- default.css— コンテンツホストページとアプリ全体のカスケードスタイルシート (CSS) スタイルを指定します。
- home.css— ホームページの CSS スタイルを指定します。
このプロジェクトには、アプリパッケージを記述した package.appxmanifest ファイルも含まれています。最後に、このプロジェクトには、スプラッシュ画面画像用の splashscreen.png や Windows ストアに使われる storelogo.png など、いくつかの画像ファイルも含まれています。
アプリを実行します。[デバッグ]、[デバッグの開始] の順にクリックするか、F5 キーを押します (デバッグを停止して Visual Studio に戻るには、Shift キーを押しながら F5 キーを押します)。

これは、Windows アプリのスクリーンショットです。

これは、Phone アプリのスクリーンショットです。

表示されるこのコンテンツは default.html ファイルでは定義されていません。これは、home.html ファイル (別のページ) で定義されています。ホームページのコンテンツを取得して default.html 内にそのコンテンツを表示するのは PageControlNavigator です。

ナビゲーションコントロールである PageControlNavigator を次に示します。ナビゲーションに使ういくつかの関数が定義されています。このコントロールは navigator.js で実装されています。
```
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});
```
コンストラクター関数は、ナビゲーションコントロールの初期化を実行します。重要な初期化タスクとしては、WinJS.Navigation.onnavigating イベントなどの WinJS イベントハンドラーの設定やアプリのホームページの設定などがあります (home 値は、contenthost DIV 要素の data-win-options 属性で指定されています)。
```
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
```
アプリのナビゲーションコントロールとして (default.html で) 宣言されている DIV 要素は、アプリのすべてのページのコンテンツホストを示します。DIV 要素は、WinJS の data-win-control 属性を使って、この要素自体をナビゲーションコントロールとして宣言します。そして、このコントロールには、アプリ用のナビゲーションモデルが用意されています。すべてのページコンテンツは、この DIV に読み込まれます。

次に示すのは、default.html ページの完全なマークアップです。
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</title>

    
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" 
        data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    
</body>
</html>
```
次の図は、アプリのウィンドウに表示される異なるコンテンツ単位を示しています。

以下の手順では、PageControlNavigator とPageControl オブジェクトを使ってページを追加する方法を詳しく説明します。

手順 2: 新しいページの作成

PageControl は、論理ページとして機能する、HTML、CSS、JavaScript のモジュール単位です。

Visual Studio 2013 プロジェクトに新しいページを追加するときには、次の手順を実行する必要があります。

Visual Studio でページコントロール項目テンプレートを使って新しいページを追加します。
WinJS.Navigation.navigate 関数を使って新しいページに移動するコードを追加します。ヒント この関数は移動を直接実行するわけではなく、WinJS.Navigation.onnavigated イベントを呼び出します。このイベントが navigator.js で処理されます。navigator.js のコードによって、新しいページ内で ready 関数が呼び出されます。通常、navigator.js を変更する必要はありません。
必要に応じて、アプリに適した UI とイベントハンドラーをアプリに追加し、ページナビゲーションコードを呼び出せるようにします。

ページには、事前定義された一連のメソッドがあります。これらのメソッドは、ライブラリによって事前定義された順に自動的に呼び出されます。これらのメソッドは、WinJS.UI.Pages.define 関数によって実装用に公開されます。

Hh452768.wedge(ja-jp,WIN.10).gif ページの追加

ソリューションエクスプローラーで、pages フォルダーを右クリックし、[追加]、[新しいフォルダー] の順にクリックします。注この例では、共有ページを追加します。必要に応じて、Windows プロジェクトや Phone プロジェクトに固有のページも追加できます。
新しいフォルダーに page2 という名前を付けます。
page2 フォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。
[新しい項目の追加] ダイアログボックスの中央のウィンドウで、[ページコントロール] を選びます。
ページに page2.html という名前を付けて [追加] をクリックします。

page2.html ファイルが、他の 2 つのプロジェクトファイル page2.css と page2.js と共に page2 フォルダーに作られます。この 3 つのファイルで 1 つの論理ページを表します。

ヒント 項目テンプレートをプロジェクトの他の場所に追加した場合は、page2.html でスクリプトと CSS に対する参照を更新する必要が生じることがあります。

page2.js を開き、define 関数の URI が正しいことを確かめます。次のように表示されます。

WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

手順 3: ページのカスタマイズ

次に、別のメッセージと曜日を表示するように新しいページを変更します。

page2.html を開きます。ページコントロール項目テンプレートによって、ヘッダーセクション (戻るボタンを含む) とページのメインコンテンツのセクションを含んだ HTML ページが作成されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

メインコンテンツセクションを次のコードに置き換えます。


        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

page2.html ファイルは次のようになります。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

page2.js を開きます。PageControl には、一連の定義済み関数が含まれています。これらの関数は、事前定義された順に自動的に呼び出されます。ページコントロール項目テンプレートは、ready、updateLayout、unload の各関数を含みます。

PageControlNavigator は、ユーザーがアプリのレイアウト状態 (縦方向と横方向) を切り替えるか、アプリのウィンドウサイズを変更すると、updateLayout 関数を呼び出します。このトピックでは、updateLayout を定義する方法は説明しませんが、各アプリでこれを定義する必要があります。「縦長で幅の狭いレイアウトに対するウィンドウサイズの変更のガイドライン」と「ユニバーサル Windows プラットフォーム (UWP) アプリ用レスポンシブデザイン 101」をご覧ください。

ready 関数は、ページの DOM が読み込まれたとき、コントロールが有効になったとき、ページがメイン DOM に読み込まれたときに呼び出されます。

(PageControl では、ページライフサイクル用のその他の関数もサポートしています。詳しくは、「Page コントロールの追加」をご覧ください。)

ページコントロール項目テンプレートによって作られた page2.js ファイルを次に示します。
```
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();
```

手順 2. で作った span ("dayPlaceholder") を取得し、innerText を現在の曜日に設定するように、ready 関数を変更します。


// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

以上の操作で、ページの作成と、そのページのカスタマイズが完了しました。次の手順では、アプリを実行しているユーザーがこのページに移動できるようにします。

手順 4: 移動機能を使ったページ間の移動

この時点でアプリを実行すると、home.html が表示されます。ユーザーが page2.html に移動する手段はありません。ユーザーが page2.html に移動できるようにするには、home.html ファイルからリンクするだけで済みます。


<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

アプリを実行し、リンクをクリックすると、page2.html が表示されて、うまくいったように見えます。問題は、アプリがトップレベルのナビゲーションを実行することです。home.html から page2.html に移動する代わりに、default.html から page2.html に移動します。

トップレベルのナビゲーションを実行する。

実際に必要な動作は、home.html のコンテンツが page2.html に置き換わることです。

推奨される方法で page2.html へ移動する。

PageControlNavigator コントロールを使うと、このタイプのナビゲーションがいたって簡単に実行できます。アプリの navigator.js ファイル内にある PageControlNavigator コードは、WinJS.Navigation.onnavigated イベントを処理します。このイベントが発生すると、PageControlNavigator がこのイベントによって指定されたページを読み込みます。

WinJS.Navigation.navigated イベントは、WinJS.Navigation.navigate、WinJS.Navigation.back、または WinJS.Navigation.forward 関数を使ってナビゲーションを実行する際に発生します。

ハイパーリンクの既定の動作を使う代わりに、自分で WinJS.Navigation.navigate を呼び出す必要があります。リンクをボタンに置き換え、このボタンのクリックイベントハンドラーを使って WinJS.Navigation.navigate を呼び出すことができます。または、ハイパーリンクの既定の動作を変更して、ユーザーがリンクをクリックしたときにアプリが WinJS.Navigation.navigate を使ってリンクターゲットに移動するように設定することもできます。このためには、ハイパーリンクの click イベントを処理し、このイベントを使ってハイパーリンクの既定のナビゲーション動作を停止した後、WinJS.Navigation.navigate 関数を呼び出してリンクターゲットを渡します。手順は次のとおりです。

home.js ファイルで、ハイパーリンクの click イベントハンドラーを定義します。
```
function linkClickEventHandler(eventInfo) {

}
```
既定のリンク動作 (指定されたページに直接移動) が実行されないように、preventDefault メソッドを呼び出します。
```
function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}
```

イベントをトリガーしたハイパーリンクを取得します。

function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

WinJS.Navigation.navigate 関数を呼び出し、リンクターゲットを渡します。(必要に応じて、そのページの状態を説明する状態オブジェクトを渡すこともできます。詳しくは、「WinJS.Navigation.navigate」をご覧ください)。
```
function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}
```

home.js ファイルの ready 関数で、イベントハンドラーをハイパーリンクにアタッチします。

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

これが最後の手順です。次に、home.js ファイルの完全なコードを示します。


// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

アプリを実行し、page2.html へのリンクをクリックします。次のように表示されます。

戻るボタンのある page2.html の画面

ここでは、適切なナビゲーションパターンを使ってページが表示されます。

page2.html に移動した後のコンテンツ詳細。

ページコントロールテンプレートには、WinJS.Navigation 関数を使って移動すると有効になる戻るボタンが含まれます。WinJS.Navigation 関数を使う際に、アプリによってナビゲーション履歴が自動的に保存されます。そのナビゲーション履歴を使うと、WinJS.Navigation.back を呼び出してページを戻り、WinJS.Navigation.forward を呼び出してページを進むことができます。

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

アプリが中断されたときのナビゲーションの履歴の保存

ナビゲーション履歴はアプリが中断またはシャットダウンされると自動的に保存されませんが、自分でこの情報を簡単に保存することができます。ナビゲーション履歴を取得するには、WinJS.Navigation.history プロパティを使います。ナビゲーション履歴を保存するには、WinJS.Application.sessionState オブジェクトを使います。スムーズな中断/再開エクスペリエンスを実現するには、ユーザーが移動するたびにこの情報を格納する方法が最適です。

アプリの再開時、WinJS.Application.sessionState オブジェクトから履歴情報を取得し、この情報を使って WinJS.Navigation.history プロパティを設定します。

WinJS.Application.sessionState オブジェクトを使ってセッションデータを保存および復元する方法の例については、「パート 2: アプリのライフサイクルと状態の管理」をご覧ください。中断と再開について詳しくは、「起動、再開、マルチタスク」をご覧ください。

要約

ここでは、WinJS.UI.Pages 名前空間のオブジェクトとメソッドを使って単一ページナビゲーションモデルをサポートする方法を説明しました。

単一ページナビゲーションモデルを使ってアプリを構築する方法も説明しました。テンプレートに用意されている PageControlNavigator クラスを使い、PageControl オブジェクトと WinJS.Navigation 機能を使って、アプリにこのモデルを実装しました。

次の方法で共有

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

必要条件

基本的なリンクの作成

単一ページナビゲーション: 推奨モデル

手順 1: 新しいナビゲーションアプリプロジェクトの作成

手順 2: 新しいページの作成

手順 3: ページのカスタマイズ

手順 4: 移動機能を使ったページ間の移動

アプリが中断されたときのナビゲーションの履歴の保存

要約

関連トピック

その他のリソース

次の方法で共有

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

必要条件

基本的なリンクの作成

単一ページ ナビゲーション: 推奨モデル

手順 1: 新しいナビゲーション アプリ プロジェクトの作成

手順 2: 新しいページの作成

手順 3: ページのカスタマイズ

手順 4: 移動機能を使ったページ間の移動

アプリが中断されたときのナビゲーションの履歴の保存

要約

関連トピック

その他のリソース

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

単一ページナビゲーション: 推奨モデル

手順 1: 新しいナビゲーションアプリプロジェクトの作成