アプリバー／メニュー／HTMLコントロール (1/4)

Windows Storeアプリは、独特の操作感があります。それはひとえに「Modern UIに追加された新しいインターフェイス」によるものといえるでしょう。これらを使えるようになると、よりModernっぽいアプリになります。そうした新UIのコントロール類を使ってみることにしましょう。

まずは「アプリバー（AppBar）」からです。PCの場合は右ボタンをクリックすると、またタブレットの場合には上端や下端からスワイプすると画面の下部に表示される横長のバーのことですね。ここにはさまざまな処理を実行するためのアイコンボタンが並びます。

アプリバーは、実はHTMLのタグだけで簡単に作ることができます。これは以下の様なタグを用意しておくだけいいのです。

<div data-win-control="WinJS.UI.AppBar">
    ……表示する内容……
</div>

<div>タグに、data-win-control="WinJS.UI.AppBar"という属性を用意するだけで、このタグがアプリバーとして認識されるようになります。data-win-controlというのは既に登場しましたが、Windows APIの独自コントロールを割り当てるための属性でした。アプリバーは、WinJS.UI.AppBarというオブジェクトとして用意されていることがわかりますね。

問題は、ここに用意するタグです。フライアウトなどと違い、アプリバーでは「何かタグを用意しておけばそれが表示される」という具合にはいきません。アプリバーに用意できるものは決まっています。それは以下の様な形で記述されたボタンのみです。

<button data-win-control="WinJS.UI.AppBarCommand">表示テキスト</button>

<button>タグに、data-win-control="WinJS.UI.AppBarCommand"を指定することで、このタグはアプリバーのボタンとして扱われるようになります。この他、data-win-optionsという属性を用意することで、このコントロール（ボタン）に関するオプション設定を行うことができます。

下のリスト欄に、実際にボタンを表示するタグ例を掲載しておきました。ここでは、こんな具合にタグのdata-win-optionsを記述してあります。

data-win-options="{icon:'help', label:'help', section:'global', type:'button'}"

見ればわかるように、オプションの設定内容を連想配列のテキストとしてまとめたものが値に指定されています。ここでは４つのオプションを使っています。これらはアプリバーのボタンで用いるもっとも基本的なオプションです。他にもオプションはいろいろと用意されていますが、とりあえずこの４つだけはしっかり使い方を覚えておきましょう。

・icon――表示するアイコン名です。これはWindows APIに用意されている中から選びます。（以下のWebページに全アイコン名があります）
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh770557.aspx

・label――ボタンに表示されるテキストです。

・section――そのボタンが利用できる対象範囲を示すものです。"selection"と指定すると、現在選択している対象にのみ処理を実行し、"global"と指定するとアプリ全体に処理を行います。


ボタンをクリックした時の処理は、通常のボタンと同じく、addEventListenerで"click"に関数をバインドすればよいでしょう。下に簡単な利用例のスクリプトも掲載しておきましたので、実際に試してみてください。アプリバーの右端に表示されるボタンをクリックすると処理が実行されます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※default.htmlへの追記

<div data-win-control="WinJS.UI.AppBar">
    <button id="appbar-btn1" data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{icon:'help', label:'help', section:'global', type:'button'}"></button>
</div>


※app.onactivatedに用意する記述

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.
            ApplicationExecutionState.terminated) {} else {}
        args.setPromise(WinJS.UI.processAll().then(function completed() {
            var button1 = document.getElementById("appbar-btn1");
            button1.addEventListener("click", doAppBarIcon1Click, false);
            }));
    }
}

※追加するイベント処理用関数
function doAppBarIcon1Click(event){ ……適当に用意……}