テキスト進捗バーとは？

テキスト進捗バーは、画像の代わりに通常の文字を使って進捗状況を表示します。たとえば、████████░░░░░░░░░░░░ 42% や [=========> ] のように表示できます。プレーンテキストなので、README、Discord や Slack のメッセージ、コミットメッセージ、ターミナルスクリプト、ステータス行、ソーシャルメディアへの投稿など、テキストを使える場所ならどこでも利用できます。

ツールの説明

このツールは、値と合計値からコピー可能なテキスト進捗バーを作成します。あらかじめ用意されたスタイルから選ぶか、独自の文字を入力し、幅を設定して枠線を追加できます。また、パーセンテージ、合計に対する値、またはその両方を表示するかどうかも選択できます。複数の行を追加して、プロジェクト内の言語や複数のタスクの進捗状況などを、小さな棒グラフとして表示することもできます。ラベルとバーは位置がそろうように配置されます。

機能

  • ブロック、濃淡、ハッシュ、矢印、円、四角形、絵文字で構成されたスタイルに加え、塗りつぶし、空白、先端の文字をカスタマイズ可能
  • 1つの文字を8分の1単位で埋める滑らかなブロック表示に対応
  • 幅を1〜100文字で設定可能
  • [ や ] などの左側と右側の枠線を任意で追加可能
  • パーセンテージ、合計に対する値、その両方、またはラベルなしに対応。小数点以下の桁数も指定可能
  • 複数のバーを同時に表示可能。ラベルには空白が追加され、バーの位置がそろう
  • 結果をコピー、またはテキストファイルとしてダウンロード可能

仕組み

値を合計値で割り、幅を掛けて、塗りつぶす文字数を求めます。その後、最も近い文字数に丸めます。滑らかなスタイルでは、文字の8分の1単位で丸め、Unicode ブロック ▏▎▍▌▋▊▉ のいずれかを使って部分的に埋まったセルを描画します。矢印スタイルや先端の文字を指定したカスタムバーでは、バーが完全に埋まるまで、最後に塗りつぶされた文字が先端の文字に置き換えられます。0未満の値では空のバーが描画され、合計値を超える値では満杯のバーが描画されますが、ラベルには実際のパーセンテージが表示されます。たとえば、150%のように表示されます。

ヒント

  • バーをコードブロック（Markdown、Discord、または Slack での3つのバッククォート）に貼り付けると、等幅フォントで表示され、位置がそろいます。
  • 多くのフォントでは、絵文字や一部の記号が1文字よりも広く表示されるため、絵文字を使ったバーは同じ行のテキストと位置がそろわない場合があります。
  • Unicode に対応していない可能性があるターミナルやログファイルでは、ASCII 文字のみを使用する Hash または Arrow スタイルを使ってください。