tools — ブラウザだけで動く道具
Claude Code のログを落とすだけで、推定作業時間・使った日数・APIトークン料金の換算を「通知表」の画像にします。 開くのはこのページ → https://yuita-genecraft.github.io/tools/cc-tsuchihyo/
- 何ができるか：
~/.claude/projects のログを集計し、通知表の画像を作ります（ほかに、AI 開発ログマップ・Firebase 公開前チェックがあります）
- ログは外に送りません：ページの中だけで動き、通信はブラウザ側（CSP）で禁止しています
- 使い方：上のページを開き、ログのフォルダをドロップするだけです
作：ゆいた（@yuita_Genecraft）
道具の詳細
| 道具 | 中身 | ソース |
|---|
| Claude Code 通知表 | ~/.claude/projects のログを集計し、推定作業時間・使った日数・よく使ったツール・APIトークン料金の換算を通知表の画像にする（「ありがとう」などの回数と称号はおまけ） | cc-tsuchihyo/app.html |
| Firebase 公開前チェック | fbcheck（Node版）と同じ判定をブラウザで。フォルダをドロップするだけ | fbcheck-web/app.html |
| AI 開発ログマップ（旧 Claude Code 生存率） | ~/.claude/projects（Claude Code）・~/.codex/sessions（Codex）・~/.gemini/antigravity*（Antigravity）のログを読む。タブは2つ。文脈とトークン（ログだけ）＝使用量（料金比の推定）のうち文脈 40万超の応答が占める割合と、応答の数での割合の差（本人のログで 使用量 53%・応答の数 28%）、文脈の大きさ別の分布、週ごとの推移（その週の使用量のうち 40万超の分）、使用量が多かった5時間ブロック（そのうち 40万超・再開・いちばん使った会話の分）、1時間以上あけた再開と、その時の大量のキャッシュ作成（直近の1件の時刻つき）、使い道の内訳（料金比の推定）。コードの手直し（ログ＋手元のフォルダ）＝AI が書いた行のうち今も残っている割合を「残った・AI が自分で書き直した・ログの外で変わった・ファイルごと消えた」に分け、書き直しが集中したファイルと、書き直す前の本人の指示（画面だけ）を出す。繰り返した直しの型には、まず機械で防ぐ手（lint・formatter・型の検査）と、それでも残れば CLAUDE.md の1行。出力が大きく残らなかった会話も。日時で区切って「この日時以降に入った行だけ」でも数えられる。結果を JSON で保存して次回と比べられる（型ごとの印も保存） | cc-seizon/app.html |
作品を足す時
新しいページ（<slug> は URL になる英数字とハイフン）を足す時は、次の5か所を同じ PR で直します。
- ソース：
<slug>/app.html を置く。doctype などの骨格は書かない。build_standalone.py は最初の </style> の位置で head 側と body 側に分けるので、<style>…</style> が必ず1つあり、<title> はその前に置き、本文（body に入る部分）は </style> より後に置く（</style> が無いとビルドが止まる）。<title> は必須（無いとビルドが止まる）。<meta name="description" content="…"> は無くても止まらないが、OGP の説明が空になるので書く。この2つは OGP（共有カード）に使う。CSP は title・description からではなく build_standalone.py の固定の定数から作られる（書体を埋め込んだ時だけ font-src が data: になる）。ブラウザ版だけの置き場が別にある時（例：fbcheck-web/app.html）は、その場所を次の TOOLS に書く。
build_site.py の TOOLS：("<slug>", "<slug>/app.html") を1つ足す。- 一覧ページ：
site-src/index.html の <ul> にカードを1枚（<li><a class="card" href="<slug>/"><b>名前</b><span>1〜2文</span></a></li>）。docs/index.html は手で直さない。
- カード画像：
og/og-<slug>.html を作り、render_og.py の PAIRS に3要素の組 ("<slug>", "og/og-<slug>.html", "docs/og/<slug>.png") を足して（TOOLS の2要素とは形が違う）、python3 render_og.py --only <slug> で docs/og/<slug>.png（1200×630）を作る。画像が無いと build_site.py が「注意」を出す。
- この README：先頭の「開く」の表と、「道具の詳細」の表に1行ずつ。
確かめ方（この順で）：
python3 build_site.py を実行し、「注意」が出ないこと。git status で変わるのが、この手順で触った物（<slug>/app.html・build_site.py・site-src/index.html・og/og-<slug>.html・render_og.py・README.md、試験を足した時は test/ の下も）と、その生成物（docs/index.html・docs/<slug>/index.html・docs/og/<slug>.png）だけであること。それ以外のファイル（特に既存の作品の docs/<別の slug>/）が変わっていたら、理由を確かめる。docs/<slug>/index.html をブラウザで開き、ファイルを入れて動くこと。開発者ツールのコンソールに CSP の違反が出ないこと（通信は connect-src 'none' で止まる）。- 一覧ページ（
docs/index.html）のカードのリンクが、docs/<slug>/index.html に飛ぶこと。
- 集計やルールの判定を持つ作品は、
test/ に合成データの試験を足し、「テスト」の節の動かし方に書く。
仕組み
*/app.html は claude.ai の Artifact 用（doctype などの骨格なし）build_standalone.py で doctype・CSP・OGP を付けた単体の HTML にするbuild_site.py <公開先URL> で GitHub Pages 用の docs/ を作る- X などのカード画像は
docs/og/*.png。og/*.html を render_og.py で撮って作る。通知表のカードは --card で渡した画像を使う（公開中の画像は作者の実際の通知表）。渡さない時は、アプリの見本をその場で描いて使う
- CSP は
default-src 'none'; connect-src 'none' ほか。fetch / XHR / WebSocket はブラウザが止める
- 生存率の見た目（2026-10-21）：暗いチャコール地に罫線で区切る解析票。色は無彩色＋低彩度の青緑（主要な数値・選択状態・主要操作だけ）、分類色は見分けがつく範囲で落とす。数・ファイル名・日付・トークンは等幅＝IBM Plex Mono（SIL OFL 1.1）の Latin 部分を woff2 で
app.html に埋め込み（3 ウェイトで約 30KB・通信は無し）。埋め込んだページだけ CSP の font-src が data: になる（build_standalone.py が data:font/ の有無で切り替える）。カード画像も同じ色と書体で描く（drawCard の P）
テスト
- 通知表：
test/gen.py（境界ケース入りの合成ログ）→ test/ref.py（Python で書いた別実装）→ test/e2e.py（Chromium で開いて集計値を突き合わせ）
- 生存率：
test/gen_seizon.py（Edit／Write／MultiEdit・old 側に元からある行・Claude 自身の書き直し・人が直した行・ファイルごと消えた・失敗した Edit・結果の無い Write・再開で写った行・別プロジェクト・同名の別フォルダ・数えない行・空白違い・CRLF・鍵らしい行・読まないファイルを混ぜた合成ログとフォルダ）→ test/ref_seizon.py（Python の別実装）→ test/e2e_seizon.py（Chromium で2つのフォルダを入れ、通常と厳密の両モードで別実装と、手で数えた期待値の両方に突き合わせ。直し癖は別のログとプロジェクト（logs2・proj/habits＝残った行を目印にした窓の中の削除・順番で組にする改名3行・丸ごと書き直した5行＝まとまった削除、など）で、Chromium＝Python＝手計算を確かめ、JSON の保存と前回比較も通す。頼み方は alpha（s2 が別の場所にも1行書く＝按分 5/6・s1 は 21行中 9行が今は無い＝1,200×9/21）と habits（h5 が h4 を --resume＝同じ uuid・別の sessionId＝1つの会話に・写った分は1回）で手計算と突き合わせ）。文脈とトークンは logs4（フォルダ無し・同じ応答の途中の行・サブエージェント・一致する再開と一致しない再開・Codex の再開）で Chromium＝Python＝手計算、書き直しは alpha の4か所と直前の指示、日時の区切りは 9/3 以降＝s2 の6行だけ、までを確かめる。Codex と Gemini は logs3・proj/multi（Codex＝新規作成と unified diff・同じ response_id の重複・失敗した変更、Gemini＝3か所に重なった step・切られた写し・JSON で包まれた値・ほどけない値）で、Codex を入れてから Gemini を足す・Codex を入れ直すと置き換わる、までを Chromium＝Python＝手計算で確かめる
- 公開前チェック：判定の本体は
fbcheck-web/engine.js。fbcheck-web/sync_engine.py <出力先> で、ブラウザ版と CLI（fbcheck.mjs）に同じ文字列で入れる
test/e2e_fb.py：テスト用プロジェクト8種（test/gen_fbproj.py が作る）。git の外の5種はブラウザ版と CLI の結果が一致するか、本物の git リポジトリの3種は CLI が git の答えどおりに出すか・ブラウザ版が「未確認」で出すか。あわせて言い過ぎ・偽PASSが出ないかtest/unit_engine.mjs：.gitignore の読み・ルールの読み・文言（言い過ぎ）の単体テストtest/gitcheck.mjs：自前の .gitignore 読み取り（補助）を本物の git check-ignore と突き合わせる。範囲は「直下の .gitignore × 未追跡のファイル」だけ。追跡済みのファイルや下の階層の .gitignore はこの範囲の外なので、CLI は git 自身で確かめ、ブラウザ版は「未確認」と出す
- 動かし方：
node test/unit_engine.mjs・node test/gitcheck.mjs・python3 test/e2e_fb.py・python3 test/e2e.py・python3 test/e2e_seizon.py（e2e は Playwright の Chromium を使う。CLI は test/out/ に毎回作る）
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
