デモビデオ
プロジェクトのライブサイトまたはアプリを実演するフルHD MP4を生成します。実際の画面録画、ユーザーの言語によるナレーション、埋め込みキャプション、BGM、そして共有リンクを含みます。すべてコンテナ内でagent-browser、ffmpeg、プロジェクトのAIプロキシを使用して実行されます（料金はプロジェクトのクレジットに請求されます）。典型的な成果物：1～3分、10～20 MB、エージェント作業時間約1～2時間。すべての作業は video/ ディレクトリ内で行われます（build/ と out/ はgit管理から除外）。
使用するタイミング
- 「システムの動作を示す動画を作って」、プロモーション、広告、クライアントデモ
- オファー、リリースノート、ランディングページのためのウォークスルー
- ユーザー自身が録画する場合には使わないでください。その場合は
docs/demo/script.mdに撮影スクリプト（シーン、アクション、言うべきテキスト）を書いてください。
パイプライン（各ステップは再開可能：再実行は完了した出力をスキップ）
| ステップ | コマンド | 出力 |
|---|---|---|
| 0. セットアップ | bash .claude/skills/demo-video/setup.sh | ffmpeg、キャプションフォント、video/ フォルダ |
| 1. スクリプト | video/vo/narrator.json と video/scenes.mjs を作成（examples/ から開始） | 計画 |
| 2. ナレーション | node .claude/skills/demo-video/tts.mjs video/vo/narrator.json video/build/vo | s01.wav… + s01.txt（実際に話された内容） |
| 3. 録画 | source .claude/skills/demo-video/rec-lib.sh の後、take_start、mark、take_stop | video/build/rec/<take>.mp4 + .marks |
| 4. カード | card_take <name> "file://$PWD/video/cards/<name>.html?…" <秒数> | video/build/rec/card-<name>.mp4 |
| 5. 効果音 | node .claude/skills/demo-video/sfx.mjs | video/build/sfx/chime.wav、click.wav |
| 6. 編集 | node .claude/skills/demo-video/compose.mjs video/scenes.mjs | video/out/<name>.mp4（BGMなしの場合は自動生成） |
| 7. QA | node .claude/skills/demo-video/listen.mjs video/out/<name>.mp4 "<質問>" とフレーム抽出 | 修正後、ステップ6を再実行 |
| 8. 公開 | node .claude/skills/demo-video/publish.mjs video/out/<name>.mp4 --cover 16 | プロジェクトストレージ内のキー + サムネイルJPG |
（npx skills add でインストールした場合は .agents/skills/demo-video/ となります。）
良いビデオを作るために
スクリプトを先に。 ナレーターの台詞は10～15行、1行に1つのアイデア、8～15語、ユーザーの言語で。事実のみ：プロジェクト自身のデータで確認できない数字、顧客、受賞歴を主張しないこと。ブランド名や頭字語は pronounce に記述して正しく読ませます。各行は1つのシーンに対応します。
音声。 プロキシにはTTSモデルはありません。tts.mjs はLiveモデル（gemini-3.8-live）を使用して各行をそのまま読み上げ、3回の試行から最良のものを選択します（モデル自身の文字起こしとスクリプトを比較し、80%以上の単語一致）。各行につき1つのWAVファイルを書き出します。音声：Kore、Charon、Puck、Fenrir、Aoede。ナレーターには1つの音声、カスタマー役には別の音声を使用します。実行後に s*.txt を読み、異なる行があればそのWAVを削除して再実行します。
録画。 クリーンな状態から開始：新しいブラウザコンテキスト、空のカート、保存されたフォームの下書きなし（agent-browser eval 'sessionStorage.clear()'、同様にアプリが使用する localStorage キーもクリア）、パスワードが画面上で入力されないように録画前にログイン。typeslow で入力、編集でカットするクリックの前に mark <ラベル> を呼び出し、AIの応答は wait_gone "<検索テキスト>" で待機、表示している要素を画面外にスクロールしないこと。ラベルテキストではなく要素参照（snapshot からの @e12）でクリック。take_start はビューポートを1600×900に設定（デフォルトは1280×720で1080pには小さすぎる）。1シーンにつき1テイク。製品に音声エージェントがある場合、実際のAPIを通して実際の対話を録画し（examples/voice-exchange.mjs）、カードとして再生し、偽装しないでください。
カード。 examples/cards/ にはイントロ（アニメーション数字、ロゴ、ピル）、音声通話カード、アウトロがあります。video/cards/ にコピーし、色、ロゴ、テキストをブランドに合わせて変更。URLでタイミングを渡し（?t1=<s>）、アニメーションが音声に合うようにします。
編集（scenes.mjs）。 各シーンはテイクの断片 [テイク, 開始, 終了, 速度, ズーム?] と音声 ['vo:s01', 開始時間] で構成されます。待機時間は2～5倍に高速化、小さなテキストのパネルには zoom で拡大、新しいセクションごとに chapter チップを表示、下部キャプションが表示中のUIを隠す場合は cap: 'left' を使用、成功時（カートに追加、注文完了）には sfx チャイム。編集はシーンごとにキャッシュされ、変更されたシーンのみ再レンダリングされます。
音声。 BGMは compose.mjs により合成されます（ライセンスリスクなし）。音声に合わせて自動的にダッキングされます。scenes.mjs で music: 'path/to/track.mp3' を設定するとユーザー自身のトラックを使用できます。出力は −16 LUFS にノーマライズされます。
納品前にQA。 listen.mjs でミックスをGeminiに送信：発音、誤って読まれた単語、音楽と音声のバランス、グリッチ、長い沈黙について質問します。その後、各シーンから1フレームをフル解像度で取得し（ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.png）、キャプションがUIと重なっていないか、テキストが切れていないか、画面の状態が正しいかを確認します。修正後、ステップ6を再実行します。
納品。 テスト注文/データを削除し、agent-browser close --all を実行、video/ のツールとスクリプトをコミット（build/、out/ は除く）。リンク、ローカルパス、動画で示している内容の短いリスト、そして撮影中に修正した製品のバグ（エンドツーエンドのフローを録画すると実際のバグが見つかることが多いので、修正してください。これらは実際のユーザーに影響します）を提供します。
公開
publish.mjs は、正しいコンテンツタイプでプロジェクトのストレージにアップロードし（通常のストレージアップロードは動画をダウンロードとして提供）、公開URLを出力します。openkbs.json に "storage": { "cloudfront": "media" } がある場合、openkbs deploy がそのパスを設定した後、ファイルは <site>/media/<key> に配置されます。CDNにストレージがない場合は、ファイルを site/ に置いてデプロイするか、openkbs storage download で共有します。--cover <秒数> はJPGフレームもサムネイルとしてアップロードします。
要件
- Studioコンテナ：
ffmpeg（セットアップでインストール）、agent-browser、~/.openkbs/projectJWT内のプロキシJWT。Studio外ではOPENKBS_API_KEYを設定。 - キャプション用フォントは
setup.shによりvideo/build/fontsにダウンロードされます（Golos Text、Fira Sans Extra Condensed：ラテン文字＋キリル文字、OFLライセンス）。