meter 要素

4.10.15 meter 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
ラベル付け可能要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント。しかし、子孫に meter 要素を入れることはできません。
コンテント属性:
グローバル属性
value - 要素の現在値
min - 範囲の下限
max - 範囲の上限
low - 低領域の上限
high - 高領域の下限
optimum - ゲージの最適値
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
interface HTMLMeterElement : HTMLElement {
           attribute double value;
           attribute double min;
           attribute double max;
           attribute double low;
           attribute double high;
           attribute double optimum;
  readonly attribute NodeList labels;
};

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

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

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

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

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

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

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

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

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

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

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

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

次の不等式が規定通りに成り立たなければいけません:

  • minimumvaluemaximum
  • minimumlowmaximum (low が指定されている場合)
  • minimumhighmaximum (high が指定されている場合)
  • minimumoptimummaximum (optimum が指定されている場合)
  • lowhigh (lowhigh の両方が指定されている場合)

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

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

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

ストレージ空間利用度: <meter value=6 max=8>6 ブロック使用中 (8 ブロック中)</meter>
投票率: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
チケット販売率: <meter min="0" max="100" value="75"></meter>

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

<p>グレープフルーツパイの半径は <meter value=12>12cm</meter>
で高さは <meter value=2>2cm</meter>です。</p> <!-- BAD! -->

代わりに、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 要素に単位を明示的に指定する方法はありません。しかし、title 属性に自由形式テキストで単位を指定することができます。

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

<dl>
 <dt>半径: <dd> <meter min=0 max=20 value=12 title="センチメートル">12cm</meter>
 <dt>高さ: <dd> <meter min=0 max=10 value=2 title="センチメートル">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>
<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=秒></meter>

ユーザーエージェントは、1 行目には "値: 60 のうち 23.2" と、2 行目には "秒" と表示されるツールチップを伴ったゲージを表示することになるでしょう。

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

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

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

low IDL 属性は、取得時においては、低境界を返さなければいけません。セット時においては、指定された値を浮動小数点数としての最良数値表現に変換しなければいけません。それから、low コンテント属性に、その文字列をセットしなければいけません。

high IDL 属性は、取得時においては、高境界を返さなければいけません。セット時においては、指定された値を浮動小数点数としての最良数値表現に変換しなければいけません。それから、high コンテント属性に、その文字列をセットしなければいけません。

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

labels IDL 属性は、該当の要素の label のリストを提供します。

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

<p>ディスク使用量: <meter min=0 value=170261928 max=233257824>233 257 824 バイト中、
170 261 928 バイト使用中</meter></p>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-meter-element