デモ動画作成ツール
ブラウザ操作を自動化して、洗練された製品デモ動画を作成します。
概要
- 計画：デモシーケンス（ページ、操作、タイミング）を計画します
- 録画：Playwright CDPスクリーンキャストを使用してフレームを録画します
- エンコード：FFmpegで動画にエンコードします
クイックスタート
前提条件
- OpenClawブラウザが実行中であること（
browser action=start profile=clawd） - アプリにブラウザからアクセスできること（localhostまたはリモート）
- エンコード用にFFmpegがインストールされていること
録画ワークフロー
- OpenClawブラウザが起動していなければ起動します
- 手動で、または
browser action=openを使ってアプリに移動します - ターゲットアプリに合わせて
scripts/record-demo.jsをカスタマイズします - 実行：
node scripts/record-demo.js - エンコード：
bash scripts/frames-to-video.sh
デモの計画
references/demo-planning.mdに、以下のガイダンスがあります：
- デモシーケンスの構造化
- タイミングとペース
- 操作パターン
- 効果的なデモの要素
スクリプト
scripts/record-demo.js
Playwrightテンプレートスクリプト。以下の機能があります：
- CDP経由でOpenClawブラウザに接続
- スクリーンキャストキャプチャを開始（JPEGフレーム）
- デモシーケンスを実行（ナビゲーション、クリック、ホバー、タイピング）
- フレームを出力ディレクトリに保存
各デモごとにカスタマイズする項目：
DEMO_SEQUENCES配列 - ページと操作を定義OUTPUT_DIR- フレームの保存先FRAME_SKIP- スキップするフレーム間隔（小さいほどフレーム数が多い）
scripts/frames-to-video.sh
プリセット付きFFmpegエンコードスクリプト：
mp4- H.264、品質とサイズのバランスが良い（デフォルト）gif- 埋め込み用アニメーションGIFwebm- VP9、より小さいファイルサイズ
使い方：./frames-to-video.sh [入力ディレクトリ] [出力名] [フォーマット]
操作パターン
// ナビゲーション
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// 要素のクリック
await page.locator('button:has-text("作成")').click();
await page.waitForTimeout(500);
// ホバー（ツールチップ、ホバー状態の表示）
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// テキスト入力
await page.locator('input[placeholder="検索"]').fill('クエリ');
await page.waitForTimeout(500);
// キー押下
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// スクロール
await page.evaluate(() => window.scrollBy(0, 300));
ヒント
- タイミング：ページ読み込みに2秒、操作間に0.5～1秒、結果表示に1.5秒
- フレームスキップ：スムーズな動画には3～5、ファイルを小さくするには8～10
- 品質：JPEG品質85～90で、サイズと鮮明さのバランスが良い
- 解像度：ブラウザウィンドウサイズが出力解像度を決定します
- ループ：GIFはシームレスにループするよう、開始位置で終了する
注意点
- スクリーンショットと動画の使い分け： ユーザーが機能を確認するだけであれば、フル動画を録画する代わりにインラインでスクリーンショットを取得してください。まず
browser action=tabs profile=clawdで確認し、該当タブが開いていれば、サブエージェントを使わずに直接スクリーンショットを取得します。 - コンテキスト制限： スクリーンショットを多用する録画ループは、コンテキストを急速に消費します（20万トークン制限）。範囲を絞り、すべてのフレームを先に録画してから分析するようにし、フレームキャプチャと分析をインターリーブしないでください。コンテキストが逼迫している場合は、フレームをディスクに書き込み、別パスで分析します。
- 並行エージェントのリスク： 同じブラウザタブに対して複数のデモエージェントを同時に起動しないでください。互いのナビゲーション状態に干渉します。