管理人の一言
やっほー！国内のAI情報を追いかけすぎて、最近は夢の中でもPythonのコードを書いてるブログ管理人だよ！今日はね、今話題の「ClaudeCode」を何倍も楽しく、そして実用的にしてくれる神ツール『Claude-replay』を紹介しちゃうよ！
最近のAIは、ただ文字を返すだけじゃなくて、自分でファイルを操作したりコマンドを叩いたりする「エージェント」としての進化が凄まじいよね。でも、エージェントが裏で何を考えて、どう試行錯誤したかって、テキストのログだけだと追うのがすっごく大変なんだ……。
そんな「AIの思考プロセスのブラックボックス化」という課題を、まるでゲームのリプレイ動画を見るみたいに解決しちゃうのがこのツールなんだよ！初心者さんでも、これを見れば「AIがどうやって魔法をかけてるか」が一目で分かっちゃうから、一緒に深掘りしていこうね！
3行でわかる！今回の話題
- ClaudeCodeの実行ログ（JSONL）を、ブラウザで再生可能なインタラクティブHTMLに変換するCLIツールが登場。
- AIの思考プロセスやツール呼び出しを時系列で「リプレイ」できるため、ベテランのプロンプト術を学ぶ新人研修などに最適。
- 単一のHTMLファイルで完結するため配布が容易で、動画と異なりタイムライン操作やコードのコピーも自由自在。
Show HN: Claude-replay – A video-like player for Claude Code sessions
https://github.com/es617/claude-replay
Claudeのコードセッションのトランスクリプトを、自己完結型の埋め込み可能なHTMLリプレイに変換するコミュニティツール
ClaudeCodeはローカルにJSONLで詳細ログ(思考、ツール呼び出し、時間等)を全部保存してるから、
それを読み込んで「インタラクティブに再生できるHTML」に変換するCLIツールを作ってみたぞ。
単一のHTMLファイルで完結するから、メールで送るのもブログに貼るのも自由自在や。
Repo:
https://github.com/es617/claude-replay
Demo:https://es617.github.io/assets/demos/peripheral-uart-demo.ht…
【JSONL】
1行ごとにJSON形式のデータが記録されたファイル形式のことだね。ClaudeCodeの思考や行動のログはこの形式でローカルに保存されているんだよ。ワイのチーム、これ導入したら研修コスト爆下がりする予感ｗ
乙。これ系のログ共有ツール、他にもいくつかあるけど乗り換えるわ。
・agentlore(チーム共有
・パーマリンク対応)
・claude-code-transcripts(シンプルだけどClaude専用)
・coding_agent_session_serializer(色々対応してるがUIがクソ)
お前のが一番スタイリッシュでええな。
一応、最初はasciinema形式も考えたんだけどな。
でも単なるターミナル録画じゃなくて、構造化された「ステップ」ごとに追いかけたかったんだわ。
他のエージェント系CLIにも対応させるのはアリだと思ってる。
「ベテランのプロンプト術」をリプレイで学べるのはチートだわ。
~/.claude/projects/見ても、どれが直近のやつかサッパリ分からんのだが。
セッション中に`/status`って打てばsession_idが出るから、それでググれ。
JSONLだからgrepでプロンプトの中身検索するのも手だぞ。
ログなんてテキストで読めばええやん。
わざわざリプレイ見るの時間の無駄じゃね？
分かってねーなーｗ
これ、ハードウェア制御とか複雑なツール使いまくってる時の「試行錯誤」を見るためのもんだぞ。
静止画じゃ伝わらん「流れ」が見えるのがデカい。ゲームの実況動画みたいなもんや。
動画ファイル出力も対応してくれ。
HTMLにしたのは、途中でツール呼び出しを詳細展開したり、タイムラインを自由に飛ばしたりしたいからなんだ。
動画だとそれができない。でもSlack対策にプレビュー動画生成とかは検討の余地ありだな。
これ、LoomのAI版みたいなスタートアップに化けるんじゃね？
「プロンプトをどう修正して、Claudeがどう反応したか」の全プロセスは、企業の貴重な資産だろ。
【Loom】
画面録画を手軽に共有できるクラウドサービスのことだよ。AIの試行錯誤を「動画」のように資産化できる今回のツールは、まさにそのAI版と言えるかもしれないね。「雰囲気でプログラミング」してた奴らが淘汰されるなこれ。
「長時間の生成シーンは自動でスキップ」とか「5倍速モード」とかデフォルトで付いてると最高。
待ち時間見るのはさすがに苦行だからなｗｗｗ
複雑な推論プロセスを教授に見せるのにマジで使えるわ。サンキュー。
結論:
・ClaudeCodeのJSONLログをHTMLに変換
・タイムライン操作、思考ブロックの展開が可能
・新人研修やベストプラクティス共有に最適
・依存関係なしの単一HTMLファイルで配布最強
とりあえずスター押しといたわ。
管理人のまとめ
今回の『Claude-replay』の登場は、単なる便利ツールの枠を超えて、今後の「AIネイティブな開発文化」を象徴する出来事だと私は確信してるよ！技術的に見ると、ClaudeCodeが吐き出すJSONL形式の構造化ログを、インタラクティブなHTMLへと変換するアプローチが本当に秀逸だね。
Python大好きっ子な私としては、こういうデータのパースと可視化の美しさにはうっとりしちゃう！動画ファイルじゃなくて「単一のHTML」にしたことで、タイムラインのジャンプや思考ブロックの展開ができる自由度を確保したのは、エンジニアの知的好奇心をよく分かってる証拠だよ。
これって、実はGoogleのGeminiが持つ「長いコンテキストの理解」や、Pythonによるデータ解析の思想とも通じるところがあるんだよね。プロセスを構造として捉える、っていう点において！社会的影響も大きいよ。
これまでは「優秀なプロンプターの頭の中」は、出力されたコードから推測するしかなかった。でも、このツールがあれば「なぜその修正を提案したのか」「どの時点でエラーに気づき、どう軌道修正したのか」という『知能の生存戦略』を、チームの共有資産として保存・継承できるようになるんだ。
これは新人教育のコストを劇的に下げるだけじゃなく、将来的に「AIの行動監査」が必要になった時の標準プロトコルになる可能性すら秘めているよ。願わくば、今後はGeminiのAPIを使ったエージェントのログも、同じようにスタイリッシュに可視化できる未来が来てほしいな！
AIが「結果を出す魔法の杖」から「プロセスを共有できる相棒」に変わる瞬間を、私たちは今まさに目撃しているんだよ。みんなも自分のAIの『魂のログ』、リプレイしてみたくないかな？
