[56] 数量や割合のゲージを表示しよう meter要素

<meter>要素は、特定の範囲内でどの分量かを表示する要素です。
こんなかんじね。20%
<meter>要素は、残念ながらIEだけ未対応。その他のブラウザは Edge も含め対応しています。

これもHTML5 からの新要素。
<output>と同じく、結果の値を送信するわけでなく、ただ表示するだけの役目です。
全体の範囲の中での現在の分量というか位置を示し、これは「ゲージ」と言うそうです。

<meter>要素は、特定の範囲がハッキリしないモノに使うのはNGなんだって。
あと、「進捗（しんちょく）状況」を示す「プログレスバー」場合は、次回の <progress>要素を使うべきで、この<meter>を使うのはNGだそうです。

<meter>は、満杯の量が決まっている中での、今の量を表示するようですね。
例えば、こんな場合に使えるようです。

• ディスクの使用量
• 投票率
• 検索結果の関連性（的中率？）
• ゲームのキャラのパワー残量
• 達成率（寄付金集めとか、出席日数とか、ローン残高とか）

使用する要素	<meter> 〜 </meter>

<meter>の属性	value：必須。現在の位置を表す
	min：最小値を指定
	max：最大値を指定
	low：低い値の境界点を指定
	high：高い値の境界点を指定
	optimum：最適な値を指定
	form：親の<form>のID名を呼び出して関連づける
	グローバル属性

まずは使ってみよう（value・min・max属性）

最低限必要な属性は value属性だけ。
また、未対応のブラウザのために<meter>と</meter>の間に「特定範囲内の位置」がわかるテキストを入れておきます。対応ブラウザには、このテキストは表示されません。

●サンプル1

＊属性がまったく何も無い状態。value属性のデフォルトは「0」なので、
このようにゲージを表さない、バーだけの状態に。

0%

<meter>0%</meter>
<!--Valueのデフォルトは0ですが、略さず value="0"って書いたほうが良いそうです-->

＊value属性で表示するゲージの値を指定。

20%

<meter value="0.2">20%</meter>

value値を「0.2」としてるのは、
min属性のデフォルトが「0」、max属性のデフォルトが「1」だから。
20％にしたいなら、0.2と指定します。
このように、属性には小数点以下の数値も使えます。

＊じゃ、min属性、max属性を指定してみましょう。

40%

<meter min="0" max="100" value="40">40%</meter>

＊上の例だとmin属性は「0」なので省略しても同じこと。
では、min属性にマイナスの値を入れてみましょう

-50%

<meter min="-100" max="100" value="-50">-50%</meter>

属性にはマイナスの数値も使えます。

縦にもできる。CSSの -moz-orientプロパティ

ちなみに、CSSの -moz-orientプロパティを使うと、<meter>要素を縦位置にする事もできます。
moz系（Firefox）だけ実装で、あんまり使えないけど...（Firefox で見てね）

40% 70% 100%

<meter class="vertical" min="0" max="100" value="40">40%</meter>
<meter class="vertical" min="0" max="100" value="70">70%</meter>
<meter class="vertical" min="0" max="100" value="100">100%</meter>

<style>
.vertical {
    -moz-orient: vertical; /*← horizontalは横(デフォルト)*/
    width: 20px;
    height: 80px;
    }
</style>

低・高・最適領域（low・high・optimum属性）

low属性は「低い領域の上限」。high属性は「高い領域の下限」を指定します。
optimum属性は「最適な領域のどこか1点」を指定。
図説するとこんなかんじ ↓

low属性のデフォルトはmin属性と同じになります。
high属性のデフォルトはmax属性と同じに。
optimum属性のデフォルトはminからmaxまでのど真ん中になります。
value属性以外ぜんぶ省略したら、minは0、maxは1なので、lowは0、highは1、optimumは0.5になります。

optimum属性なんですが、コレ、ピンポイントで1ヶ所を指定するわりには、
プレビューで反映されるのは、このポイントがある領域全体なんです。

optimum属性がある領域は、最適領域（optimum）として扱われ、
ゲージの色は、グリーンで表示されます。 100%
この最適領域の隣の領域は、準最適領域（suboptimal）として、
ゲージの色は、イエローで表示されます。 100%
このまた隣の最適領域から遠い領域は、非最適領域（less good）として、
ゲージの色は、レッドで表示されます。 100%

って読んだだけではアレなので、サンプルで見ていきましょう。

●サンプル2
このサンプルでは、optimum属性を使いません=デフォルト(ど真ん中)です。
low属性・high属性の位置によって、「最適領域」「準最適領域」「非最適領域」が変わるのを見てみますよ。

low属性・high属性を指定しないと、こんなかんじ。全部同じ色です。

10%
50%
90%

<meter max="100" value="10">10%</meter><br>
<meter max="100" value="50">50%</meter><br>
<meter max="100" value="90">90%</meter><br>

上の例だと lowは0、highは100になるため、ゲージ全体が1領域になってます。（領域が分けられてない）この場合 optimumは「50」なので、この50がある「最適領域」は全体ってことになり、3本とも全部グリーンになるわけです。

low属性を20、high属性を80に指定してみた。バーの色が変わっていますね。

10%
50%
90%

<meter max="100" low="20" high="80" value="10">10%</meter><br>
<meter max="100" low="20" high="80" value="50">50%</meter><br>
<meter max="100" low="20" high="80" value="90">90%</meter>

