メニューとコマンド

これからの時代、HTML5を用いたWebアプリケーションというものが出てくるでしょう。

そういったときに、ユーザーが実行出来るコマンドリストとか、メニューなどが必要になります。

menu要素

まずそういったメニューを作るのが、menu要素です。

menu要素はコマンドリストを表し、いくつかの種類があります。

それはtype属性で決定することができます。

"context"の場合、このmenu要素はコンテキストメニューになります。これは、一般的に右クリックしたりすると出現するあのメニューです。

実際にコンテキストメニューとして利用するには、コンテキストメニューを表示させたい要素にcontextmenu属性というグローバル属性で、menu要素のidを指定します。

type属性が"toolbar"の場合、それはツールバーです。これはいいですね。

type属性が省略された場合、「ただの項目リスト」になります。

menu要素の子に、コマンドが入るのですが、いくつかあります。やはりユーザーが操作できるものということで、まず挙げられるのはinput要素やbutton要素でしょう。

また、li要素をmenu要素の子として利用することもできます。リストなのでちょうどいいですね。li要素を使う場合、それしか入れられません。

これを利用して、例えばこんなツールバーを作ってみます。

<menu type="toolbar">
  <li>
    <menu label="aaa">
      <li><button>aaa-1</button></li>
      <li><button>aaa-2</button></li>
      <li><button>aaa-2</button></li>
    </menu>
  </li>
  <li>
    <menu label="bbb">
      <li><button>bbb-1</button></li>
      <li><button>bbb-2</button></li>
    </menu>
  </li>
  <li>
    <button>ccc</button>
  </li>
</menu>

これを実際に表示するとこうなります。

現在のところ対応しているブラウザはありませんでした。今から使いたければCSSなどを使って表示を整えるとよいでしょう。

そして、構造を見てみましょう。menu要素の中には3つのli要素です。これが、ツールバーの各項目を表しています。

そして、li要素の中にはさらにmenu要素がネストしています。ここで登場したlabel属性は、そのメニューがサブメニューであることを表し、そのサブメニューの名前になります。

各サブメニューの中にはbutton要素でコマンドが書いてありますね。

メニューの書き方

それでは、もっと具体的にコマンドの書き方を解説していきます。

まず基本的なことは、menu要素の中に列挙するということですね。

さっきはli要素を使いましたが、実はそれは見やすさのためで、なくても変わりません。したがって、次のように書けます。

<menu type="toolbar">
  <menu label="aaa">
    <button>aaa-1</button>
    <button>aaa-2</button>
    <button>aaa-2</button>
  </menu>
  <menu label="bbb">
    <button>bbb-1</button>
    <button>bbb-2</button>
  </menu>
  <button>ccc</button>
</menu>

こう書くとすっきりしました。

また、セパレータを書くことができます。これはhr要素です。書くとそこにセパレータができます。セパレータとは、メニューで項目を区切る横線のことです。

menu要素はlabel属性があるとサブメニューとなりましたが、label属性をつけずに書くとサブメニューではなくなります。

「前後と区別されるメニュー」ということで、前後にセパレータが入ります。ただし、サブメニューにはならないので同じレベルで並びます。

実は、このような「前後と区別されるメニュー」の役割を持つのは、menu要素の他に、select要素があります。select要素なので、もちろん子にoption要素を使えます。option要素がどんな役割を持つかは後述です。

また、ちなみに、select要素中ではhr要素が使えないので、select要素中でセパレータを使いたい場合に特別な形があります。それは、<option value="" disabled>---</option>という形です。valueを空文字列にし、disabled属性をつけてあげて、中にいくつかのハイフンを入れてあげるとセパレータになります。

また、select要素中では、optgroup要素にlabel属性を付けてやることで、menu属性同様サブメニューを表せます。

コマンドの定義

以上がツールバーの大枠です。次に、メニューを構成するコマンドを定義する要素を紹介します。コマンドを定義するとは、要するにコマンドを作るということです。

今までに出てきたのはinput要素・button要素ですが、ここで新しい要素を紹介します。それがcommand要素です。その名のとおり、コマンドを定義するためにあるような要素ですね。

command要素1つで1つのコマンドを定義するので空要素です。コマンド名をlabel属性（必須。後述の例外あり）で付けます。

そしてtype属性を持ちます。3つの値があり、"command"という通常のコマンド定義状態の他に、"checkbox","radio"という値を指定することができます。これらはそれぞれチェックボックス。ラジオボックスという意味で、input要素と同じですね。これらは選択（クリックなど）された場合に、チェックボックスやラジオボタンと同じように選択、解除できます。複数の状態から1つを選ぶコマンドのときに"radio"を使うなどの使い道があります。ちなみに、type属性がない場合（デフォルト）は"command"の動作になります。

