contents
Claude.aiの使用量をメニューバー表示。自分で作れば無料です。所要時間2時間ほど。
ABOUT
- 名称：ClaudeUsageMonitor
- 表示内容：セッション使用率 / 週間使用率（%）
- 実装：Swift/SwiftUI製 macOSメニューバーアプリ
- 開発時間：2時間弱
- 費用：0円
- データ取得：WKWebView + JSインターセプター（claude.aiの内部API）
- 参照OSS：theDanButuc/Claude-Usage-Monitor（MITライセンス）
なぜ作ろうと思ったか
Claude.ai有料版を使い始めて、はや数ヶ月。便利だけど使用量が気になるわけです。
Claude.aiは頻繁にキャンペーンをやっていて、今月も使用量が2倍になってるけど、ヘビーな作業をさせれば使用量はザクザク減っていくし、これをモニターするために設定＞使用量を開かなきゃいけないのがメンドクサイ！
ということで、Mac App Storeを探してみると有料の使用量モニターアプリを発見。
最初はUsage for Claudeでいいかも？と思い、インストール。
このアプリは、リアルタイムモニタリング、自動更新、通知、ウィジェットといった主要機能は無料で使えます。プレミアム機能（チャートとアクティビティグリッドを含む完全な履歴表示、クロードコード統計、ローカルAPI、Apple Watchコンパニオン）はサブスク。それなりのお値段。
うーんそうか。
まあ、これを使ってもいいんだけど、基本的な仕組みとしてはシンプルなもの。
claude.aiの設定ページをWebViewで非表示ロードして、JavaScriptでfetchをインターセプトして、使用量のJSONを取得しているだけ。APIキーも不要。セッションCookieがあれば動く。
だったら（Claudeがいるし）作れるんじゃね？と思い立った、日曜日の夜8時半。
作り方：OSSを参照してClaude Codeに渡す
で、Claudeチャットで作戦を立てつつ、提案後に下調べ。GitHubを探したら、ちょうどいいOSS「theDanButuc/Claude-Usage-Monitor」を発見。Swift/SwiftUI製、MITライセンス。構成もシンプルで読みやすい。
claudeによると、「これだったらフォークして手を加えるより、仕様書を書いてClaude Codeにゼロから実装させるほうが自分の好みに合わせやすいです」ということだったので、そのままチャット内で仕様書を作成。OSSのREADMEを読み込ませ、データ取得の仕組みを整理した上で、Claude Codeに渡せる形式のMarkdown仕様書を生成。
つまり、仕様書を策定し、claude.aiで作り、実装をClaude Codeで行うという分業ですね。同じclaude内部での連携というか、用途に応じたツールの使い分けをしています。
Claude Codeへの指示文はシンプルに。これだけ。
SPEC.mdを読んで、記載された仕様通りにClaudeUsageMonitorを実装してください。まずproject.yml（XcodeGen定義）から作成し、次にSwiftファイルを順番に実装してください。外部ライブラリは使わないこと。
あとは待つだけ。
ていうか、画面を見て、進行を確認し、アクセスを承認するという一連の作業。
Netflix見ながら、Claude Code画面をチラ見するくらい。生成されたコードの意図は、、、、正直、わからないことの方が多いです。VaultApp（別のSwiftUIアプリ）の開発も行っているので（進行中）、この辺は同じ工程。
で、最初のビルドからバグ処理を経て、基本機能完成。
デザイン改良もclaude.aiと壁打ちして決定
最初に動いたバージョンのメニューバー表示は「41% | 4%」というプレーンテキスト。機能的には問題ないけど、なーんもcoolなことがないので、どうにかしようとデザイン改善をclaude.aiで壁打ち。
メニューバーの表示スタイル3案（アイコン+数値、ミニバー×2、同心円ゲージ）と、ポップオーバーのカラーテーマ3案（ダークターミナル、ディープスペース、ミニマルホワイト）をビジュアルで比較。選んだのはミニバー×2 + ディープスペーステーマの組み合わせ。
デザイン決定後、Claude Codeへの指示書を再度claude.aiで生成し、codeに「デザイン仕様を実装して」。実装は数分で完了。
GitHubにソース公開してます
ソースコード、GitHubに公開しているので参考にしてみてください。
簡単にいえば、これ使えば時間の節約になります。あるいは改造、機能追加もライセンスの範囲で可能です。
技術的な補足：なぜAPIキー不要で動くのか
参考情報。このアプリはAnthropicの公開APIを叩いているわけではありません。
WKWebView（macOSのWebKit）でclaude.aiの設定ページを非表示ロードし、JavaScriptのfetch/XHRをインターセプトして使用量データを含むレスポンスをキャプチャししている、という仕組みです。
セッションCookieはWKWebsiteDataStore.default()で永続化されるので、初回ログイン後は自動でセッションが維持。Anthropicが内部APIの構造を変えると動かなくなる可能性はあります。その点は有料アプリも同じなので、お金払った分、動いてもらうか、あるいは、自分で対応するか、の差ですね。
ローカルで完結しているので、認証情報がどこかに送信されることもありません。
💬 軽めインプレ所感
日曜日の夜、ふと思いついた「あったらいいな機能」を2時間ほどでサクッと作れる。
ソフトウェア開発についてはほとんど知らない僕でも、バイブコーディングでここまでできるという参考話です。自分が欲しい機能だけ厳選すればいいし、自分で作れば永久に無料。
ちなみに、仕様書の策定〜最初のビルドは5〜10分程度。その後、数値が読み込めない＞修正＞なおらない＞ログ確認＞修正、といったバグ処理が1.5時間くらい。デザイン修正で20分くらい。
Claudeに関しては、そこそこ使っているので、できたんじゃないの？と思われるかもですけど、このレベルはClaudeを使ったことがない人であっても、進め方さえわかれば最後まで辿り着けると思います。ひっかかるところはXcodeの使い方やConsole.app、ターミナルの基本知識あたりかなと思います。
ちなみに、1Password替わりの「VaultApp」の開発バグ処理はいまだに進行中。最初は5月のGW中のサーバー引越しの空き時間でスタートしたもの。このアプリは重要なセンシティブ情報も扱うので、慎重に進めているのと、どうしても解決できないバグもあり。とはいえ、今は1Password使わなくてもいいくらいのクオリティになっています。
ということで、Claude Proサブスクで20ドル払っていても、十分にお釣りがくるものが得られてます。ユーティリティ系は、もう自作する時代。自分でどうにもならないレベルのアプリに関しては、有料サブスクという順番ですね。
