meter タグを正しく使おう
HTML5 ではいくつかの便利な新しい要素が導入されている。これらの要素でページに、もっとたくさんの意味を加えることができるようになる。これらの新しい要素には、time, mark があるが、ここでは別の要素を紹介しよう。meter だ。これはインライン要素だから、ヘッダーや段落など、ほとんどの要素の中に入れて使うことができる。
仕様には何て書かれているの？
meter 要素は、規定の範囲内の数量や、小数値を表します。例えば、ディスク使用量、検索結果の関連性、特定の候補者に投票した投票人口の割合です。
この meter タグについて初めて読んだとき、すぐに、それはプロフィールのページに使えると思った。定義リストにマークアップすれば、例えば、身長や体重や、年齢にも使えるかもしれないと思ったんだ。でも、仕様の3行目に、こう書かれている：
meter 要素は任意の範囲の数値まで表すわけではありません。例えば、最大値が分からない以上、重さや高さをレポートするためにこの要素を使うのはまちがいでしょう。
私のアイデアは使えなかった。この仕様の定義では、規定の範囲内の数量
ということを強調している。いくつかの利用例を見ていこう。しかし、私は今でもスポーツ選手のプロフィール・ページであれば使えると思っている。
属性
meter タグには、6 つの属性を使うことができる：value, min, max, high, low, optimum だ。後述するが、ウェブ制作者はこれらを正しく使うことが大事だ。
- Value
- これがパースされるものだ。つまり実際の値となるのだ。もし value 属性を使わなかったら、このタグの中にある最初の数字が、その値になる：
<meter> 2 out of 10</meter>。もし実数が使われていなかったら、その値はゼロになる。 - Min
- 最小の許容値だ。min 属性がなければ、最小値はゼロと見なされる。つまり、この属性が指定されていなければ、この属性の値は 0 になるということだ。
- Max
- 最大の許容値だ。最大値が最小値より小さければ、その最小値は最大値として使われる。もしこの属性が指定されなかったら、この属性の値は 1 だ。しかし、コンテンツの中にパーセンテージ記号があれば、最大値を特定することが可能だろう。この場合は、その最大値は 100% となるだろう。
- Low
- これは、値の範囲の中で低い部分だとみなす値だ。この値は、high 属性の値に等しいか、または、それより小さくなければならない。また、low の値が min の値より小さければ、low の値は min の値と同と見なされる。
- High
- これは、値の範囲の中で高い部分だとみなす値だ。high の値が low の境界値より小さければ、high の値は low の値と同じと見なされる。high の値が max の値より大きければ、high の値は max の値と同じと見なされる。
- Optimum
- これは、最適と見なされる値だ。この値は、min と max の間のどこかでなければいけない。high 属性より大きくてもよい。
例を見てみよう
投票や評価ツール
<p>Your score is: <meter>2 out of 10</meter></p>min 属性と max 属性を入れれば、これに、もっとたくさんの意味を込めることができる。
<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p><p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>属性を使わない場合
meter タグには必ずしも属性を使わなければいけないというわけではない。こんな風にも使える。
<meter>80%</meter>最大値は 100% になるに決まっているからだ（プラスアルファ 10 みたいなものを入れてるなら、その限りではないが 
）。また、分数を使うこともできる。こうすれば、範囲を表す値が、この要素の中に入れられたことになる。
<meter>3/4</meter>実例
クリスマス・カレンダー／カウントダウン
<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>title 属性を使って単位を指定できるということに注目してほしい（“センチメートル” や “lbs” といったものが使えるのだ）。
Just Giving
募金のウェブサイト Justgiving でも、meter が使えるだろう。
例えば、このページなら、こうして使うのだ：
<dl>
<dt>Target</dt>
<dd><meter min="145" value="145" title="pounds">£145</meter></dd>
<dt>Amount raised so far</dt>
<dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145" title="pounds">£145</meter></dd>
</dl>間違った使い方
空のタグ
もし、こんな風に使ったら：
<meter min="0" max="100" value="75"></meter>
ページには何も表示されないだろう。仕様にはこう書かれている：
値を与えるには、それをコンテンツとして要素の中に入れることが推奨されます。
つまり、このタグのコンテンツに何か入れる必要があるが、それが数字である必要はない。仕様に書かれているこの例が参考になる：
<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
この例は、スクリーン上で次のように表示するために使うことができるだろう、と書かれている：
前述の通り、最大値がない限り、体重や身長に使うのは間違いだ。仕様にはこんな例が書かれている：
<p>そのグレープフルーツ・パイの半径は <meter>12cm</meter> で、高さは <meter>2cm</meter> だった。</p> <!-- ダメ！ -->
meter 要素を使わないか、もしくは、meter 要素に範囲を定義し、他のパイと比較するという文脈の中で寸法を入れるのが良いだろう。
<p>そのグレープフルーツ・パイは、半径が 12cm で高さが 2cm だった。</p> <dl> <dt>半径: <dd> <meter min=0 max=20 value=12>12cm</meter> <dt>高さ: <dd> <meter min=0 max=10 value=2>2cm</meter> </dl>
上記は meter タグの正しい使い方ではあるが、どうやってグレープフルーツの最大の高さや半径が分かるというのだろうか？私は、ここでは meter タグを使いたいところだが、これであれば、私なら、定義リストだけを使って情報を表示させるだろう。
ブラウザーのサポート
meter タグは、Safari 4, Firefox 3.5, Chrome 2, Opera 9.64 であれば動作する。IE 6, 7, 8 では、次の JavaScript が必要だ（HTML5 を古いブラウザーでうまく動かす方法に関する Remy の記事を見てほしい）。
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->meter はインライン要素なので、CSS で特別なことをする必要はない。
まとめ
もしこのように使ってしまったら、
<meter value="1000" min="0" max="500">100%</meter>明らかに矛盾が生じる。ここではちょっとふざけたことをしているが、実際のところ値は 1000 だというのに、ユーザーには “100%” と画面に表示されるのだ。ウェブ制作者は、このおもしろくてセマンティックな meter タグを、上手に、セマンティックに、そして正しく使わなければいけないのだ。
この要素の属性はかなり紛らわしいが、仕様にはかなり詳しく書いてある。単独の身長や体重にこれらの属性を使えないようにされたことで、これらの属性には抜け目ができてしまったかもしれないと、私は思っている。しかし、私は、meter タグが多くのアプリケーションやウェブページで使われることも分かっている。たぶん、JavaScript を使えば、ライブでグラフやチャートを生成できるだろう（canvas も使って）。
最後に、もしかして、meter はマイナスの値にも使えるのだろうか？例えば、気温が -10 度から 5 度の間だったなら、これを meter でマークアップできるのだろうか？ぜひ、あなたの意見を聞かせてほしい。