[57] プログレスバー(進捗状況)を出そう <progress>

最終更新日:-0001年11月30日  (初回投稿日:2013年10月29日)

<progress>要素作業の進捗状況を示す要素で「プログレスバー」を表示します。
<output><meter>と同じく 表示をする 役目。これもHTML5 からの新要素です。

<meter>と違って、静的な現在の状況を示すのではなく、ページやファイルのロード状況とか、ファイルのアップロードの状況などの、動的な進捗状況を示すのに使います。
Flashや jQueryなどで作っていたプログレスバーが、HTML の要素で作れるようになった…ということみたいです。

こんなかんじ。

Loading : Loading... : 0

*これは実際のページのロードに連動してません。動きを見せるために 1〜100までカウントしてるだけ。

使用する要素 <progress> 〜 </progress>
<progress>の属性 value:完了した量を表す。デフォルトは0.0〜1.0
max:トータルの量を指定
form:親の<form>のID名を呼び出して関連づける
グローバル属性

value属性と max属性の約束事

value属性と max属性、どちらも0以上の数値を使います。マイナスはNG。進捗状況だからね。
value属性のデフォルトは0.0から1.0。小数もOKってことね。
max属性があれば、value属性の値も max属性の値まで。逆にmax属性が無ければ、maxの値は1.0。
max属性は、0より大きい値でなければダメ(0じゃダメ)。

●サンプル1
静的なサンプルですが、value属性と max属性の指定によるプレビューです。

max値は全部 100にしています。
value値(これは実際には JavaScript によって変動するのですが)は、
上から、0、50、100。4番目は value属性が無い(または取得できない)状態のサンプルです。




<label ><progress value="0" max="100"><span>0</span>%</progress> (0%)</label >
<label ><progress value="50" max="100"><span>50</span>%</progress> (50%)</label >
<label ><progress value="100" max="100"><span>100</span>%</progress> (100%)</label >
<label ><progress max="100"><span>0</span>%</progress>(未確定)</label >

<progress>〜</progress>の間に、未対応ブラウザでも進捗を把握できるように、現在値と最大値をテキストで表示する事が推奨されてます。
<progress>に対応しているブラウザでは、この内容は表示されません。

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

ちなみに、<meter>要素と同じように、CSSの orientプロパティを使うと<progress>要素を縦位置にする事もできます。moz系(Firefox)だけで全然実用性無いけど。(firefox で見てね)

50% unknown

で、実際の具体的な使い方は…プログラマーのかたにお任せで〜す ヽ(´ー`)ノ

JavaScript でプログレスバーを動かすだけなら私でもデキタのですが、
ファイルの「読み込み済みの数値」を JavaScript で取得するのを、色々調べたけど分からず。
今日のところは潔く諦めました(未消化でゴメン!)
ActionScriptの「 _root.getBytesLoaded() 」みたいなのが JavaScript にもあると思ったんですが。あるの? あるよね…

プログレスバーを動かす サンプルコード っていうのが、W3Cの<progress>のページにありましたので、一応貼っときます。(具体的な使い方については…プログラマーにお任せです)

*この例では updateProgress() メソッドを、同じページの「別コード」から呼び出せば、タスクの進捗に従って、プログレスバーを更新する、と説明されています。この「別コード」ってのが欲しいのですが。。。

<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>

おまけサンプル

ということであんまり役に立たないけど、冒頭の <progress>を javaScriptで動かしてみたサンプルのソースを一応書いとくね。value値を 1ずつ足しただけ。<output>要素も使ってみましたよ。

Loading : Loading... : 0
 
Loading : <progress id="prog" max="100" value="0">Loading...</progress>
 : <output id="outp">0</output>%<br>
<input type="button" value="リロードして確認" onClick="location.reload(); return false;">
<script>
  var pbar = document.getElementById('prog');
  var ptxt = document.getElementById('outp');
  var pup = setInterval("upPrgrss()",100);
  function upPrgrss(){
    if(pbar.value<=pbar.max){
    pbar.value++;       /*「++」で 1 ずつ足してます*/
    ptxt.value = pbar.value;
    }else{
    clearInterval(pup);
    }
}
</script>

次回予告

<progress>はスクリプトを使って現況を表示する要素。デザイナーの私にはどんな要素か知っただけで、実際に駆使できなさそう(笑)。
(スクリプト無しで、属性だけでプラウザが反応してくれたらイイなぁ…!)

さて、次回もデザイナーにとっては「ふ〜ん」で終わってしまいそうな <keygen>要素です。
これは、シリアルナンバーとかCDキーとかを生成する役目だそうで、HTML5からの新要素です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.