クイック スタート: プログレス コントロールの追加 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

プログレス コントロールを使うと、画像のダウンロード、ファイル読み込み、データ処理などの作業をアプリで実行している状況を示すことができます。 プログレス コントロールにはさまざまなスタイルがあります。ここでは、JavaScript を使った Windows ランタイム アプリにこれらのスタイルを追加する方法を説明します。

必要条件

JavaScript を使った基本的な Windows ランタイム アプリを作成できることを前提としています。初めてのアプリ作成については、「JavaScript を使った初めての Windows ランタイム アプリの構築」をご覧ください。初めてコントロールを作ってイベント ハンドラーを追加する場合は、「クイック スタート: HTML コントロールの追加とイベントの処理」をご覧ください。

プログレス コントロールのスタイル

実行する作業量がわかっている場合、作業量がわかっていない場合、タスクがモーダルかどうかに応じて、ユーザーに示す progress コントロールには、進行状況確定バー スタイル、進行状況不定バー スタイル、不定リング スタイルの 3 種類があります。

進行状況確定バー: アプリで実行された作業量を示します。 作業が進行すると、色で塗りつぶされた領域が左から右へ伸びていき、最後には進行状況バー全体が塗りつぶされます。 進行状況確定バー
進行状況不定バー: タスクの実行中に、ユーザーが UI を操作できることを示します。 アニメーションを使って、トラックの左側に点が表示され、トラックの端に到達するまでトラックに沿って右側に移動し、端に到達すると消えます。 進行状況不定バー
進行状況不定リング (Windows のみ): アプリのタスクが完了するまでユーザーの操作がブロックされること (つまり、操作がモーダル操作であること) を示します。 アニメーションを使って、複数の点が円を描いて時計回りの方向に移動します。 進行状況不定リング

 

進行状況確定バーの追加

進行状況確定バーには、アプリで実行された作業量が示されます。作業の進行に合わせて、バーが塗りつぶされます。時間単位、バイト単位、ファイル単位などの定量化できる測定単位で残りの作業量を推定できる場合は、進行状況確定バーを使います。進行状況確定バーを使うタイミングについて詳しくは、「プログレス コントロールのガイドラインとチェック リスト」をご覧ください。

進行状況バーには、進行状況の設定と判断のためのプロパティが 3 種類あります。

プロパティ 説明

max

完了値を指定する数値。既定値は 1.0 です。

value

現在の進行状況を示す数値。ファイルのダウンロードの進行状況を表示する場合、この値はダウンロード済みのバイト数になります (さらに、max を、ダウンロードする全バイト数に設定します)。

position

(読み取り専用) 現在の進行状況のインジケーター。value を max で割った値です。

 

進行状況確定バーを作成するには

進行状況確定バーを作成するには、進行状況要素を作成し、value プロパティを設定します。既定の完了値 1.0 を使わない場合は、max プロパティを設定して変更します。進行状況確定バーを作成し、value を 30、max を 100 に設定する例を次に示します。表示される進行状況バーには、30% 完了した進行状況が示されます。

<progress id="determinateProgressBar" value="30" max="100"></progress>

進行状況確定バーの値を更新するには

前の例では、マークアップで進行状況の値を指定する方法を示しました。実際のアプリでは、JavaScript を使って、進行状況インジケーターに対する応答として進行状況バーの値を更新します。たとえば、進行状況バーを使ってダウンロード済みファイル数を示す場合、ファイルがダウンロードされるたびに値を更新します。

進行状況バーの値を更新する例を次に示します。

var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;

進行状況不定バーの追加

タスクが完了するまでの残りの作業量を推定できず、タスクの実行中にユーザー操作がブロックされない場合は、進行状況不定バーを使います。進行状況不定バーでは、作業が完了すると塗りつぶされるバーではなく、左から右へ移動する点のアニメーションが表示されます。 進行状況不定バーを使うタイミングについて詳しくは、「プログレス コントロールのガイドラインとチェック リスト」をご覧ください。

進行状況不定バーを作成するには

進行状況不定バーを作成するには、value または max を指定せず、進行状況要素を作成します。

<!-- Create an indeterminate progress bar -->
<progress></progress>

アプリ ウィンドウでの進行状況不定バーの追加 (Windows のみ)

タスクが完了するまでの残りの作業量を推定できず、タスクの実行中にユーザー操作がブロックされる場合は、進行状況不定リングを使います。進行状況不定リングでは、複数の点が円を描いて移動するアニメーションが示されます。進行状況不定リングを使うタイミングについて詳しくは、「プログレス コントロールのガイドラインとチェック リスト」をご覧ください。

進行状況不定リングを作成するには

進行状況不定リングを作成するには、value または max を指定せず、進行状況要素を作成し、class を win-ring に設定します。

<progress class="win-ring"></progress>

(win-ring クラスは、JavaScript 用 Windows ライブラリに用意されているスタイルの 1 つです。)

テキストも共に表示される進行状況不定リングを作成する方法の例を次に示します。

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

前に示した例と連動する CSS スタイルは次のとおりです。

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

要約と次のステップ

さまざまな種類のプログレス コントロールを作成する方法について説明しました。

次のトピック「プログレス コントロールのスタイルを指定する方法」では、CSS と、WinJS のクラスを使って progress コントロールのスタイルを指定する方法について詳しく学習します。

その後で、progress コントロールを使うタイミングと使用方法についてさらに詳しく説明されている「プログレス コントロールのガイドラインとチェック リスト」をご覧ください。

関連トピック

progress

プログレス コントロールのスタイルを指定する方法

プログレス コントロールのガイドラインとチェック リスト