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

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

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

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

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

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

必要条件

基本的なリンクの作成

最も簡単で広く使われているナビゲーションの 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: 新しいナビゲーション アプリ プロジェクトの作成

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

      Visual Studio を初めて起動したときに、開発者用ライセンスを取得するように求められます。
     
  2. [ファイル][新しいプロジェクト] の順にクリックするか、[スタート ページ] タブで [新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. 左側の [テンプレート] ウィンドウで、[インストール済み][テンプレート][JavaScript][ストア アプリ] の順に展開します。

  4. テンプレートの種類として [ユニバーサル アプリ] を選びます。JavaScript で使うことができるプロジェクト テンプレートがダイアログ ボックスの中央のウィンドウに表示されます。
  5. 中央のウィンドウで、"ナビゲーション アプリケーション (ユニバーサル アプリ)" プロジェクト テンプレートを選びます。

  6. [名前] ボックスに、プロジェクトの名前を入力します。このトピックの例では、"NavigationAppExample" を使っています。

    JavaScript ユニバーサル アプリ テンプレートが表示された [新しいプロジェクト] ダイアログ。

  7. [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 など、いくつかの画像ファイルも含まれています。

  8. アプリを実行します。[デバッグ][デバッグの開始] の順にクリックするか、F5 キーを押します (デバッグを停止して Visual Studio に戻るには、Shift キーを押しながら F5 キーを押します)。

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

    新しい Windows ナビゲーション アプリ。

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

    新しい 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 ページの完全なマークアップです。

    
    
    <!-- default.html -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>NavigationAppExample</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>
    
        <!-- NavigationAppExample references -->
        <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>
        <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
            <button data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}">
            </button>
        </div> -->
    </body>
    </html>
    
    

    次の図は、アプリのウィンドウに表示される異なるコンテンツ単位を示しています。

    ナビゲーション アプリケーションのコンテンツ詳細。

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

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

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

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

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

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

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

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

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

    ヒント  項目テンプレートをプロジェクトの他の場所に追加した場合は、page2.html でスクリプトと CSS に対する参照を更新する必要が生じることがあります。
     
  6. page2.js を開き、define 関数の URI が正しいことを確かめます。次のように表示されます。
    
    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // . . .
        ready: function (element, options) {
            // ready function implementation.
        },
        // . . .
    });
    
    

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

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

  1. 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>
    
    
  2. メイン コンテンツ セクションを次のコードに置き換えます。
    
    
            <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>
    
    
  3. page2.js を開きます。PageControl には、一連の定義済み関数が含まれています。これらの関数は、事前定義された順に自動的に呼び出されます。ページ コントロール項目テンプレートは、readyupdateLayoutunload の各関数を含みます。

    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.
            }
        });
    })();
    
    
  4. 手順 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.navigateWinJS.Navigation.back、または WinJS.Navigation.forward 関数を使ってナビゲーションを実行する際に発生します。

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

  1. home.js ファイルで、ハイパーリンクの click イベント ハンドラーを定義します。
    
    
    function linkClickEventHandler(eventInfo) {
    
    }
    
    
  2. 既定のリンク動作 (指定されたページに直接移動) が実行されないように、preventDefault メソッドを呼び出します。
    
    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault(); 
    }
    
    
  3. イベントをトリガーしたハイパーリンクを取得します。
    
    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault(); 
        var link = eventInfo.target;
    }
    
    
  4. WinJS.Navigation.navigate 関数を呼び出し、リンク ターゲットを渡します。(必要に応じて、そのページの状態を説明する状態オブジェクトを渡すこともできます。詳しくは、「WinJS.Navigation.navigate」をご覧ください)。
    
    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault(); 
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href); 
    }
    
    
  5. 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 機能を使って、アプリにこのモデルを実装しました。

関連トピック

開発者向け
初めてのアプリ - パート 3: PageControl オブジェクトとナビゲーション
アプリ バーの追加
クイック スタート: ナビゲーション バー (NavBar) の追加
クイック スタート: レイアウトとナビゲーションのためのハブ コントロールの使用
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 ストア アプリ)
アプリ バーをアクセシビリティ対応にする

 

 

表示:
© 2018 Microsoft