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

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

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

Windows Phone 8.1 アプリでレイアウトとナビゲーションのために WinJS.UI.Pivot コントロールを使う方法について説明します。

アプリで Pivot コントロールを使うと、左右にパンしたときにカルーセルのようにつながった状態で折り返されるため、コンテンツのセクションをすばやく管理、表示、移動できるようになります。大きなデータセットのフィルター処理、複数のデータセットの表示、アプリビューの切り替えに使うことができます。

ピボットの実装例

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

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

必要条件

手順

1. ピボットアプリ (Windows Phone) テンプレートを使って新しいプロジェクトを作る

ハブ/ピボットアプリ (ユニバーサルアプリ) テンプレートを使って、ユニバーサル Windows アプリを作ることもできます。この例では、ピボットアプリ (Windows Phone) テンプレートを使います。

Visual Studio のピボットアプリテンプレート

Microsoft Visual Studio 2013 Update 2 を起動します。
[ファイル]、[新しいプロジェクト] の順にクリックするか、[スタートページ] タブで [新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログボックスが表示されます。
左側の [テンプレート] ウィンドウで、[インストール済み]、[テンプレート]、[JavaScript]、[ストアアプリ] の順に展開します。
テンプレートの種類として [Windows Phone アプリ] を選びます。JavaScript で使うことができるプロジェクトテンプレートがダイアログボックスの中央のウィンドウに表示されます。
中央のウィンドウで、[ピボットアプリ (Windows Phone)] プロジェクトテンプレートを選びます。
[名前] ボックスに、プロジェクトの名前を入力します。このトピックの例では、「PivotDemo」を使っています。
[OK] をクリックしてプロジェクトを作ります。

2. 新しいセクションを追加する (PivotItem)

Pivot 内のそれぞれのセクションは、PivotItem コントロールによって定義されます。テンプレートには 4 つのデモセクションが含まれていて、必要に応じて変更や削除ができます。ここでは、5 番目のセクションを追加する方法を示します。

テンプレートの基本ファイル構造は、ソリューションエクスプローラーでは次のようになります。

注ユニバーサル Windows アプリ間の整合性を保つため、テンプレートは、ファイル命名規則に階層型ナビゲーションパターンの "ハブ - セクション - 詳細/項目" モデルを使っています。

新しい "ハブ/ピボットアプリ" ソリューションのファイル。

Pivot とそれぞれの PivotItem は、 pages\hub フォルダーの hub.html で宣言します。

ここでは、テンプレートに単一の Pivot コントロール (ハブ) と 4 つの PivotItem コントロール (セクション) が含まれています。静的コンテンツ (section1、section2、section4) とデータ駆動型コンテンツ (section3) の両方が含まれます。

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

  <link href="/css/phone.css" rel="stylesheet" />
  <link href="/pages/hub/hub.css" rel="stylesheet" />
  <link href="/pages/hub/hubphone.css" rel="stylesheet" />
  <script src="/js/data.js"></script>
  <script src="/pages/hub/hub.js"></script>
  <script src="/pages/hub/section1Page.js"></script>
  <script src="/pages/hub/section2Page.js"></script>
  <script src="/pages/hub/section3Page.js"></script>
  <script src="/pages/hub/section4Page.js"></script>
</head>
<body>
  <div class="hubpage fragment">
    <header aria-label="Header content" role="banner">
      <button class="titlearea backbutton" 
        data-win-control="WinJS.UI.BackButton">
      </button>
      <h1 class="titlearea win-type-ellipsis">
        <span class="pagetitle">PivotDemo</span>
      </h1>
    </header>

    <section aria-label="Main content" role="main">
      <!-- Customize the Hub control by modifying the 
           HubSection controls here. -->

      <div class="hub" data-win-control="WinJS.UI.Pivot">

        <div class="section1 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section1'} }">
          <div class="sectioncontrol" 
            id="section1contenthost" 
            data-win-control="HubApps_SectionControls.Section1Control">
          </div>
        </div>

        <div class="section2 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section2'} }">
          <div class="added pivot-item-viewport" >
            <div class="added pivot-item-surface" >
              <div class="sectioncontrol" 
                id="section2contenthost" 
                data-win-control="HubApps_SectionControls.Section2Control">
              </div>
            </div> 
          </div> 
        </div>

        <div class="section3 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-res="{ winControl: {'header': 'Section3'} }">
          <div class="section3contenthost sectioncontrol" 
            id="section3contenthost" 
            data-win-control="HubApps_SectionControls.Section3Control"
            data-win-options="{
              dataSource: select('.pagecontrol').winControl.section3DataSource,
              layout: {type: WinJS.UI.ListLayout},
              oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate}">
          </div>
        </div>

        <div class="section4 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section4'} }">
            <div class="sectioncontrol" 
              id="section4contenthost" 
              data-win-control="HubApps_SectionControls.Section4Control">
            </div>
        </div>
      </div>
    </section>
  </div>
