Skip to content

原文(日本語に翻訳) ​

固定幅の点字文字を使用することで、ターミナルタイトルのアニメーションのガタつきを修正しました。

原文(英語) ​

Fixed terminal title animation jitter by using fixed-width braille characters

概要 ​

Claude Codeの実行中、ターミナルウィンドウのタイトルバーに表示されるアニメーション(ローディングインジケーター)が、文字幅の違いによってガタついて見える問題が修正されました。固定幅の点字文字を使用することで、滑らかなアニメーションを実現しています。

問題の詳細 ​

修正前の動作 ​

ターミナルタイトルのアニメーションで可変幅文字を使用していたため:

Claude Code |
Claude Code /
Claude Code -
Claude Code \

各フレームで文字幅が異なり、タイトルテキスト全体が左右に揺れて見えました:

Claude Code |   ← 幅が異なる
Claude Code /   ← 微妙にズレる
Claude Code -   ← タイトル全体が揺れる
Claude Code \   ← 視覚的に不快

修正後の動作 ​

固定幅の点字文字(Braille patterns)を使用:

Claude Code ⠋
Claude Code ⠙
Claude Code ⠹
Claude Code ⠸
Claude Code ⠼
Claude Code ⠴
Claude Code ⠦
Claude Code ⠧
Claude Code ⠇
Claude Code ⠏

すべての文字が同じ幅のため、タイトルテキストの位置が固定され、滑らかなアニメーションになります。

実践例 ​

タスク実行中のターミナルタイトル ​

修正前:

タイトルバー:
Claude Code | Running task...  ← 揺れる
Claude Code / Running task...  ← 揺れる
Claude Code - Running task...  ← 揺れる

修正後(v2.1.7):

タイトルバー:
Claude Code ⠋ Running task...  ← 固定
Claude Code ⠙ Running task...  ← 固定
Claude Code ⠹ Running task...  ← 固定

長時間実行タスク ​

ビルドやテストなど、長時間実行されるタスクでは、このアニメーションを長時間見続けることになります。

修正前: ガタつきが目立ち、目が疲れる 修正後: 滑らかなアニメーションで視覚的に快適

複数ウィンドウ使用時 ​

複数のターミナルウィンドウでClaude Codeを実行している場合。

修正前: 各ウィンドウのタイトルがガタつき、どのウィンドウで作業中か分かりにくい 修正後: 滑らかなアニメーションで、タイトルテキストが読みやすい

点字文字を使用する利点 ​

視覚的な改善 ​

  • 固定幅: すべてのフレームで同じ文字幅
  • 滑らかさ: アニメーションが視覚的に滑らか
  • 可読性: タイトルテキストが揺れないため読みやすい

技術的な利点 ​

  • ユニバーサル対応: すべての主要ターミナルエミュレータで正しく表示
  • エンコーディング: UTF-8環境で問題なく動作
  • パフォーマンス: レンダリングのオーバーヘッドが最小限

点字アニメーションパターン ​

使用されている点字文字のパターン:

⠋ → ⠙ → ⠹ → ⠸ → ⠼ → ⠴ → ⠦ → ⠧ → ⠇ → ⠏

これらの文字は回転するようなアニメーション効果を生み出します。

注意点 ​

  • ターミナル依存: 一部の古いターミナルでは点字文字が正しく表示されない可能性があります
  • フォント: 等幅フォントを使用していることが前提です
  • 視覚的な変更のみ: 機能自体に変更はありません

影響を受ける場面 ​

このアニメーションは以下の場合に表示されます:

  • API リクエスト処理中
  • バックグラウンドタスク実行中
  • 大きなファイルの読み込み中
  • コードベースの探索中

関連情報 ​