UI デモ動画レコーダー

Playwrightの動画録画機能を使用して、注入されたカーソルオーバーレイ、自然なリズム、ナラティブフローを備えた美しいWebアプリのデモ動画を録画する。

使用場面

• ユーザーが「デモ動画」「スクリーン録画」「操作デモ」または「チュートリアル」を求める場合
• ユーザーが機能またはワークフローを視覚的に見せたい場合
• ユーザーがドキュメント、オンボーディング、ステークホルダーへのデモのために動画が必要な場合

3フェーズのプロセス

すべてのデモは 探索 -> リハーサル -> 録画 の3つのフェーズを経る。録画フェーズに直接ジャンプしない。

---

フェーズ 1：探索

スクリプトを書く前に、ターゲットページを探索して実際の内容を把握する。

なぜか

見たことのない内容のスクリプトは書けない。フィールドが <textarea> ではなく <input> の場合、ドロップダウンが <select> ではなくカスタムコンポーネントの場合、コメントボックスが @mentions や #tags をサポートしている場合があある。仮定は録画を静かに壊す。

方法

フローの各ページに移動し、インタラクティブな要素をダンプする：

// Run this for each page in the flow BEFORE writing the demo script
const fields = await page.evaluate(() => {
  const els = [];
  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {
    if (el.offsetParent !== null) {
      els.push({
        tag: el.tagName,
        type: el.type || '',
        name: el.name || '',
        placeholder: el.placeholder || '',
        text: el.textContent?.trim().substring(0, 40) || '',
        contentEditable: el.contentEditable === 'true',
        role: el.getAttribute('role') || '',
      });
    }
  });
  return els;
});
con…