コマンドを含むアプリバーの追加 (HTML)

[アーティクル]
03/04/2016

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

この記事では、JavaScript を使った Windows ランタイムアプリに AppBar を追加する方法を説明します。ここで示す例のように既定のスタイルとマークアップを使うと、AppBar に表示するコマンドのスタイルが適切に設定されます。コマンドアイコンに対しては、画像スプライトとフォントグリフの両方がサポートされます。

(Windows のみ) この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: Windows ストアアプリ UI の概要

必要条件

手順

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

Microsoft Visual Studio を起動します。
[スタートページ] タブで、[新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログボックスが表示されます。
[インストール済み] ウィンドウで、[テンプレート]、[JavaScript] の順に展開し、テンプレートの種類として [ストアアプリ] を選びます。対象とするプラットフォーム (ユニバーサルアプリ、Windows アプリ、または Windows Phone アプリ) を選択しますが、このクイックスタートでは、ユニバーサルアプリを使用します。
中央のウィンドウで、空のアプリケーション (ユニバーサルアプリ) プロジェクトテンプレートを選びます (まだ、[OK] をクリックしないでください)。
[名前] ボックスに「AppBar demo」と入力します。
[OK] をクリックしてプロジェクトを作ります。

2. プロジェクトに AppBar の定義を追加する

AppBar は、HTML ファイルと、それに対応する JavaScript ファイルで定義されています (Windows と Windows Phone に 1 つずつ)。

次に示すように、プラットフォーム (つまり、Windows と Windows Phone) ごとに default.html を開き、自動的に生成された HTML を次の HTML に置き換えます。ベストプラクティスはアプリケーションごとに 1 つのグローバル AppBar を作成することです。この AppBar は <body> 要素の直接の子にする必要があります。また、ユーザーがアプリをスナップしたときに最適なレイアウトになるように、DOM 内の状況依存のコマンドの前にグローバルコマンドを配置することをお勧めします。

この例では、左揃えのコマンド 1 つ、右揃えのコマンド 3 つ、区切り線 1 本が表示される AppBar を追加します。

Windows - default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.Windows</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>

  <!-- App_bar_demo.Windows references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body>
  <ol>
    <li>
      To show the AppBar, swipe up from the bottom of the screen, swipe down from
      the top of the screen, right-click, or press Windows&nbsp;Logo&nbsp;+&nbsp;Z.
    </li>
    <li>
      Click or tap one of the following AppBar buttons: <strong>Camera</strong>,
      <strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
    </li>
    <li>
      To dismiss the AppBar, click or tap in the application, swipe, right-click,
      or press Windows&nbsp;Logo&nbsp;+&nbsp;Z again.
    </li>
  </ol>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE prior to WinJS 4.0 -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

注意次のサンプルコードのブロックは、バージョン 2.1 までの Windows Phone に対してのみ有効です。WinJS 4.0 以降を使う場合、適切な方法は Windows と Windows Phone アプリの両方の AppBar に、同じ HTML コードを使うことです。

Windows Phone 2.1 のみ - default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.WindowsPhone</title>

  <!-- WinJS references -->
  <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
  based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
  <link href="/css/ui-themed.css" rel="stylesheet" />
  <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
  <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

  <!-- App_bar_demo.Phone references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body class="phone">
  <p>
    Tap the Add, Remove, or Delete AppBar button, or swipe the ellipsis and tap the Camera AppBar button.
  </p>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <!-- <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Hh465309.wedge(ja-jp,WIN.10).gif Appbar.js ファイルを追加します。

ソリューションエクスプローラーで、js フォルダーを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。
[インストール済み] ウィンドウで、[JavaScript] を展開し、ダイアログの中央のウィンドウで [JavaScript ファイル] をクリックします。
[名前] テキストボックス (ダイアログボックスの下部にある) に「Appbar.js」と入力します。
[追加] をクリックし、ファイルを作ってプロジェクトに追加します。

Appbar.js を開き (必要な場合)、次のコードを追加します。

(function () {
  "use strict";

  WinJS.UI.Pages.define("default.html", {
    ready: function (element, options) {
      // Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted:
      element.querySelector("#cmdAdd").addEventListener("click", doClickAdd, false);
      element.querySelector("#cmdRemove").addEventListener("click", doClickRemove, false);
      element.querySelector("#cmdDelete").addEventListener("click", doClickDelete, false);
      element.querySelector("#cmdCamera").addEventListener("click", doClickCamera, false);
    }
  });

  // Command button functions
  function doClickAdd() {
    WinJS.log && WinJS.log("Add button pressed", "status");
  }

  function doClickRemove() {
    WinJS.log && WinJS.log("Remove button pressed", "status");
  }

  function doClickDelete() {
    WinJS.log && WinJS.log("Delete button pressed", "status");
  }

  function doClickCamera() {
    WinJS.log && WinJS.log("Camera button pressed", "status");
  }

  WinJS.log = function (message, messageType) {
    var statusDiv = document.getElementById("statusMessage"); // For a multi-page app, always ensure that each element ID is unique (across all pages).

    if (statusDiv && messageType === "status") {
      statusDiv.innerText = "STATUS: " + message;
    }
  };
})();

Appbar.js ファイルは 2 つの default.html ファイルに、その <script src="/js/appbar.js"></script> マークアップを通じて挿入されます。

3. 開発者メモ

AppBarCommands は、AppBar 内でのみ使うことができます。使用するアイコンの一覧については、「AppBarIcon」をご覧ください。
AppBar は 閉じることができる軽量なオーバーレイです。つまり、常に画面の一部を占拠します。
AppBar は、すべての閉じることができる軽量なオーバーレイと同じように、<body> 要素の直接の子である必要があります。
AppBar オーバーレイが他の画面コンテンツを隠す性質を軽減するには、閉じられた AppBar 用に画面の上部または下部に領域を確保します。このようにすると、他のコンテンツを隠すのは、開かれた AppBar のみとなります。
閉じられた AppBar の高さは、その closedDisplayMode プロパティで制御できます。
AppBar の上下の位置は、その placement プロパティで制御されます。

要約

このクイックスタートでは、アプリケーションに AppBar を追加しました。

次の方法で共有

コマンドを含むアプリバーの追加 (HTML)

必要条件

手順

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

2. プロジェクトに AppBar の定義を追加する

3. 開発者メモ

要約

関連トピック

その他のリソース

次の方法で共有

コマンドを含むアプリ バーの追加 (HTML)

必要条件

手順

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

2. プロジェクトに AppBar の定義を追加する

3. 開発者メモ

要約

関連トピック

その他のリソース

コマンドを含むアプリバーの追加 (HTML)

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