
2026/03/07 0:57
**Show HN:** *Claude‑Replay* – Claude コードセッションを動画風に再生するツール --- ### 概要 - **目的:** Claude のテキストベースのコードセッションを、動画のような体験へ変換します。 - **主力機能:** コードスニペット・説明・編集などのやり取りを記録し、再生できるようにします。 ### 仕組み 1. **セッションキャプチャ** – ツールはプロンプト、レスポンス、コードブロックをリアルタイムでログします。 2. **タイムライン作成** – キャプチャしたデータを時系列のタイムラインに変換し、タイムスタンプ付きで整理します。 3. **再生インターフェース** – ユーザーは動画としてセッションを再生でき、停止・巻き戻し・特定箇所へジャンプが可能です。 ### 主なメリット - **教育効果:** 学習者が複雑な説明を追いやすく、復習もしやすい。 - **ドキュメント化:** 問題解決の過程を生きた記録として残せるため、コードレビューや新人教育に有用です。 - **共有しやすさ:** エクスポートした動画は YouTube などで共有でき、ブログへの埋め込みも可能です。 ### 技術詳細 - バックエンドの記録ロジックは JavaScript(Node.js)で実装。 - 再生には HTML5 `<video>` 要素を使用し、タイムラインはカスタムオーバーレイとして描画します。 - FFmpeg を組み込むことで MP4 へのエクスポートに対応。 ### はじめ方 1. リポジトリをクローン: `git clone https://github.com/youruser/claude-replay.git` 2. 依存関係をインストール: `npm install` 3. レコーダー実行: `node record.js --session your-session-id` 4. 動画エクスポート: `node export.js --input session.json --output demo.mp4` ### コミュニティとフィードバック - **Issue:** バグや機能要望は GitHub Issues で報告。 - **貢献:** プルリクエスト歓迎—特に UI 改善や他 AI プラットフォームへの対応追加が期待されています。 --- **楽しく再生してください!**
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Summary
Claude‑Replay は、
~/.claude/projects/ に保存されている Claude Code セッションログ(JSONL ファイル)を完全に自律的でインタラクティブな HTML ページへ変換する軽量コマンドラインユーティリティです。ターミナルスタイルの会話を再生し、ユーザー入力、アシスタント応答、ツール呼び出し、思考ブロック、およびツール結果(「user」と「assistant」のターンのみがレンダリングされます)を表示します。出力はミニファイされた CSS/JS と deflate 圧縮データで構成され、外部依存関係は含まれていません。ブログやドキュメントに <iframe> で埋め込むことができます。
主な機能:
- 再生コントロール:再生/一時停止、前後ステップ、速度調整(0.5×〜5×)、およびキーボードショートカット。
- カスタマイズフラグ:
(デフォルトは tokyo‑night)で monokai、solarized‑dark、github‑light、dracula、bubbles などの組み込みテーマを選択可能。カスタム JSON テーマファイルは--theme
をサポートします。extraCss
オプションフラグとして
、--no-thinking
、--no-minify
が利用できます。--no-compress - フィルタリングオプション:
、--turns N-M
ISO タイムスタンプ、--from/--to
、および--bookmarks FILE
。--list-themes - 秘密情報の赤外化(デフォルトで有効)は、API キー(
、sk-*
など)、JWT トークン、データベース URL、プライベートキー ブロック等をAKIA*
に置き換えます。無効にするには[REDACTED]
を指定します。--no-redact
インストールは npm(
npm install -g claude-replay)または npx (npx claude-replay <input.jsonl> -o replay.html) で簡単です。ツールは Node.js 18+ 上の esbuild でビルドされ、esbuild が利用できない場合は未ミニファイのテンプレートにフォールバックします。
使用例としてはブログ、ドキュメント、デモ、バグレポート、および教育があります。Claude‑Replay は、大きな画面録画やトランスクリプト PDF の軽量代替手段を提供します。
本文
コミュニティツール – Anthropic と提携・認可を受けていません
Claude Code のセッションは開発には便利ですが、共有が難しいです。画面録画は容量が大きく、文字起こしもナビゲーションが困難です。
claude‑replay は Claude Code のセッションログを対話型で共有可能な HTML 再生ファイルに変換します。生成される再生ファイルは外部依存なしの単一の自己完結型 HTML ファイルですので、メール送信、どこでもホスト、ドキュメントへの埋め込みが可能です。
ライブデモを試す
Claude Code は完全な対話ログを JSONL 形式で
~/.claude/projects/ に保存します。これにはユーザーのメッセージ、アシスタントの応答、ツール呼び出し・結果、思考ブロック(Claude の内部推論トレース)がすべて含まれ、タイムスタンプ付きです。
claude-replay はそれらを Claude Code ターミナルセッションに似たビジュアル再生へ変換します。ブログ記事、デモ、ドキュメントに最適です。
主な機能
- 自己完結型 HTML 出力(外部依存なし)
- インタラクティブ再生(速度調整付き)
- ツール呼び出し・思考ブロックの折りたたみ/展開(Claude の内部推論トレース)
- ブックマーク / 章設定
- エクスポート前に秘密情報を自動で赤字化
- 複数カラーテーマ対応
- ターミナル風下から上へのスクロール
経由で埋め込み可能<iframe>
活用例
- ブログ記事 – AI 支援開発セッションをインタラクティブに表示
- ドキュメント – AI デバッグセッションやコードウォークスルーの埋め込み
- デモ – 動画なしで再現可能なセッション共有
- バグレポート – 長いログではなく再生ファイルを添付
- 教育 – AI の推論とツール使用を段階的に示す
インストール
npm install -g claude-replay # または npx で直接実行(ゼロインストール) npx claude-replay session.jsonl -o replay.html
クイックスタート
# セッション転写ファイルを探す ls ~/.claude/projects/*/ # 再生ファイル生成 claude-replay ~/.claude/projects/-Users-me-myproject/session-id.jsonl -o replay.html # 開く open replay.html
使い方
claude-replay <input.jsonl> [options]
オプション一覧
| フラグ | 説明 |
|---|---|
| 出力 HTML ファイル(デフォルトは stdout) |
| 指定したターンだけを含める |
| 開始時刻フィルタ (ISO 8601) |
| 終了時刻フィルタ (ISO 8601) |
| 初期再生速度(例: 2.0、デフォルトは 1.0) |
| デフォルトで思考ブロックを非表示 |
| デフォルトでツール呼び出しブロックを非表示 |
| ターン N にブックマーク / 章を追加(複数可) |
| ブックマーク JSON ファイル [{turn, label}] |
| 自動秘密情報赤字化を無効化 |
| ページタイトル(デフォルトは入力パスから推定) |
| ユーザメッセージラベル(デフォルト: User) |
| アシスタントメッセージラベル(デフォルト: Claude) |
| 既存テーマ(デフォルト: tokyo-night) |
| カスタムテーマ JSON ファイル(--theme を上書き) |
| 未圧縮テンプレートを使用(デフォルトは minified が利用可能なら圧縮) |
| 旧ブラウザ向けに生の JSON を埋め込む |
| 利用可能なテーマ一覧表示して終了 |
実例
# ターン 5〜15 を 2x スピードで再生 claude-replay session.jsonl --turns 5-15 --speed 2.0 -o replay.html # 時間範囲でフィルタリング claude-replay session.jsonl --from "2026-02-26T02:00" --to "2026-02-26T03:00" -o replay.html # 思考・ツールを除外したクリーン出力 claude-replay session.jsonl --no-thinking --no-tool-calls -o replay.html # 別テーマ使用例 claude-replay session.jsonl --theme dracula -o replay.html # パイプで stdout へ渡す claude-replay session.jsonl --turns 1-5 > snippet.html
プレイヤー操作
生成された HTML は完全に自己完結型のインタラクティブプレイヤーです。
- 再生/一時停止 – ターンごとに自動進行、ブロック単位でアニメーション
- 前後へステップ – ターン内で 1 ブロックずつ移動
- プログレスバー – 任意位置へジャンプ;セッションタイマーで経過/総時間表示
- 速度調整 – 0.5x〜5x
- チェックボックス – 思考ブロック・ツール呼び出しの表示切替
キーボードショートカット
| キー | 動作 |
|---|---|
| 再生/一時停止 |
| 1 ブロック前進 |
| 1 ブロック後退 |
テーマ
既存テーマ
claude-replay --list-themes
利用可能:
tokyo-night(デフォルト)、monokai、solarized-dark、github-light、dracula、bubbles.
カスタムテーマ
CSS 色値を持つ JSON ファイルを作成:
{ "bg": "#0d1117", "bg-surface": "#161b22", "bg-hover": "#1c2128", "text": "#e6edf3", "text-dim": "#7d8590", "text-bright": "#ffffff", "accent": "#ff7b72", "accent-dim": "#c9514a", "green": "#3fb950", "blue": "#58a6ff", "orange": "#d29922", "red": "#f85149", "cyan": "#39d2c0", "border": "#30363d", "tool-bg": "#0d1117", "thinking-bg": "#0b0f14" }
claude-replay session.jsonl --theme-file my-theme.json -o replay.html
キーが不足している場合は
tokyo-night のデフォルト値で埋められます。高度なカスタマイズでは任意 CSS を
extraCss キーに追加できます:
{ "bg": "#ffffff", "text": "#1c1e21", "extraCss": ".assistant-text { border-radius: 12px; border: 1px solid #ddd; }" }
完全カスタムレイアウトの例は
bubbles テーマにあります。
テーマ変数リファレンス
| 変数 | 用途 |
|---|---|
| メイン背景 |
| コントロールバー、エレベーション表面 |
| ホバー状態 |
| 主テキスト |
| 補助テキスト・タイムスタンプ・ラベル |
| ユーザー入力・強調テキスト |
| プロンプト記号、進捗バー、アクティブ状態 |
| アクティブボタン背景 |
| ツール結果 |
| ツール呼び出しインジケータ |
| (警告用予約) |
| (エラー用予約) |
| ツール名 |
| 境界線・区切り |
| ツール呼び出しブロック背景 |
| 思考ブロック背景 |
埋め込み
生成ファイルは外部依存なしの単一 HTML ファイルです。ブログ記事やドキュメントに
<iframe> で埋め込むことができます。
<iframe src="replay.html" width="100%" height="600" style="border: 1px solid #333; border-radius: 8px;"></iframe>
動作原理
- パーサ は JSONL 転写を行毎に読み取り、Claude Code のストリーミング形式(アシスタントメッセージが複数行に分割されるケース)を処理します。
- ターン は「ユーザー + アシスタント応答(テキスト・ツール呼び出し・思考ブロック)+ ツール結果」としてグループ化されます。
- レンダラー はパース済みターンを
+deflate
で圧縮し、HTML テンプレートに埋め込みます。base64 - プレイヤーは Vanilla JS(フレームワークなし)で構築され、データは読み込み時にブラウザネイティブの
API で解凍されます。DecompressionStream
出力最適化
生成ファイルは二層の最適化を行います(外部依存なし)。
- CSS/JS のミニファイ – テンプレートは esbuild で圧縮(変数名短縮、空白除去)。
を指定すると可読性重視の出力になります。--no-minify - データ圧縮 – 転写 JSON は deflate 圧縮し base64 エンコードされ、通常 60–70% のサイズ削減が期待できます。旧ブラウザ向けには
を使い生の JSON を埋め込みます。--no-compress
開発
npm install # esbuild (devDependency) をインストール npm run build # template/player.min.html を生成
CI でビルド済みテンプレートが含まれ、未圧縮版は自動的にフォールバックされます。
秘密情報の赤字化
デフォルトでは
claude-replay は埋め込みテキストをスキャンし、一般的な秘密パターンを検出して [REDACTED] に置き換えます。これにより API キー・トークン・接続文字列などが生成ファイルに残らないようにします。
検出対象パターンは以下の通りです:
- API キー (
,sk-…
,sk-ant-…
)key-… - AWS アクセスキー ID (
)AKIA… - Bearer / JWT トークン
- データベース接続文字列 (
,postgres://…
など)mongodb://… - プライベートキー(
)-----BEGIN … PRIVATE KEY----- - キー/値形式の秘密 (
,api_key=…
)auth_token: … - 環境変数 (
,PASSWORD=…
)TOKEN=… - 長い十六進トークン(40文字以上)
重要:パターンベースの赤字化は最善策ですが、すべての秘密形式を捕捉できるわけではありません。公開前に生成ファイルを必ず確認してください。
赤字化を無効化したい場合(内部・プライベート再生):
claude-replay session.jsonl --no-redact -o replay.html
JSONL 転写フォーマット
Claude Code の転写は
type フィールド付きの JSON オブジェクトを 1 行ずつ記録します。
| タイプ | 内容 |
|---|---|
| ユーザー発言(プレーンテキストまたはツール結果配列) |
| アシスタント応答(テキスト、、思考ブロック) |
| システムメタデータ(スキップ) |
| 進捗更新(スキップ) |
| ファイル状態スナップショット(スキップ) |
要件
- Node.js 18+
- ランタイム依存なし(esbuild はビルド時のみの devDependency)
ライセンス
MIT License で公開しています。