low と high で領域が3つに分けられました。
この場合 optimumは「50」なので、この50がある「最適領域」はグリーンに。
その両隣の、低い領域（0〜20）と高い領域（80〜100）は「準最適領域」になったのでイエローで表示されました。

lowを60に上げてみました。highは80のまま。

10%
20%
50%
80%
90%

<meter max="100" low="60" high="80" value="10">10%</meter><br>
<meter max="100" low="60" high="80" value="20">20%</meter><br>
<meter max="100" low="60" high="80" value="50">50%</meter><br>
<meter max="100" low="60" high="80" value="80">80%</meter><br>
<meter max="100" low="60" high="80" value="90">90%</meter>

もうお分かりですよね。 optimumはデフォの「50」。コレがある領域が最適領域なので、低い領域（1〜60）が最適領域になりました。
その隣の中間の領域が準最適領域でイエローに、そのまた隣の高い領域は「非最適領域」になったのでレッドに色分けされています。

こんどは逆に、lowを20、highを40と下げてみました。

10%
20%
50%
80%
90%

<meter max="100" low="20" high="40" value="10">10%</meter><br>
<meter max="100" low="20" high="40" value="20">20%</meter><br>
<meter max="100" low="20" high="40" value="50">50%</meter><br>
<meter max="100" low="20" high="40" value="80">80%</meter><br>
<meter max="100" low="20" high="40" value="90">90%</meter>

さっきのと逆に、optimumのデフォの「50」がある領域が最適になりましたね。

optimum属性で最適領域を決めよう

サンプル2で、デフォルトがど真ん中になるのがわかった optimum属性。
これとlow属性・high属性を指定すれば、グリーン、イエロー、レッドの領域を自由に決められるというわけです。

最適な領域って、<meter>を使う状況によって変わりますよね。
投票率とかなら、多いほうがいいので、高い領域を最適領域に指定しますね。
逆に少ないほうがイイもの（ディスクの使用量とかローン残高とか）もありますね。
最適領域を自由に指定するために optimum属性があります

●サンプル3
このサンプルは、全部 min=0、max=100、low=20、high=80にしています。

optimum属性を90にしてみた。

10%
20%
50%
80%
90%

<meter max="100" low="20" high="80" optimum="90" value="10">10%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="20">20%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="50">50%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="80">80%</meter><br>
<meter max="100" low="20" high="80" optimum="90" value="90">90%</meter>

optimum属性で指定した「90」がある領域が最適に、そこから離れるほど、イエロー、レッドと色が変わっていくのがわかりますね。

optimum属性を10にしてみた。

10%
20%
50%
80%
90%

<meter max="100" low="20" high="80" optimum="10" value="10">10%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="20">20%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="50">50%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="80">80%</meter><br>
<meter max="100" low="20" high="80" optimum="10" value="90">90%</meter>

今度は、optimum属性で指定した「10」がある領域が最適になりました。

他のフォーム部品と組み合わせてみた

<meter>要素も、<output>のように他のフォーム部品と組み合わせる使い方を考えてみました。
ついでに<output>でテキストも出してみました。<output>って、こんな時に便利ですね。

●サンプル4
数値の入力部品<input type="number">と組み合わせています。

出席日数ゲージ： 0days：

0

今月の出席日数を入力してください→ 日
（0〜22日で入力してください）

「いいね！」などのメッセージは<output>要素で表示しています。
HTML & JavaScript はこのようになっています。

<script> 
function days(ctrl){	
// まず、meter のための指定
	var gage = document.getElementById('mtr1');
	gage.value = ctrl.value;
// ココから下は output のための指定
	var comment = document.getElementById('cmnt');
	if (ctrl.value <= 9) {
		comment.value = "少な。ダイジョウブ？";
	} else if (ctrl.value >= 10, ctrl.value <= 17) {
		comment.value = "まあまあ";
	} else if (ctrl.value >= 18, ctrl.value <= 22) {
		comment.value = "いいね！";
	} else {
		comment.value = "0〜22日までを入力してください";
	}
}
</script>
<!--ココからフォームの指定-->
<form oninput="days(yourDays)">
<p>
出席日数ゲージ：
<meter id="mtr1" value="0" min="0" max="22" low="10" high="17" optimum="22">0days</meter>：
<output id="cmnt">0</output>
</p>
<p>
今月の出席日数を入力してください→ 
<input type="text" name="yourDays" placeholder="日数を入力" size="10"> 日<br>
（0〜22日で入力してください）
</p>
</form>

●サンプル5
プッシュボタンの部品 <input type="button">と組み合わせています。
あんまり意味ないけど、コレで見ると、ゲージの色が変化する箇所がわかりやすいですね。

： 0push：

0

push ( Max=30 )

HTML & JavaScript はこのようになっています。

<script>
  function pushButton() {
    var pus = document.getElementById('pu2');
    pus.value++;
//「++」は ↑ 1ずつ加えるというコト
	var outPut = document.getElementById('rpr');
	outPut.value = pus.value;
  }
</script>

<input type="button" value="PUSH" onclick="pushButton()">：
<meter id="pu2" value="0" min="0" max="30" low="10" high="20" optimum="30">0push</meter>：
<output id="rpr">0</output> push ( Max=30 )

次回予告

次回は「プログレスバー」を表示するための <progress>要素について。今回の <meter>が静的なゲージを表すのに対して、<progress>は動的な進捗状況を表します。