piapia123
ja

テキスト進捗バーの生成

テキスト

処理はすべてブラウザ内で完結します。データは送信されません

入力
ファイルをここにドロップすると読み込めます
出力

「パーセント ラベル」の各行を等幅文字の進捗バーに描き、README にそのまま貼れるコードブロックにまとめます。 ⚠️ 八分ブロック `▏▎▍▌▋▊▉█` は 1 文字に 8 段あり、1 段ではありません。幅が十数文字しかなくても 35% と 37% の違いを描けるので、ブロックのスタイルより正確です。⚠️ 幅は表示幅(漢字は 2 マス)で数えるため、中国語などのラベルの列が揃います。0% はすべて空、100% はすべて満ちた状態になり、端に欠けは残しません。計算はすべてブラウザー内で完結します。

機能

  • 5 つのスタイル:ブロック・グラデーション・ドット・矢印・八分ブロック
  • 八分ブロック `▏▎▍▌▋▊▉█` は 1 文字 8 段で、狭い幅でも精密
  • 幅は表示幅で計算し、CJK のラベルも揃います
  • 0% はすべて空、100% はすべて満、端に欠けを残しません
  • パーセントはバーの中にも、バーの後ろにも表示できます
  • パーセントは省略でき、省略すると行数で均等に割り当てます
  • 最後に README へそのまま貼れるコードブロックを出力
  • 計算はすべて端末内で完結し、データは送信されません

使い方

  1. 1 行に 1 項目「パーセント ラベル」を書きます(例:`35 インストール`)
  2. スタイルと幅を選びます
  3. パーセントをバーの中に置くか、後ろに置くかを選びます
  4. コードブロックをコピーして README やチケットに貼ります

よくある質問

八分ブロックの方が正確なのはなぜですか
1 文字に 8 段あるからです(▏ は 1/8、▌ は 4/8、█ は 8/8)。ブロックは「塗りつぶし」と「空」の 2 状態しかありません。幅 10 のとき 35% は八分ブロックなら 3 マスと半マス(3.5 マス)ですが、ブロックは 4 マスに丸めるしかありません。幅が狭いほど差が出ます。
CJK のラベルはどう揃えますか
文字数ではなく表示幅で数えるからです。等幅フォントでは漢字が 2 マスを占めるため、文字数で詰めるとその列が短くなり全体がずれます。ツールは displayWidth で実際の幅を測って空白を足すので、複数の文字体系が混ざっても揃います。
0% と 100% はどう描かれますか
0% はすべて空(ドットなら○、ブロックなら薄いマス、八分ブロックなら空白)、100% はすべて満ちます。この 2 つの端は丸めで 1 マス残りやすいので、別に扱っています。
本当に README に貼れますか
貼れます。出力の末尾が ```text で囲まれたコードブロックで、等幅文字を含みます。GitHub・GitLab や多くの Markdown レンダラーはそのまま表示します。ただし行末の空白を削るレンダラーもあるため、揃うかどうかはバーの幅が一致していることに依存します。

関連ツール