Rakuten Volunteers Tech BlogPublicationへの投稿
📊

Pixela を使って日々の Claude Code の利用状況を可視化する

Tsubasa Nomura
に公開
Pixela
Claude
Claude Code
tech

はじめに

Pixela は、API を通じて GitHub のようなコミットグラフを簡単に作成できるサービスです。
Claude Code の利用状況を Pixela に投稿することで、日々の利用状況を可視化してみます。

Pixela のセットアップ

ドキュメントに非常に丁寧に書かれているので詳しい手順はそちらを参照してください。

https://help.pixe.la/ja/getting-started

以下は基本的な流れです。

  1. ユーザーアカウントの作成
  2. グラフの作成
  3. 値(Pixela)の投稿

まとめると以下のコマンドになります。
test0806 というユーザー名で、Claude Code Usage という名前のグラフを作成し、2025年8月6日の利用状況を 1.5 ドルとして投稿する例です。
*username や token は適宜変更してください。

# ユーザーアカウントの作成
# 存在しないユーザー名であればなんでもOK
curl -X POST https://pixe.la/v1/users -d '{"token":"xxxxxxx", "username":"test0806", "agreeTermsOfService":"yes", "notMinor":"yes"}'
# グラフの作成
# Claude Code Usage という名前のグラフを作る
curl -X POST https://pixe.la/v1/users/test0806/graphs -H 'X-USER-TOKEN:xxxxxxx' -d '{"id":"ccusage","name":"Claude Code Usage","unit":"$","type":"float","color":"shibafu","timezone":"Asia/Tokyo"}'
# 値(Pixela)の投稿
# 試しに 2025年8月6日の利用状況を 1.5 ドルとして投稿
curl -X POST https://pixe.la/v1/users/test0806/graphs/ccusage -H 'X-USER-TOKEN:xxxxxxx'  -d '{"date":"20250806","quantity":"1.5"}'

上記を実行した上で以下のURLにアクセスするとグラフが表示されます。

https://pixe.la/v1/users/test0806/graphs/ccusage.html

curl だけで簡単に操作できるのが Pixela の良いところですね。

Claude Code の利用状況を Pixela に投稿する

ccusage のインストール

頑張って ~/.claude 配下をパースしてもよいのですが、ccusage というコマンドがあるのでそれを使うのが簡単です。

https://ccusage.com/

ccusage では、JSON モードがあるためこれを使います。以下はコマンドの例です。

$ ccusage daily -j | jq '.daily[] | select(.date == (now | strftime("%Y-%m-%d"))) | .totalCost'
32.63622375

Claude Code のフックの設定

Claude Code のフックを利用して、利用状況を Pixela に投稿します。
Stop フックを使ってみます。

$ cat ~/.claude/settings.json
{
  "hooks": {
    "Stop": [{
      "hooks": [{
        "type": "command",
        "command": "quantity=$(ccusage daily -j | jq '.daily[] | select(.date == (now | strftime(\"%Y-%m-%d\"))) | .totalCost') && date=$(date +%Y%m%d) && curl -q -X POST https://pixe.la/v1/users/test0806/graphs/ccusage -H 'X-USER-TOKEN:xxxxxxx' -d '{\"date\":\"'$date'\",\"quantity\":\"'$quantity'\"}'"
      }]
    }]
  }
}

Claude Code を使う

Claude Code を使ってみてメインのエージェントのレスポンスが返ってきたら、Pixela に利用状況が投稿されます。

まとめ

今回は単純に1日の利用料を投稿するだけの例でした。
たとえば、複数の環境がある場合の合計を可視化する、利用時間を SessionStart / Stop フックで測定する、なども少し作り込みは必要ですが可能でしょう。
Claude に聞いてみるとプロンプトの丸投げ度メーターや具体性スコアなどのアイデアを出してきたので、いろいろ試してみると面白いかもしれません。

Rakuten Volunteers Tech Blog
Rakuten Volunteers Tech BlogPublication

楽天のエンジニアによる技術ブログです。このブログは公式ブログではなく有志で運営しています。 記事の内容は個人の見解であり、所属する企業や組織の立場、戦略、意見を代表するものではありません。

Discussion