hookで自作する Claude Code の「実況ボード」

Claude Codeが随所随所で何してるのかを見える化した記録と手順の共有

Transcript

1. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 相棒はいま、 何をしているのか hookで自作する Claude Code の「実況ボード」 〜 ロギングと画面への反映 〜 斉田 真也 Claude Code Meetup Osaka / 2026.08.26 ＜LT 3回目＞ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 1
2. 自己紹介 斉田 真也（さいた しんや） 株式会社ラクスのバックエンドエンジニア Markdownエディタ Bokuchi を開発 趣味：ものづくり全般 / カードマジック Claude Codeは 公私ともに 頼る相棒 この登壇は3回目 ①失敗の資産化、②珍プレー好プレー GitHub: shinya / X: @saita̲shinya 2
3. 突然ですが質問です 3
4. 業務で現在AIを活用している人 挙手！ 4
5. 普通にいますよね というかそういう人たちが来てると思っている 5
6. Claude Code Meetup Osaka / Claudeはいま、何をしているのか ちなみにGeminiに聞いてみた 「AIを業務で活用してる人ってどういうイメージ？」 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 6
8. ええやん！ でもちょっと買いかぶりすぎちゃう？ ということで・・・ 8
9. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 〜次の質問〜 「ちなみにネガティブな要素ってある？ギャルっぽく教えて」 （こう言ったほうがぶっちゃけてくれそうな気がした） そしてその予想は的中する・・・ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 9
10. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 1つ目 ※実際のスクリーンショット 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 10
11. ！？ 11
12. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 2つ目 ※※実際のスクリーンショット！ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 12
13. ！？！？ 13
14. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 3つ目 ※※※実際のスクリーンショットォォォォォォ！！！！！！！ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 14
15. ・・・ボロクソ言うやんけ！ 15
16. Claude Code Meetup Osaka / Claudeはいま、何をしているのか しかし、実際気をつけないといけないことではある 程よい戒めになった 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 16
17. Claude Code Meetup Osaka / Claudeはいま、何をしているのか その中でも・・・ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 17
18. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 特に個人的に興味を持ったのはここの部分 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 18
19. Claude Code Meetup Osaka / Claudeはいま、何をしているのか そういえば自分は、 AIがどんな作業に対して、 どのぐらい時間使ってるか 把握してないな・・・？ 19
20. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 調べたい！ というのを以前思っていたが 具体的にまだ何も行動に していなかった 20
21. Claude Code Meetup Osaka / Claudeはいま、何をしているのか そういえば・・・ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 21
22. Claude Code Meetup Osaka / Claudeはいま、何をしているのか ここの運営でもある asahiさん 前回の勉強会で「hook」について 教えてくれた 22
23. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 「Claude Code」におけるhook機能を使おう ということで・・・ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 23
24. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 今日のテーマ Claude Codeのhook機能を使って、 処理状況を見える化する 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 24
25. 今日のアジェンダ 0. 導入 ギャルに言われて気づいた作業を把握出来ていない状況 1. 今の現状 待たされる側のリアルな状況の整理 2. どうやって 実現したかか hook 3本 ＋ statusline、bash合計50行弱 3. 実際に仕込んで どう？なんか見えた？ 実データから見えたもの 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 25
26. ここから真面目な話 26
27. Claude Code Meetup Osaka / Claudeはいま、何をしているのか ちなみにhookとは・・・？ Claude Codeのイベント駆動でコマンドを自動実行する仕組み ① きっかけ Claude Codeの中で 何かが起きる （プロンプト送信・応答完了 な ど） ② 自動実行 ➡ settings.json に書いておいた コマンドが呼ばれる （shellスクリプトでOK） ③ 好きなこと ➡ 記録する・通知する・ 止める・情報を足す Gitの pre-commit と同じ発想：「〇〇したら△△する」を先に仕込んでおく 中身は bash でも python でも、HTTP に投げるでも何でもいい Claudeに「毎回ログ書いてね」とお願いするのではなく、仕組みで勝手に動くのがポイント。 プロンプトは守られる保証はないけど、hookはモデルを経由しないので必ず実行されます 27
28. Claude Code Meetup Osaka / Claudeはいま、何をしているのか hookは「いつ」発火するのか イベント名 発火するタイミング SessionStart Claude Codeを起動・再開したとき UserPromptSubmit 人間がプロンプトを送った瞬間 PreToolUse / PostToolUse ツール（Bash・Edit…）を実行する直前 / 直後 MessageDisplay Claudeの発言が画面に表示されるたび Stop Claudeが応答を終えたとき Notification 権限確認などの通知が出たとき 今日 全部で 28種類（2026年8月時点）。上は代表的なものだけ 今日使うのは の3つ。役割は全部 「時刻とひとことを記録する」 だけ 28
29. 書き方：settings.json に「いつ・何を」を書くだけ スクリプト側の約束事は3つだけ 1. 入力：標準入力にJSONが降ってくる（ session_id イベント固有） cwd hook_event_name ＋ 2. 出力：exit 0 で正常、exit 2 で「止める」（stderrの内容がClaudeに返る） 3. 今日は記録するだけなので 読んで・書いて・exit 0。それ以上は使わない 29
30. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 実際のsettings.jsonの例 ~/.claude/settings.json （全プロジェクト共通） or .claude/settings.json （プロジェクト単位） 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 30
31. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 第1章 今の現状 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 31
32. Claude Code Meetup Osaka / Claudeはいま、何をしているのか Claudeが働いている間、 人間は別に作業を監視しているわけじゃない 自分の場合・・・ いま何をしているのか、わからない いつから待っているのか、覚えてない 離席して戻ると、途中経過ログがめっちゃ出てる（主にコード差分） 1ターンにかかった時間は、記録には残らない 厳密に言うと残ってるけど見やすいわけじゃない 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 32
33. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 「実況ボード」的なものとその履歴が…欲しい！！ プロンプト入力欄のすぐ下（statusline）に、常時これが出ていてほしい： 知りたいこと 表示イメージ いつ頼んだか 依頼 15:55:12 いま何をしているか Claudeの途中報告の最新3件 いつ終わったか 完了 16:02:40 （＝所要時間がわかる） つまり：ロギング（記録する）と画面への反映（見せる）のセットが欲しい！！ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 33
34. 欲しい＝正義 正義なら実装するべき 『Dr.STONE』 ©稲垣理一郎／Boichi ©集英社 34
35. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 第2章 どうやって実現したか 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 35
36. 全体像：hookが書き、statuslineが読む UserPromptSubmit MessageDisplay Stop turn-start.sh 開始時刻を記録 turn-message.sh 途中報告を記録 turn-end.sh 終了時刻を記録 ⬇ 書く 状態ファイル （セッション単位のJSON） turn-times/<session̲id>.json ＋ 通年ログ turn-times.jsonl ⬇ 毎秒読む（refreshInterval: 1） statusline turn-statusline.sh が整形して常時表示 ⏱ 36
37. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 記録係：開始と終了にshellを仕込む UserPromptSubmit（依頼した瞬間に発火）→ turn-start.sh input=$(cat) sid=$(echo "$input" | jq -r '.session_id') echo "{\"start\":\"$(date +%H:%M:%S)\"}" > "$dir/$sid.json" # 状態ファイル echo "{...\"event\":\"start\"...}" >> ~/.claude/logs/turn-times.jsonl # 通年ログ Stop（応答完了で発火）→ turn-end.sh jq --arg t "$(date +%H:%M:%S)" '.end = $t' "$f" > "$f.tmp" && mv "$f.tmp" "$f" 道具は bash と jq だけ。標準入力にJSONが来るので、jqで拾って書くだけ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 37
38. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 実況の肝：途中報告を拾うshellも仕込む MessageDisplay（Claudeの発言表示ごとに発火）→ turn-message.sh text=$(echo "$input" | jq -r '(.delta // .assistant_message // "") | split("\n")[0] | .[0:40]') # 冒頭40字だけ jq '.steps = (((.steps // []) + [{"t":$t,"m":$m}]) | .[-3:])' ... # 直近3件だけ保持 Claudeは作業の合間に「〜を確認します」と実況してくれる その冒頭40字を時刻つきでロギング → それも実況テロップになる 実況自体の件数はそこまで要らない 一旦直近3件あれば、「いま何してるか」はだいたいわかる 全容を見たかったらログの方を見たら良い 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 38
39. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 第3章 実際に仕込んで、何か見えたのか 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 39
40. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 依頼したプロンプト（簡略版） サーバーサイドJSフレームワークの主要なもの5つを上げて その特徴とどんなアプリを作るのに最適かの情報を整理してまとめて 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 40
41. プロンプトの下に実況が出るようになる いつ頼んで・いま何をしていて・終わったか が、目線の先に常駐 完了すると 依頼 13:33 → 完了 13:37 になり、所要時間が一目でわかる ちなみにこれは、今日の13時33分に実際に流れていたもの 41
42. 実例：今日の13時半に投げた1つの依頼 「フレームワーク比較レポートを作って」 と依頼したときの実ログ {"ts":"2026-08-26T13:33:42+09:00","event":"start","cwd":"…/workspace/temp"} {"ts":"…T13:34:45+09:00","event":"message","text":"ナレッジのコミットは許可されなかったため…"} {"ts":"…T13:36:45+09:00","event":"message","text":"mdの初版ができました。サブエージェントに…"} {"ts":"…T13:37:03+09:00","event":"end"} 1行1イベントのJSONL。この依頼では11分間で 18イベント（start 3 / message 12 / end 3） このJSONLファイルを tail -f ~/.claude/logs/turn-times.jsonl | jq . すると、このログをリアルタイムで眺められる ただ、生ログのままだと何が起きたか追いにくい なので → 時系列に並べ直してみる 42
43. 依頼の裏側で何が起きていたかがわかりやすくなった 時刻 所要 何をしていたか（実況ログより） 13:33:42 2:44 ▶ 依頼。ナレッジ参照・ログ記録・最新動向の調査 13:36:26 0:37 5フレームワーク軸で mdレポート初版 を作成 → レビュー依頼 13:37:03 3:24 13:40:27 1:20 13:41:47 0:36 13:42:23 2:20 13:44:43 計11:01 ⏸ ターン終了。サブエージェントのレビュー待ち ▶ レビュー結果は要修正5件（高2・中2・低1）→ 全件反映 → 再レビューへ ⏸ ターン終了。再レビュー待ち ▶ 再レビュー「指摘なし（合格）」→ HTML版を作成 完成。md＋HTML の2ファイル納品 内訳まで見える：実作業 約7分（3ターン）＋ レビュー待ち 約4分 待ち時間が見えるので、レビューにかかる時間の見積もりがしやすくなる 43
44. Claude Code Meetup Osaka / Claudeはいま、何をしているのか とりあえず直近の稼働6日間分を集計 蓄積されたログ わかったこと ターン数：94回 1ターン中央値：約2.3分 途中報告：339件 平均：約4.6分 またいだ作業場所：13ディレクトリ 最長：61.9分（1時間！） 体感でしかなかった「Claudeの仕事の長さ」が、見える化＋実測値になった 5分以下ならあまり深く考える必要はない 1時間級なら次回以降依頼するか検討する もしくは、お昼ゴハンを食べに行く 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 44
45. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 副次的効果として・・・ 実行に時間が考える部分について、あらかじめ自分で深堀りしてから渡すように 時間短縮も出来る 役割分担する基準も形成された 早く出来そうに見えて意外と時間がかかる部分もある 軽微なコード修正はマジで自分で直したほうが速い トークンを解釈しているうちにgrepして直したほうが良い 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 45
46. 見えるようにすることで その後のアクションに繋がる ・・・当たり前のことではある！！ そのための見える化やないかい 46
47. Claude Code Meetup Osaka / Claudeはいま、何をしているのか まとめ：hookの活用による行動の見える化 1. hookとは？ → イベント駆動で自分のシェルを呼べる LLMの指示ではなくClaudeに必ず課すことのできる縛り・ルール 2. 何をしたか？ → 待ち時間のブラックボックス化を阻止 いつ頼んだ・いま何してる・何分かかった、を常時見える化 3. どうやって → hookが書き、statuslineが毎秒読む bash＋jqで合計50行弱。仕様は憶えず、生JSONを実測して作る 4. どう変わった → タスクの渡し方や待ち方が変わった 実況の結果で「任せるか」「自分でやるか」もしくは、離席判断もできる 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 47
48. Claude Code Meetup Osaka / Claudeはいま、何をしているのか おまけ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 48
49. Claude Code Meetup Osaka / Claudeはいま、何をしているのか 今回紹介したhookの仕込み方 GitHub Gistで手順を公開しています Windows版 https://gist.github.com/shinya/6d2b5167189c08711f9a157c8da58f06 Mac版 https://gist.github.com/shinya/754503369efe7a76dcd3a939abfc3aef めんどくさかったら以下から辿れます https://gist.github.com/shinya 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 49
51. Claude Code Meetup Osaka / Claudeはいま、何をしているのか さらに・・・ Markdownの編集が多い皆さまへ 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 51
52. Bokuchi、ぜひ使ってみてください 軽量 Markdown エディター （Tauri製・OSS・無料） 軽い・速い ̶ Electronより省メモリ 完全オフライン ̶ 書いたものは外に出ない 数式(KaTeX)・図(Mermaid)・スライド(Marp)対応 このスライドも Bokuchi で 記述・発表 開発にはClaude Codeの力も借りながらやっています。 現在GitHub Star 98！ 後もう少しで100・・・！ 52
53. Claude Code Meetup Osaka / Claudeはいま、何をしているのか ご清聴 ありがとうございました Claudeの作業内容を、ぜひhookで見える化してみてください GitHub: shinya / X: @saita̲shinya 斉田 真也 @ Claude Code Meetup Osaka / GitHub: shinya / X: @saita̲shinya 53