ITコラム

Connection Data Streaming Download Archiving Concept

プログラミングノウハウ

2017.03.03

#HTML入門

HTML【フォーム】14～進捗状況を示すプログレスバー（progress）

HTML5からの新要素にprogress要素があります。progress要素は、作業の進捗状況を示す要素でプログレスバーを表示します。
今回は、このprogress要素についてまとめたいと思います。

フォームについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. progress要素
2. プログレスバーの作成

1. progress要素

progress要素は、作業の進捗状況を示す要素です。
進捗状況をプログレスバーで表示します。
output要素とやmeter要素と同様に、データの送信は行わず、ただ表示することが目的の要素です。

meter要素と違って、ある時点の状況を表示するのではなく、ファイルのダウンロード状況など、動きのある進捗状況を表示する場合に使用します。

progress要素で作られるプログレスバーは、次のように表示されます。
（ロード時にプログレスバーが作動しますので、「プログレスバー確認」ボタンをクリックすると、リロードされて動きが確認できます。）

Loading : Loading… : 0％

使用する要素　：　<progress> ～ </progress>

progress要素の属性	value属性	完了した量デフォルト値は0.0 ～ 1.0
	max属性	トータルの量を指定
	form属性	親のform要素のid名を呼び出して関連付ける
	グローバル属性	id属性、class属性、title属性、style属性など

value属性とmax属性は、どちらも0以上の数値を使います。進捗状況を表示するという性質上、マイナスの数値は使いません。
value属性のデフォルト値は0.0 ～ 1.0ですので、小数の指定も可能です。

max属性を指定する場合は、value属性の値はmax属性値までとなり、max属性を指定しない場合は、value属性の値は1.0までとなります。
max属性は、0より大きい値を指定します。

▲目次へ戻る

2. プログレスバーの作成

●value属性とmax属性を指定すると、次のような表示になります。

0% （0%）
50% （50%）
100% （100%）
0%（不明）

上の３つはvalue属性を指定（固定）しているので、動きはありません。
１番下に表示されているプログレスバーは、 value属性値が取得できない状態の表示です。

上の表示に対するhtmlコードは、以下の通りです。

<label><progress value="0" max="100">0%</progress> （0%）</label>
<label><progress value="50" max="100">50%</progress> （50%）</label>
<label><progress value="100" max="100">100%</progress> （100%）</label>
<label><progress max="100">0%</progress>（不明）</label>

max属性は、全て100に指定しています。
value属性の値は、実際にはJavaScript等によって動的に取得しますが、ここでは、上から順番に0、50、100で指定しています（ですので、プログレスバーの動きがありません）。
１番下は、value属性の値が取得できない場合のプログレスバーの表示です。

<progress> ～ </progress>の間に、progress要素に対応していないブラウザ対策として、現在値と最大値をテキストで表示することが推奨されています。
progress要素に対応しているブラウザでは、このテキストは表示されません。
　
　
●JavaScriptを使うと、動きのあるプログレスバーになります。
（ボタンをクリックすると動きます。）

Loading : Loading… : 0％

上の表示に対するhtmlコードは、以下の通りです。

Loading : <progress id="prog" max="100" value="0">Loading...</progress>
 : <output id="outp">0</output>％
<input type="button" value="プログレスバー確認" onClick="location.reload(); return false;">

<script>
  let pbar = document.getElementById('prog');
  let ptxt = document.getElementById('outp');
  let pup = setInterval("upPrgrss()",100);
  function upPrgrss(){
    if(pbar.value<=pbar.max){
    pbar.value++;
    ptxt.value = pbar.value;
    }else{
    clearInterval(pup);
    }
}
</script>

▲目次へ戻る