demo-maker は何をしますか？
🎬 ウェブサイト向けオープンソースのプロダクトデモ動画メーカー。 YAML設定とPlaywrightを使って一貫性のあるウェブサイトデモ動画を作成 — 手動クリックや再録画は不要です。
バージョン管理されたシナリオ設定から、一貫性のあるプロダクト機能動画を作成 — 再設定、再実行、手動による再録画は不要です。
なぜ必要か？
プロダクトUIは変化し続けるため、デモ動画はすぐに古くなります。手動での再録画（またはエージェントに「ただ動画を作って」と頼むこと）は、時間とコストがかかり、さらに人間による確認が必要です。
demo-makerを使えば、ウォークスルーをYAMLとしてバージョン管理できます：ステップを編集し、再実行し、同じMP4を取得できます。フラグメントとインポートによりフローを再利用可能に。あなたやAIエージェントがコードのようにスクリプトをメンテナンスできます。
副次効果： 安定したロケーターを書くことで、実際のUIのギャップ（ラベル不足、重複するアクセシブル名、ターゲットにしにくいリスト行など）が明らかになり、デモ作成と同時にアクセシビリティを改善できることがよくあります。
必要条件
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg が
PATHに含まれていること（MP4再エンコード、cut_videoスプライス、バックグラウンドオーディオ用）
インストール
npm に @a1knowhow/demo-maker として公開されています：
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
またはリポジトリをクローンして：
npm install
npx playwright install chromium
パッケージにはTypeScriptソースが含まれており、tsx を介して実行されます。ライブラリのインポート（import … from "@a1knowhow/demo-maker"）には、TypeScript対応のツールチェーン（tsx、Vitest、またはバンドラー）が必要です。ランタイム機能については Security を参照してください。
クイックスタート
npx demo-maker run examples/smoke.yaml --headless --fast
ステップバイステップ（インストール → 初めてのMP4 → 録画 → フラグメント）： Getting started · docs on GitHub
ウォークスルー例
イントロツアー：このリポジトリをGitHubで開き、getting-started → actions → locators（インポート、タイトルカード、キャプション、ペーシング）を順に進みます：
npx demo-maker run examples/demo1-introduction.yaml
よりリッチなCIウォークスルー（Actions → green run → test job）：
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml は最小限のチェック用)
ドキュメント
サイト： https://a1knowhow.github.io/demo-maker/
| トピック | ドキュメントサイト | ソース |
|---|---|---|
| インデックス | docs site | docs/index.md |
| はじめに | getting started | docs/getting-started.md |
| CLI | CLI | docs/cli.md |
| アクション | actions | docs/actions.md |
| ロケーター | locators | docs/locators.md |
| 動画とペーシング | video & pacing | docs/video-and-pacing.md |
| 録画 | recording | docs/recording.md |
| UI変更後の修復 | repairing | docs/repairing-scenarios.md |
型付きスキーマ：src/types.ts
コマンド
| コマンド | 目的 |
|---|---|
demo-maker run <scenario.yaml> | シナリオを実行（オプションで動画出力） |
demo-maker check <scenario.yaml> | --fail-fast --fast 付きで run を実行 |
demo-maker record | アクションをYAMLにライブ録画 |
demo-maker import | DevTools / レコーダーのJSONをYAMLに変換 |
demo-maker export-chapters | タイミングJSONからYouTubeチャプター行を生成 |
セキュリティ
脆弱性は非公開で報告してください — SECURITY.md を参照。セキュリティバグについては公開Issueを開かないでください。
ライセンス
Apache License 2.0 — LICENSE を参照。
A1KnowHowについて
demo-makerは、もともと A1KnowHow 向けのデモ動画を作成するために開発されました — AIワークフロー、ドキュメント整理、チャット、検索、スキルとMCPツール統合を備えたAIエージェント向けです。