</body>
</html>

追加のページを宣言するには、既にあるセクションのいずれかをコピーして貼り付けるだけです。必要に応じて新しいセクションの仕様を変更します。

ここで、section4 に基づいて 5 番目のセクションを宣言します。

<div class="section4 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section4'} }">
  <div class="sectioncontrol" 
    id="section4contenthost" 
    data-win-control="HubApps_SectionControls.Section4Control">
  </div>
</div>

<div class="section5 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section5'} }">
     <div class="sectioncontrol" 
    id="section5contenthost" 
    data-win-control="HubApps_SectionControls.Section5Control">
  </div>
</div>

hub.html で宣言された各 PivotItem は、レイアウトと機能を対応する HTML、JavaScript、(場合によっては) カスケードスタイルシート (CSS)、およびリソースの各ファイルに定義する必要があります。

この例では、pages/hub フォルダーに section5Page.html と section5Page.js を追加します。

section5Page.html—セクションのコンテンツを指定します。

ここでは、項目ページにテキストリンクを表示してみましょう。

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <script src="/pages/hub/section5Page.js"></script>
</head>
<body>
   <div class="fragment section1page">
      <section aria-label="Main content" role="main">
        <a href="/pages/item/section5Item1.html">Link</a>
      </section>
   </div>
</body>
</html>

各セクションのヘッダー文字列は、strings/en-US フォルダーの resources.resjson で定義されます。

ここでは、セクション 5 に対して別の名前と値のペアを追加します。
```
    "Section5": "Section 5",
    "Section5Description": "",
```

section5Page.js—セクションに関連付けられる動作を指定します。

ここでは、ページに対して基本的な ready 関数を呼び出し、ハブに表示するカスタムコントロールとして section5Page を公開します。また、項目ページへのナビゲーションを開始するテキストリンクのクリックハンドラーも指定します。

(function () {
   "use strict";

   var ControlConstructor = 
     WinJS.UI.Pages.define("/pages/hub/section5Page.html", {
       // This function is called after the page control contents 
       // have been loaded, controls have been activated, and 
       // the resulting elements have been parented to the DOM. 
       ready: function (element, options) {
         options = options || {};

         // Retrieve the page 2 link and register the event handler. 
         // Don't use a button when the action is to go to another 
         // page; use a link instead. 
         // See Guidelines and checklist for buttons at 
         // https://go.microsoft.com/fwlink/p/?LinkID=313598
         // and Quickstart: Using single-page navigation at 
         // https://go.microsoft.com/fwlink/p/?LinkID=320288.
         WinJS.Utilities.query("a").listen(
           "click", linkClickHandler, false);
      },
   });

   // The following lines expose this control constructor as a global. 
   // This lets you use the control as a declarative control inside 
   // the data-win-control attribute. 

   WinJS.Namespace.define("HubApps_SectionControls", {
      Section5Control: ControlConstructor
   });

   function linkClickHandler(eventInfo) {
      var link = eventInfo.target;
      eventInfo.preventDefault();
      if (link.href.indexOf("ms-appx") > -1) {
        WinJS.Navigation.navigate(link.href);
      }
      else if (link.href.indexOf("http") > -1) {
        // Create a Uri object from a URI string 
        var uri = new Windows.Foundation.Uri(link.href);
        var options = new Windows.System.LauncherOptions();
        // Launch the URI with a warning prompt
        options.treatAsUntrusted = true;
        // Launch the URI
        Windows.System.Launcher.launchUriAsync(uri, options).then(
           function (success) {
              if (success) {
                // URI launched
              } else {
                // URI launch failed
              }
           });
      }
   }
})();

また、section5Page.js への参照も pages/hub フォルダーの hub.html に追加する必要があります。

