カスタムコンテンツを持つアプリバーの追加 (HTML)

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

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

JavaScript を使って Windows ストアアプリにカスタムコンテンツを含む AppBar を追加できます。AppBar コントロール、およびそこに含まれる AppBarCommand コントロールは、カスタム HTML コンテンツの追加、ポップアップの作成、トグルコマンドの挿入など、さまざまな方法でカスタマイズできます。

注アプリの永続的なナビゲーションバーを作成する場合は、代わりに NavBar コントロールを使います。ナビゲーションバーを作成する方法について詳しくは、「クイックスタート: ナビゲーションバーおよび戻るボタンの追加」をご覧ください。

必要条件

手順

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

Microsoft Visual Studio を起動します。
[スタートページ] タブで、[新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログボックスが表示されます。
[インストール済み] ウィンドウで、[テンプレート]、[JavaScript] の順に展開し、テンプレートの種類として [Windows ストアアプリ] を選びます。JavaScript で使うことができるプロジェクトテンプレートがダイアログの中央のウィンドウに表示されます。
中央のウィンドウで、[空のアプリケーション] プロジェクトテンプレートを選びます。
[名前] ボックスに「Custom AppBar デモ」と入力します。
[OK] をクリックしてプロジェクトを作ります。

2. バーコントロールの追加とコマンドのカスタマイズ

カスタマイズ可能な AppBar コマンドにより AppBar をカスタマイズできます。type プロパティを使うことにより、AppBarCommand コントロールの種類を変更できます。特定の HTML 要素のみがホストできる AppBar コマンドの種類があります。

AppBarCommand.type プロパティには、次の 5 つの値のいずれかを設定できます。

button—type の既定値です。標準のボタンを定義するもので、<button> 要素にのみ適用できます。
flyout—隣接する HTML フラグメントを表示するボタンを作成します (ポップアップ)。ポップアップの AppBarCommand を作成するには、種類として "flyout" を指定し、flyout プロパティを設定します。flyout プロパティでは、定義された Flyout コントロールを参照する必要があります。<button> 要素のみがポップアップの AppBarCommand をホストできます。
toggle—選択またはクリアできるボタンを作成します。ボタンが選択されると、AppBarCommand のアイコンの色が反転します (たとえば、黒から白、白から黒など)<button> 要素のみがトグルの AppBarCommand をホストできます。
separator—他の AppBarCommand コントロールとの間で視覚的に分離するために AppBar に水平線を描きます。<hr/> 要素のみが分離線の AppBarCommand をホストできます。
content—内部で他の HTML マークアップをホストできる AppBarCommand を作成します。ホストされるマークアップには、テキスト、<input> タグ、さらには JavaScript 用 Windows ライブラリ (WinJS) コントロールのサブセットですら含まれます。 <div> 要素のみがコンテンツの AppBarCommand をホストできます。

HTML で AppBar コントロールと AppBarCommand コントロールを宣言により作成することも、JavaScript を使って実行時に作成することもできます。この例では、default.html の HTML マークアップ内で宣言を使って AppBar を作ります。この例には、7 つの AppBarCommand コントロールが含まれます。

Hh780658.wedge(ja-jp,WIN.10).gif AppBar にカスタムコンテンツを追加するには

ソリューションエクスプローラーで、ソリューションのルートから default.html ファイルを開きます。

<body> タグ内のマークアップを、次のマークアップを含むタグに置き換えます。

<div data-win-control="WinJS.UI.AppBar"
    data-win-options="{
        placement: 'bottom'
    }">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'default'
            icon: 'placeholder',
            label: 'Button',
            type: 'button'
    }">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'flyout', 
            icon: 'volume', 
            label: 'Volume', 
            type: 'flyout',
            flyout: select('#volumeFlyout')}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'toggle', 
            icon: 'filter', 
            label: 'Filter', 
            type: 'toggle'}">
    </button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
        including HTML and some WinJS controls.</p>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <div id="itemContainer"
             data-win-control="WinJS.UI.ItemContainer">
            <h3>Item Container</h3>
        </div>
    </div>
</div>
<div id="volumeFlyout"
     data-win-control="WinJS.UI.Flyout">
    <h3>Volume</h3> <input type="range" />
</div>

要約

このクイックスタートでは、カスタムボタンを含む AppBar をアプリに追加しました。

この記事では、ナビゲーションバーを作成する方法については説明しません。ナビゲーションバーを作成する方法については、「クイックスタート: ナビゲーションバーおよび戻るボタンの追加」をご覧ください。

次の方法で共有

カスタムコンテンツを持つアプリバーの追加 (HTML)

必要条件

手順

2. バーコントロールの追加とコマンドのカスタマイズ

要約

関連トピック

その他のリソース

次の方法で共有

カスタム コンテンツを持つアプリ バーの追加 (HTML)

必要条件

手順

2. バー コントロールの追加とコマンドのカスタマイズ

要約

関連トピック

その他のリソース

カスタムコンテンツを持つアプリバーの追加 (HTML)

2. バーコントロールの追加とコマンドのカスタマイズ