Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

Progressbarウィジェットでプログレスバーを作成するには?

2013年12月12日

時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。

  • このエントリーをはてなブックマークに追加

jQuery UIとは?

 jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザーインターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。

 Progressbarは、名前のとおり、プログレスバーを実装するためのウィジェットです。(例えば)ファイルのアップロードのような時間のかかる処理を実行する際に、その進捗(しんちょく)状況をユーザーに対して通知するために利用します。

 HTML5でも、同じ役割を持つ<progress>要素が用意されていますが、まだまだ未対応のブラウザーを利用しているユーザーも少なくはありません。当面は、Progressbarウィジェットにお世話になる局面も多いでしょう。

基本的なプログレスバー

 まずは、基本的なプログレスバーの例からです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Progressbarウィジェット</title>
<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  // 2プログレスバーを生成
  $('#progress').progressbar({
    value: 37,
    max: 150
  });
});
</script>
</head>
<body>
<!--1プログレスバーの表示領域 -->
<div id="progress"></div>
</body>
</html>
基本的なプログレスバーを実装するためのコード(progress.html)
プログレスバーを指定の割合で表示
プログレスバーを指定の割合で表示

 Progressbarウィジェットを利用するには、プログレスバーの表示領域を<div>要素で準備したうえで(1)、progressbarメソッドを呼び出すだけです(2)。progressbarメソッドで利用できるパラメーターは、以下のとおりです。

パラメーター概要デフォルト値
max 最大値 100
value 現在の値 0
disabled 無効にするか false
progressbarメソッドの主なパラメーター

 valueパラメーターには「0」~maxパラメーターの値の他、false値を指定することもできます。その場合、以下のような進捗状況が確定しない(indeterminate)プログレスバーを表示します。

valueパラメーターをfalseとした場合の表示
valueパラメーターをfalseとした場合の表示

プログレスバーに現在の値を表示する

 デフォルトの状態では、Progressbarウィジェットはバーを表示するのみで現在の具体的な値は表示しません。もしも値を表示するには、以下のようにする必要があります(以下は、上の例からの差分だけを示します)。

HTML
<!--2値の表示位置を調整 -->
<style type="text/css">
#loading {
  position: absolute;
  left: 50%;
}
</style>
……中略……
<script type="text/javascript">
$(function() {
  $('#progress').progressbar({
    value: 37,
    max: 150
  });
  // 3現在の値(割合)を表示
  var per = $('#progress').progressbar('value') /
    $('#progress').progressbar('option', 'max')
  $('#loading').text(Math.ceil(per * 100) + '%');
});
</script>
</head>
<body>
<!--1現在の値を表示するための領域を準備 -->
<div id="progress">
  <div id="loading"></div>
</div>
</body>
</html>
プログレスバーに現在の値を表示するコード例
現在の進捗割合をラベル表示

 値を表示する領域を、プログレスバーの表示領域に入れ子になるように配置します(1)。また、バー中央に値が表示されるように、スタイルを設定しておきましょう(2)。

 3では現在の値を算出/出力しています。現在の値はvalueメソッドで、最大値はmaxパラメーターの値はoptionメソッドで、それぞれ取得できます(太字部分)。ここでは取得した値から割合を計算し、その整数値を表示しています。

処理に合わせてプログレスバーを操作する

 最後に、プログレスバーをプログラムから操作する方法について紹介します。一般的には、何らかの処理に合わせて、プログレスバーも動的に伸ばしていくのが普通です。以下では、その具体的な方法について示します。

JavaScript
$(function() {
  // 何度も使うので、変数に退避
  var p = $('#progress');
  var l = $('#loading');
  p.progressbar({
    value: 0,
    // 1値の変更をラベルにも反映
    change: function() {
      l.text(p.progressbar('value') + '%');
    },
    // 2完了時にダイアログボックスを表示
    complete: function() {
      window.alert('処理を完了しました!');
    }
  });

  // 3100ミリ秒おきにプログレスバーを更新
  var id = setInterval(function() {
    var v = p.progressbar('value');
    p.progressbar('value', ++v);
    if (v >= 100) { clearInterval(id) }
  }, 100);

});
処理に合わせてプログレスバーを操作するコード例
時間経過で徐々にプログレスバーが伸びていく
時間経過で徐々にプログレスバーが伸びていく

 まずは、Progressbarウィジェットの準備からです。changeイベント(1)はプログレスバーの値が変更されたときに、completeイベント(2)は最大値に達したときに、それぞれ発生するイベントです。ここでは、値が変更されたときに、その値を「●○%」の形式でラベルに反映し、100%になったところでダイアログ・ボックスを表示します。

 3は、setIntervalメソッドで100ミリ秒おきにプログレスバーの値を更新する例です。値を取得/設定するには、valueメソッドを呼び出します(太字部分)。変数vが100以上になったところで、定期的な処理を終了します。

 ここでは、単にプログレスバーを更新しているだけですが、実際にはsetIntervalメソッドのコールバック関数の中で、(例えば)ファイルのアップロード処理のような実処理を記述します。

※以下では、本稿の前後を合わせて5回分(第20回~第24回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery UI逆引きリファレンス
20. Selectableウィジェットで選択可能なリストを作成するには?

マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
21. Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには?

ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
22. 【現在、表示中】≫ Progressbarウィジェットでプログレスバーを作成するには?

時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
23. Tooltipウィジェットでツールチップを表示するには?

対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
24. ツールチップへの表示内容をカスタマイズするには?

画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。

サイトからのお知らせ

Twitterでつぶやこう!