また、論理属性のdisabled属性を持ちます。これがあると、そのコマンドは無効となり選択できません。

同じく論理属性のchecked属性があります。これは、type属性が"checkbox"または"radio"のときしか使えず、input要素のchecked属性と同じです。

また、"radio"の場合には、radiogroup属性を指定します。radiogroup属性に同じグループ名が指定されているcommand要素（type="radio"）のうち、1つしか選択されません。input要素（type="radio"）でいうところのname属性ですね。

さらに、title属性はグローバル属性ですが、command要素の場合は、使う場合はそのコマンドの説明ということになります。画面に表示されるかもしれません。

最後に、icon属性があります。それは、そのコマンドのアイコンのURLを表します。省略された場合アイコンは無いということになります。

ちなみに、command要素がクリックされたら何が起こるかというのは、HTMLでは記述しません。これは、input要素（ただのボタンの場合）やbutton要素（ただのボタンの場合）も同じです。それはJavaScriptなどのスクリプトの範疇です。HTML4のときはこんなスクリプト用の要素はありませんでしたから、HTML5がWebアプリケーションに適しているということが分かります。

さっきのメニューをcommand要素を使って書き直すとこんな感じになります。

<menu type="toolbar">
  <menu label="aaa">
    <command label="aaa-1">
    <command label="aaa-2">
    <command label="aaa-3">
  </menu>
  <menu label="bbb">
    <command label="bbb-1">
    <command label="bbb-2">
  </menu>
  <command label="ccc">
</menu>

ちなみに、command要素はもうひとつcommand属性を持つことができます。これは特別な属性で、この属性がある場合は他の属性は一切指定できません。

このcommand属性には、他の要素のidを指定してやります。すると、そのidの要素のコマンドと同じ意味になります。

例えば、先のサンプルに次のように変更を加えます。

<menu type="toolbar">
  <menu label="aaa">
    <command label="aaa-1">
    <command label="aaa-2" id="aaa2">
    <command label="aaa-3">
  </menu>
  <menu label="bbb">
    <command label="bbb-1">
    <command label="bbb-2">
  </menu>
  <command label="ccc">
  <command command="aaa2">
</menu>

下の方に、command="aaa2"というcommand要素が追加されました。この要素は、idがaaa2というコマンド（上のほうにid="aaa2"というのが追加されたコマンドがあります）と同じになります。

つまり、このコマンドをクリックすると、上のid="aaa2"のコマンドをクリックしたのと同じになります。離れたところに同じコマンドを用意したい場合などに便利ですね。

ちなみに、このコマンドはその親コマンドに全て従うので、command属性がある場合、他の属性は持てません（上で必須のlabel属性の例外といったのはこのことです）。

また、idをつけるのは、command要素以外の要素（inputとか、あと後述の要素）でも構いません。

その他の要素によるコマンド

コマンドを定義するのはcommand要素だけであはりません。さっきのinputやbuttonの他にもあります。

そこでまず、a要素によるコマンドを紹介します。

command要素のlabel属性にあたるものは、a要素の中身になります。<a href="…">あああ</a>の場合、そのラベル（コマンド名）は「あああ」になります。

また、a要素の中にimg要素があれば、その画像をアイコンとして扱います。

コマンドといってもa要素ですから、クリックするとリンク先に移動するというただのリンクができます。

それならコマンドなんて大層な名前をつけなくてもいい気がしますが、そうはいきません。menu要素の中では、コマンドや、さっきのselectとかのようにメニューの大枠を構成するもの以外は無視されるからです。

そしてbutton要素についても、ラベルやアイコンの決め方はa要素と同様です。実に楽ですね。ただ、これはJavaScriptなどを併用しないと、クリックしても何も起きません。

続いてinput要素ですが、これはcommand要素と同様に、type属性によって"checkbox","radio"が使用可能です。そしてcommand要素のlabel属性にあたるものは、value属性です（ただしlabel要素がある場合は、label要素の子の文字列となります）。

その他に、input要素がボタンの場合（type属性が"submit","reset","image","button"）もコマンドを定義します。アイコンは、typeが"image"のときのみその画像となります。

そして、次に登場するのがoption要素です。これは当然、先述のselect要素の子としてしか使えません。

option要素は、command要素のtype="checkbox"か"radio"にしかなりません。select要素にmultiple属性があれば複数選択できるので"checkbox",なければ1つしか選択できないので"radio"です。

コマンド名は、label属性があればそれ、無ければoption要素の子のテキストです。

ついでに、accesskey属性（グローバル属性）を持つ要素は、全てコマンドを定義することができます。

ただ、変な要素に設定しても特に意味はないことでしょう。