meter 要素

4.10.17 meter 要素

カテゴリー
フロー・コンテンツ
フレージング・コンテンツ
ラベル付け可能なフォーム関連要素
この要素を使うことができるコンテキスト：
フレージング・コンテンツが期待される場所
コンテンツモデル：
フレージング・コンテンツ。ただし、子孫に meter 要素を入れてはいけない。
コンテンツ属性：
グローバル属性
value
min
max
low
high
optimum
form
DOMインタフェース：
interface HTMLMeterElement : HTMLElement {
           attribute float value;
           attribute float min;
           attribute float max;
           attribute float low;
           attribute float high;
           attribute float optimum;
  readonly attribute HTMLFormElement form;
  readonly attribute NodeList labels;
};

meter 要素は、既知の範囲にある数量や、割合を表すような値を表します。例えば、ディスク使用量、検索結果の関連性、特定の候補者を選定した投票人口の割合です。

これは、ゲージという名でも知られているものです。

meter 要素は、（プログレスバーといった）進捗を示すために使うべきではありません。この役割に対しては、HTML は別に progress 要素を用意しています。

meter 要素はまた、任意の範囲の数値を表しません。例えば、最大値が分からない以上、重さや高さをレポートするためにこの要素を使うのは適切ではないでしょう。

この要素で表されるゲージのセマンティクスを決める属性が 6 つあります。

min 属性は範囲の下限を表し、max 属性は上限を表します。value 属性は、"計測済みの" 値としてゲージに指し示す値を指定します。

残りの 3 つの属性は、ゲージの範囲を "低", "中", "高" に分割し、どの部分が "最適" な部分なのかを指し示すために使うことができます。low 属性は、"低" と見なす範囲を指定します。high 属性は、"高" とみなす範囲を指定します。optimum 属性は、"最適" である位置を指定します。もし optimum 属性が "高" の値より高いなら、それより高い値が良いことを示します。optimum 属性が "低" より低いなら、それより低い値が良いということを示します。そして、必然的に、その間の値なら、高でも低でもない値が良いということを示します。

オーサリング要件： value 属性は必須です。value, min, low, high, max, optimum が存在する場合、それらの値は妥当な浮動小数点数でなければいけません。

この属性の値には、さらに制約があります：

value を、value 属性の数値とします。

min 属性が指定されているなら、minimum を、その属性の値とし、そうでなければ 0 とします。

max 属性が指定されているなら、maximum を、その属性の値とし、そうでなければ 1.0 とします。

次の不等式が成り立たなければいけません：

  • minimum ≤ value ≤ maximum
  • minimum ≤ low ≤ maximum (low が指定されている場合)
  • minimum ≤ high ≤ maximum (high が指定されている場合)
  • minimum ≤ optimum ≤ maximum (optimum が指定されている場合)
  • low ≤ high (low と high の両方が指定されている場合)

最小値も最大値も指定されなければ、その範囲は 0 ～ 1 と見なされます。そのため、値はその範囲内でなければいけません。

ウェブ制作者は、meter 要素をサポートしていないユーザーエージェントのユーザーのために、この要素のコンテンツの中に、ゲージの状態を表すテキストを入れることが推奨されます。

次の例は、3 つとも 4 分の 3 となるゲージを示しています：

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>

次の例は、この要素を不適切な使い方を示しています。なぜなら、範囲を与えていないからです。(デフォルトの最大値は 1 となるので、これらのゲージはいずれも上限を超えてしまいます。):

<p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->

代わりに、meter 要素を使わないか、もしくは、別のパイと比較するという文脈で、寸法をコンテンツ内に入れて、meter 要素に範囲を定義します：

<p>The grapefruit pie had a radius of 12cm and a height of
2cm.</p>
<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

meter 要素に単位を明示的に指定する方法はありません。しかし、自由形式テキストの title 属性に単位を指定することができます。

上記の例を拡張して単位を表すようにすることができます： 

<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
</dl>

ユーザーエージェントの要件： ユーザーエージェントは、浮動小数点数値パース規則を使って、min, max, value, low, high, optimum 属性をパースしなければいけません。

それから、ユーザーエージェントは、次の通り、これらの数値を使って、ゲージ上の 6 ヶ所に相当する値を取り出さなければいけません。（これらが評価される順番は重要です。いくつかの値は、それより前の値を参照するからです。）

最小値

min 属性が指定され、その属性値をパースして値が得られたなら、その値が最小値になります。そうでなければ、最小値は 0 になります。

