プログレスバー

出典: フリー百科事典『ウィキペディア（Wikipedia）』
プログレスバーの一例
プログレスバーのアニメーション

プログレスバー（英: progress bar）とは、長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもので、グラフィカルユーザインタフェース (GUI) の要素（ウィジェット）の一つである。しばしば、ダウンロードやファイル転送のようにパーセント形式で表示される際に使われる。プログレスメーター（英: progress meters）とも呼ばれる。

プログレスバーの外観形態としては、左から右へ満たされていく水平方向のバーで進捗率を表すものがよく使われている。

不定状態[編集]

タスク完了までの処理量や時間が予測できないなど、タスクの進行の割合を表すことができない状況で使用される場合、一定幅のカラーバーが全体のバー内を繰り返し移動するアニメーションといったような、「不定（未定）プログレスバー」（英: indeterminate）として表示される[1][2]。このバーは進行の総量（サイズ）がいっぱいになるのを示すのではなく、現在進行中であることを示す動きとしてインジケーターの役割を兼ねた働きをしている。Microsoft Windowsでは、この表示状態をマーキースタイル（英: marquee style）と呼ぶこともある[3]。Microsoft Windows 8のModern UIスタイルでは、不定状態を表すのにいくつかのドット（点）の集団がバーの領域内を繰り返し移動するアニメーションが使われることもある[4][5]。

派生ウィジェット[編集]

macOS、iOS、AndroidやMicrosoft Windows 8[4]などでは、プログレスサークル（英: progress circle）やスピニングプログレスインジケーター（英: spinning progress indicator）[6]、プログレスリング（英: progress ring）[7]、プログレススピナー（英: progress spinner）[8]のように、進捗率表示や不確定状態のアニメーションが円環（円グラフ）や数珠のような形状で表示されるものもある。プログレスバーよりも占有面積が小さくて済むため、特に画面の小さいモバイル環境で多用されている。例えば複数のファイルのアップロード／ダウンロードの進捗率や、複数のアプリのインストール／アップデートの進捗率をコンパクトに個別表示するのに都合がよい。

なお、macOSのスピニング待機カーソル（英: spinning wait cursor）[9]や、Microsoft Windows Vista以降の待機カーソル[10]は、円形のデザインのアイコンがアニメーションすることにより、システムやアプリケーションがビジー状態であることを示すようになっているが、これらはかつて砂時計のデザインのアイコンが使われていたものであり、プログレスリングやプログレススピナーが登場するよりもずっと早い段階で円形のデザインとなっていた。なお、Windowsではマウスのプロパティのデザイン設定を変更することで、Vista以降であっても待機カーソルを従来の砂時計アイコンなどにしたり、ユーザーが用意したカーソル画像を設定したりすることもできる[11][12]。待機カーソルはビジーカーソルまたはビジーポインターとも呼ばれる。Windowsのデスクトップユーザーエクスペリエンスガイドラインでは、動作が完了するまでユーザーが1秒以上待機しなければならない場合、ビジーポインター（IDC_WAIT）を表示するよう指定されている。バックグラウンドで作業が進行中で、他に完了までの視覚的フィードバックを提供する手段がない場合は、矢印アイコンと小さなビジーアイコンが組み合わされたポインター（IDC_APPSTARTING[注釈 1]）を表示する。これらの活動状況を示すポインターはプログレスバーやプログレスアニメーションと組み合わせてはいけないとされている[13]。

HTML5[編集]

HTML5では多数のユーザーインターフェイス要素が新たに標準化されたが、プログレスバーもprogress要素として追加された。

脚注[編集]

[脚注の使い方]

注釈[編集]

  1. ^ 名前の通り、アプリケーションを起動（開始）した直後にこのカーソルが表示されることがある。

出典[編集]

  1. ^ Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > 進行状況バー, Internet Archive
  2. ^ Progress Bars - Win32 apps | Microsoft Docs
  3. ^ About Progress Bar Controls - Win32 apps | Microsoft Docs
  4. ^ a b プログレス コントロールのガイドライン - Windows app development, Internet Archive
  5. ^ ProgressBar Class (Windows.UI.Xaml.Controls) - Windows UWP applications | Microsoft Docs
  6. ^ Progress Indicators - Indicators - macOS - Human Interface Guidelines - Apple Developer
  7. ^ Guidelines for progress controls - Windows apps | Microsoft Docs
  8. ^ Progress spinner | Angular Material
  9. ^ macOS Human Interface Guidelines: Pointers, Internet Archive
  10. ^ About Cursors - Win32 apps | Microsoft Docs
  11. ^ 富士通Q&A - [Windows Vista] マウスポインタのデザインを変更する方法を教えてください。 - FMVサポート : 富士通パソコン
  12. ^ ASCII.jp：派手に動いて音までなるマウスカーソルに変身させる (1/2)
  13. ^ Windows 7 Mouse and Pointers - Win32 apps | Microsoft Learn

関連項目[編集]

ウィキメディア・コモンズには、プログレスバーに関連するメディアがあります。
コマンド入力
データ入出力
表示
コンテナ
ナビゲーション
特殊ウィンドウ
関連項目
スタブアイコン

この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

「https://ja.wikipedia.org/w/index.php?title=プログレスバー&oldid=99582262」から取得