<head>
   <meta charset="utf-8" />
   <title>hubPage</title>

   <link href="/css/phone.css" rel="stylesheet" />
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <link href="/pages/hub/hubphone.css" rel="stylesheet" />
   <script src="/js/data.js"></script>
   <script src="/pages/hub/hub.js"></script>
   <script src="/pages/hub/section1Page.js"></script>
   <script src="/pages/hub/section2Page.js"></script>
   <script src="/pages/hub/section3Page.js"></script>
   <script src="/pages/hub/section4Page.js"></script>
   <script src="/pages/hub/section5Page.js"></script>
</head>

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

ここでは、新しいセクションを含む Phone アプリのスクリーンショットを示します。

3. ハブ/ピボットアプリ (ユニバーサルアプリ) テンプレートでユニバーサル Windows アプリを作る

ハブ/ピボットアプリ (ユニバーサルアプリ) テンプレートを使って、Windows と Windows Phone 用のユニバーサル Windows アプリを作ることができます。

Visual Studio 2013 Update 2 を起動します。
[ファイル]、[新しいプロジェクト] の順にクリックするか、[スタートページ] タブで [新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログボックスが表示されます。
左側の [テンプレート] ウィンドウで、[インストール済み]、[テンプレート]、[JavaScript]、[ストアアプリ] の順に展開します。
テンプレートの種類として [ユニバーサルアプリ] を選びます。JavaScript で使うことができるプロジェクトテンプレートがダイアログボックスの中央のウィンドウに表示されます。
中央のウィンドウで、"ハブ/ピボットアプリ (ユニバーサルアプリ)" プロジェクトテンプレートを選びます。
[名前] ボックスで、プロジェクトの名前を入力します。
[OK] をクリックしてプロジェクトを作ります。
新しい "ハブ/ピボットアプリ" ソリューションには 3 つのプロジェクトが含まれます。Windows 固有のファイル用、Phone 固有のファイル用、共有コード用の 3 つです。テストの必要に応じて、[スタートアッププロジェクトに設定] で Windows または WindowsPhone を設定します。

4. ユニバーサル Windows アプリの新しいセクションを追加する

ピボットアプリ (Windows Phone) テンプレートの場合と同様に、ハブ/ピボットアプリ テンプレートには必要に応じて変更または削除できる 4 つのデモセクションが含まれます。

テンプレートの基本ファイル構造は、ソリューションエクスプローラーでは次のようになります。

新しい "ハブ/ピボットアプリ" ソリューションのファイル。

対応する各 HTML、JavaScript、CSS、リソースの各ファイルは、Windows プロジェクトと Phone プロジェクトの両方で共通にしても、特定のプラットフォーム固有にしてもかまいません (テンプレートデモのさまざまなプロジェクトをご覧ください)。

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

注意: WindowsPhone プロジェクトを [スタートアッププロジェクト] として設定します。

ここでは、新しいセクションを含む Phone アプリのスクリーンショットを示します。

ピボットの例として新しい Section 5 が表示されています。

次に、Windows アプリの新しいセクションのスクリーンショットを示します。

ユニバーサルピボットの例として新しい Section 5 が表示されています。

要約

このクイックスタートでは、Visual Studio 2013 Update 2 に含まれるピボットアプリ (Windows Phone) テンプレートとハブ/ピボットアプリ (ユニバーサルアプリ) ユニバーサルテンプレートについて説明しました。また、セクションコンテンツに含まれるテキストリンクに、PivotItem コントロールと click イベントに対するシンプルなハンドラー関数を含む新しいセクションを追加しました。

次の方法で共有

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

必要条件

手順

1. ピボットアプリ (Windows Phone) テンプレートを使って新しいプロジェクトを作る

2. 新しいセクションを追加する (PivotItem)

3. ハブ/ピボットアプリ (ユニバーサルアプリ) テンプレートでユニバーサル Windows アプリを作る

4. ユニバーサル Windows アプリの新しいセクションを追加する

要約

関連トピック

その他のリソース

次の方法で共有

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

必要条件

手順

1. ピボット アプリ (Windows Phone) テンプレートを使って新しいプロジェクトを作る

2. 新しいセクションを追加する (PivotItem)

3. ハブ/ピボット アプリ (ユニバーサル アプリ) テンプレートでユニバーサル Windows アプリを作る

4. ユニバーサル Windows アプリの新しいセクションを追加する

要約

関連トピック

その他のリソース

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

1. ピボットアプリ (Windows Phone) テンプレートを使って新しいプロジェクトを作る

3. ハブ/ピボットアプリ (ユニバーサルアプリ) テンプレートでユニバーサル Windows アプリを作る