その他のUIコントロール (1/4)

プログレスバーは、時間がかかる処理の進行具合を表すのに用いられるUIです。Windows 8を起動すると、小さな点が円形にぐるぐる回る表示が現れますね？　あれがプログレスバーです。プログレスバーにはいくつかの表示スタイルがあり、信仰の状況などに応じてそれらを使い分けます。

このプログレスバーは、<profress />というタグとして用意されています。というと、「あれ？　ひょっとして……」と思う人もいるかも知れません。これ、実はHTML5から用意されているタグだったりします。つまり、Windows 8独自のものというわけではないんですね。けれど、まだ一般に使われていないのと、表示スタイルはWindows 8で独自のものが採用されていますので取り上げることにしました。

このプログレスバーは、属性などの設定の仕方によって表示がかなり変化します。以下に整理しておきましょう。

・進行状況不定バー

<progress />

ただこのタグを書いて置くだけで、小さな円が左から右へと移動していくタイプのプログレスバーが表示されます。これが進行状況不定バーです。

・進行状況確定バー

<progress value="値" />

進行状況を示す横長のバーを表示するタイプです。value属性を用意することで、自動的にこのタイプに表示が切り替わります。表示されるvalue値は、デフォルトで0～1.0の範囲で設定されます。例えば、value="0.5"とすれば、全体の半分が進行した状態となるわけです。

・進行状況不定リング

<progress class="win-ring" />

円形に小さな円が回転するタイプのプログレスバーです。これは、class属性に「win-ring」を指定すると表示されます。

この他に覚えておきたいのは、classに設定するクラスです。win-ringの他に、以下のようなクラス名が用意されており、併用することで表示サイズを調整できます。

win-small――マイクロソフトのドキュメントには出ていませんが機能するようです。もっとも小さいサイズです。
win-medium――中くらいのサイズです。
win-large――大きいサイズです。進行状況不定バーの場合、ウインドウの端から端までになります。

これらを使ってサイズ設定する他に、style="width:○○ height:○○"というように直接大きさを設定することもできます。このようにstyleを指定すれば自由な大きさでプログレスバーを表示させることができます。

進行状況は、不定バー／不定リングの場合、デフォルトの小さな円がアニメーションする表示だけしかありませんが、確定バーの場合には、進行状況をポーズしたり、途中でエラーになったりした場合の表示を持っています。これらはスタイルシートのクラスになっており、class属性に設定することで表示変更できます。

win-error――エラー時の表示スタイルです。
win-pause――一時停止時の表示スタイルです。

プログレスバーの進行や表示をJavaScriptから操作する場合、基本的に「value」属性と「className」属性を行うだけになります。これらはいずれも（winControlではなく）<progress />タグのDOMオブジェクトのプロパティを操作することで行います。プログレスバーは、新しいオリジナルのUIコントロールですが、winControlを操作するということはほとんどないのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※下図：様々な形のプログレスバー。