はじめに
最近、心機一転してMacBook Airを手に入れ、初めてのMac環境での開発をスタートしました。
せっかくの最新マシンなので、話題の「Claude Code」を使って何か実用的なツールを作ってみたいと考えたのが、今回の開発のきっかけです。
今回作成したのは、Claude APIの利用状況やコストをデスクトップ上に常時表示（HUD）するツール「Claude Usage HUD」です。
作ったもの
主な特徴
- 透過ウィンドウ: デスクトップの邪魔にならないよう、ウィンドウを透過させて情報を表示します
- マルチプラットフォーム: WindowsとmacOSの両方に対応しています
- ほぼリアルタイム確認: ブラウザを開かなくても、現在のトークン消費量やコストをサッと確認できます
開発の動機
もともとはブラウザ拡張機能の「Claude Usage Monitor」を利用させていただいていました。非常に便利なのですが、使っていくうちに以下のような欲求が出てきました。
- 表示項目を自分好みにさらにカスタマイズしたい
- 作業を邪魔しないよう、常にデスクトップの端に「浮かせて」おきたい
- 普段の仕事やこれまでのPC環境がWindowsメインだったため、MacとWindowsの両方で同じように使えるツールが欲しい
「既存のツールで足りないなら、自分で作ってしまおう」という、エンジニアなら誰もが一度は通る道（？）を突き進むことにしました。
長年Windowsアプリの開発はやってきましたが、TypeScriptなどはほぼほぼ未経験ですので、昔なら自作なんで全く考えなかったのですが、Claude Codeの実装能力を信じてお任せすることにしてみました。
実装のポイント
-
透過ウィンドウの実現
HUDとして機能させるため、ウィンドウの背景を透過させ、さらにマウス操作を透過させる（クリックが後ろのウィンドウに届く）などの調整に工夫が必要でした。Electronの transparent: true や hasShadow: false といった設定を駆使しています。 -
Claude APIとの連携
APIから取得したトークン使用量を、どのように見やすく整形して表示するか。特にコスト計算の部分は、APIの価格改定などにも柔軟に対応できるよう、データの持たせ方に気を配りました。 -
初めてのMacでのビルド
Windowsユーザーだったこともあり、Mac特有の証明書周りやパッケージングの手順には少し苦労しましたが、その過程も含めて非常に良い学習機会となりました。
今後の展望
作ってみると「あれもやりたい、これもやりたい」とアイデアが色々浮かんでくるものです。
すでに以下の機能は実装しています。
- 更新機能: GitHubをチェックし新しいリリースが出たら設定画面からアップデートできるようにしています
- 他AIのリミット情報の追加: GitHub CopilotやOpenAI Codexなど、他のモデルのリミット情報にも試験的に対応しています（claudeと異なり正規の取得手段が怪しいので現在β機能としています）
- スキルと連携させて、claudeが自分自身では認識できないリミット情報にアクセスできるような仕組みの導入（リミットを意識しながらタスクの実行ができる）
何か面白そうなアイデアありましたら教えてください！