session-story について
session-storyは、エージェントとユーザーの実際の会話履歴から40~70秒の映像を作るスキルです。会話を原文のまま使い、既知の情報に基づく部屋と独自の音楽を構成し、レンダー前にユーザーの確認と承認を求めます。
主な機能
- 01ローカルの会話履歴を収集
- 02セッションの順序で映像を構成
- 03実際の時刻と会話をそのまま使用
- 04既知の情報から部屋を設計
- 05映像の時間軸に合わせて楽曲を作成
- 06レンダー前に各行を確認
活用シーン
- 01ユーザーとエージェントの典型的な会話を映像化
- 02会話内の作業ややり取りを視覚化
- 03ユーザー提供の記録から確認済みの映像を作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ heygen-com/ hyperframes-community-skills --skill session-storyインストール後、Claude Code で/session-storyを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
assets/engine/index.htmlLICENSE-ClaudeAnimationBaseNOTICE.mdstory.jsassets/engine/kit/clawd.jsconfig.jscore.jshf-bridge.jstimeline.jsassets/engine/scenes/cast-custom.jscompile.jsdesk.jsdirector.jspaper.jsprops-custom.jsprops.jsassets/example/score.pystory.jsonreferences/cast.mdmotion.mdroom.mdscore.mdsources.mdstory.mdscripts/harvest.pynew-project.mjspackage-lock.jsonpackage.jsonschedule.mjsscripts/score/build.sh詳細
セッションストーリー
エージェントはユーザーとの会話履歴を読み、ユーザーの日常のパターンを見つけ、典型的なセッションのひとつを、実際に起きた順に40〜70秒の映像にします。
- ストーリー: ユーザーが実際に話した言葉がオブジェクトとして現れ、エージェント自身の返答が戻っていきます。ウィンドウと壁時計はセッションの実際の時刻に合わせて動きます。
- 部屋: エージェントが把握しているユーザーの情報をもとに装飾します。
- 楽曲: 映像そのもののタイムラインに合わせて、エージェントが作曲します。
story.jsonを書けば、あとはエンジンが振り付けを行います。画面上に表示されるものに、創作されたものはありません。すべてのセリフは引用であり、各フレームをレンダリングする前に、ユーザーがすべてのセリフを承認します。
使用する場合/使用しない場合
- 使用する場合: ユーザーがエージェントとの共同作業を映像にするよう依頼し、そのエージェントがユーザーとの実際の履歴を持っている場合。たとえば、ローカルのトランスクリプトや、ユーザーが貼り付けたメッセージです。
- 使用しない場合: 他人の履歴、チーム共有のログ、架空の引用を使ったマーケティング、またはユーザーが確認しないものには使用しないでください。履歴がまったくない場合は、セッションのメッセージをユーザーに求めてください。引用を決して作り出さないでください。
要件と副作用(完全な一覧)
- ツール: Node 22+、Python 3.9+(標準ライブラリのみ)、PATH上の
ffmpeg、およびnpx --yes [email protected]にバージョンを固定したHyperFrames CLI(初回使用時にnpmレジストリからダウンロード)。 - セットアップ(手動で一度だけ):
sh scripts/setup.shは、コミット済みのロックファイルからnpm ciを実行します。p5 2.3.3(LGPL-2.1)、p5.brush 2.2.3(MIT)、@fontsource/permanent-marker 5.3.0(Apache-2.0)がインストールされます。npmから読み取り専用でダウンロードします。 - 楽曲レンダラー: macOSでは、
swift(Xcode Command Line Tools)でApple内蔵のGeneral MIDIバンクを使って楽曲を再生します。それ以外の環境では、SOUNDFONTに設定したGeneral MIDIサウンドフォントを使うfluidsynthが必要です。どちらも何もダウンロードしません。 - 読み取り(ローカルのみ、ユーザーの承認後): エージェント自身のトランスクリプト、
~/.claude/projects/<project>/*.jsonl(Claude Code)、および~/.codex/sessions(Codex)。ユーザーが--all-projectsを許可しない限り、現在のプロジェクトが対象です。また、部屋の装飾にはエージェントのメモリと指示ファイルも読み取ります。何もアップロードされません。 - 書き込み:
session-story-candidates.json(抽出結果)と、作成するプロジェクトフォルダ内のすべてのファイル。どちらにもユーザーの言葉が含まれるため、決してコミットしたり共有したりしないでください。 - ビルド時のネットワーク通信: ありません。以下の例にあるように、すべての
snapshotに--describe falseを渡してください。GEMINI_API_KEYが設定されている場合、これを指定しないとsnapshotがユーザーの言葉を含むフレームをGeminiに送信します。ローカルでレンダリングします。ページはWebGLで描画します。 - 認証情報不要。有料のAPI呼び出しもありません。
ワークフロー
- セットアップ:
sh scripts/setup.sh(一度だけ)。 - まず確認します。 セッションを見つけるため、ユーザーと一緒にローカル履歴を読むことを伝え、承諾を待ちます。
- 収集:
python3 scripts/harvest.py --project <their project folder> --out <scratch>/candidates.jsonを実行すると、手順が表示され、セッションが一般的なものから順に一覧表示されます。同じ--projectを指定して--session <id>を指定すると、ひとつのセッションが時系列順に、現地時刻とあなたの返信とともに表示されます。references/sources.md を参照してください。 - ひな形の作成:
node scripts/new-project.mjs <dir>。ここから作成するものはすべて<dir>に保存します。 - ストーリー: 典型的なセッションを選び、references/story.md に従って、起きた順に各ビートの実際の時刻を含めて
<dir>/story.jsonに記述します。ユーザーの発言は一字一句そのまま抜き出し、返信にはそのセッションでのあなた自身の言葉を使います。screenにはユーザーの作業画面の様子を設定し、セッションに合ったエンディングを選びます。node scripts/schedule.mjs <dir>で確認し、編集するたびに実行してください。 - ルーム: references/room.md に従い、ユーザーについて知っていることをもとに各スロットを埋めます。ライブラリにユーザーに合うものがない場合は、
<dir>/scenes/props-custom.jsにカスタム小道具を描きます。Claude でない場合は、自分自身を描いてください:references/cast.md。 - プライバシー確認: 画面に表示されるすべての文言(フック、ネームプレート、各引用、各返信、各小道具とその理由)と、その出典をまとめた表をひとつユーザーに提示します。ユーザーの修正を反映し、明示的な承諾を得てから
"approved": trueに設定します。それまでは、すべてのフレームに「DRAFT」のスタンプが表示されます。 - デザイン確認:
schedule.mjsに表示されるsnapshotコマンドを実行します。すべてのフレームを確認し、引用が読みやすいこと、小道具が適切な場所にあること、メッセージが何にも隠れていないことを確認します。コンタクトシートをユーザーに提示します。 - スコア: references/score.md に従い、独自のテーマ、キー、パレットを使って
<dir>/score/score.pyを作成します。その後、sh <dir>/score/build.shを実行します。無音がある場合は失敗します。 - レンダリング:
<dir>からnpx --yes [email protected] checkを実行し、続けてnpx --yes [email protected] render --fps 24 --crf 12 -o renders/session-story.mp4を実行します。 - レンダリング結果の確認: 長さが
schedule.mjsの表示と一致している必要があります。各重要なタイミングのフレームを切り出し(ffmpeg -ss <t> -i renders/session-story.mp4 -frames:v 1 renders/check-<t>.png)、確認します。その後、音声付きで視聴できるよう、ユーザーに渡します。
例(node scripts/new-project.mjs <dir> --example を実行し、その後 schedule.mjs <dir> --example を実行)は、Claude と、動画を制作するこのスキルの作者との実際のセッションをもとにした参考作品です。フォーマットを示すものであり、あなたの作品の構成を示すものではありません。schedule.mjs は --example を指定しないと例を受け付けないため、ユーザーのストーリーの代わりには使えません。
成功の確認
schedule.mjsが終了コード 0 で終了し、警告を出力しないこと。hyperframes checkが成功すること。p5.brush は WebGL のuniform警告をログに出力しますが、無害です。- デザイン確認用のフレームで、すべての引用が読みやすく、ビート表と一致していること。
score/build.shがok: no dead airで終わり、スコアの長さが作品の長さと一致すること。- レンダリング結果の長さが
schedule.mjsに表示された長さと一致し、音声トラックがあり、重要なタイミングのフレームがデザイン確認時のものと一致すること。 - テストする失敗ケース:返信から始まるストーリー、または文字数制限を超える引用では、
schedule.mjsが終了コード 1 で終了し、該当するビート名を表示すること。
エンジンが担当するもの
動きは物理に基づいてすでに調整されています。滑走経路、折りたたみ、投げる動作、揺れ、ぶつかる動作、羽ばたきが含まれます。変更するのはストーリー、ルーム、キャスト、スコアです。バグ修正の場合を除き、scenes/director.js と scenes/compile.js の振り付けには手を加えないでください。動きのルールについてはreferences/motion.mdを参照してください。