最大値

max 属性が指定され、その属性値をパースして値が得られたなら、その値が最大値になります。そうでなければ、最大値は 1.0 となります。

最大値が最小値より小さければ、最大値は最小値と同じになります。

実質値

value 属性が指定され、その属性値をパースして値が得られたなら、その値が実質値となります。そうでなければ、実質値は 0 となります。

実質値が最小値より小さければ、実質値は最小値と同じになります。

一方、実質値が最大値より大きければ、実質値は最大値と同じになります。

低境界

low 属性が指定され、その値がパースできたなら、その値が低境界になります。そうでなければ、低境界は最小値と同じになります。

低境界が最小値より小さければ、低境界は最小値と同じになります。同様に、低境界が最大値より大きければ、低境界は実質的に最大値となります。

高境界

high 属性が指定され、その属性値をパースして値が得られたなら、その値が高境界になります。そうでなければ、高境界は最大値と同じになります。

高境界が低境界より小さいなら、高境界は実質的に低境界と同じになります。同様に、高境界が最大値より大きければ、高境界は実質的に最大値となります。

最適点

optimum 属性が指定され、その属性値をパースして値が得られたなら、その値が最適点になります。そうでなければ、最適点は、最小値と最大値の中間点になります。

最適点が最小値より小さければ、最適点は実質的に最小値と同じになります。同様に、最適点が最大値より大きければ、最適点は実質的に最大値となります。

次の不等式はすべて真となります：

  • 最小値 ≤ 実質値 ≤ 最大値
  • 最小値 ≤ 低境界 ≤ 高境界 ≤ 最大値
  • 最小値 ≤ 最適点 ≤ 最大値

ゲージ領域に対するユーザーエージェントの要件：最適値が低境界または高境界またはその間のどこかに等しければ、ゲージの高低境界の間の領域は、最適領域として扱われなければいけません。そして、低と高の部分がもしあれば、それは準最適であるとして扱われなければいけません。そうでなければ、もし最適値が低境界より小さければ、最小値と低境界の間の領域は、最適領域として扱われなければいけません。低境界と高境界の間の領域は、準最適領域として扱われなければいけません。そして、高境界と最大値の間の領域は、非最適領域として扱われなければいけません。最後に、最適値が高境界より高ければ、その状況は逆転します。高境界と最大値の間の領域は、最適領域として扱われなければいけません。高境界と低境界の間の領域は、準最適領域として扱われなければいけません。そして、残った低境界と最小値の間の領域は、非最適領域として扱われなければいけません。

ゲージ表示に対するユーザーエージェントの要件： ユーザーに meter 要素を表示するとき、ユーザーエージェントは、最小値と最大値からの相対的な位置、そして実質値とゲージの 3 つの領域の間の関係を示すべきです。

次のマークアップは： 

<h3>Suggested groups</h3>
<menu type="toolbar">
 <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
</menu>
<ul>
 <li>
  <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
     <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
  <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
  <p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
 </li>
 <li>
  <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
     <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
  <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
 </li>
 <li>
  <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
     <a href="/group/mozilla.dev.general/subscribe">join</a></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
 </li>
</ul>

次の様にレンダリングされるでしょう：

With the <meter> elements rendered as inline green bars of varying lengths.

ユーザーエージェントは、title 属性の値と他の属性の値を結合して、文脈依存のヘルプや実質値を詳説するインライン・テキストを提供することができます。

例えば、次の例は： 

<meter min=0 max=60 value=23.2 title=seconds></meter>

... ユーザーエージェントは、一行目には "Value: 23.2 out of 60." と、二行目には "seconds" と表示されるツールチップを伴ったゲージを表示することになるでしょう。

form 属性は、該当の meter 要素をそのフォーム・オーナーに明示的に結び付けるために使います。

value IDL 属性は、取得時においては、実質値を返さなければいけません。セット時においては、指定された値を浮動小数点数として最も適した数値に変換しなければいけません。それから、value コンテンツ属性に、その文字列をセットしなければいけません。

min, max, low, high, optimum IDL 属性は、同じ名前の対応するコンテンツ属性を反映しなければいけません。

labels 属性は、この要素の label のリストを提供します。form IDL 属性は、この要素の forms API の一部です。

次の例は、どうやってゲージをローカライズまたは印刷テキストにフォールバックするのかを示しています。

<p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
out of 233 257 824 bytes available</meter></p>

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-meter-element