ローンチ / ウォークスルービデオ
製品、機能、またはページをナレーション付きの短いモーションビデオに変換し、YouTubeに公開してページに埋め込み、告知するための反復可能なパイプラインです。このパイプラインが存在する理由は、手作業で行うたびに、OAuthの癖、ナレーションの同期計算、クリック再生の埋め込み、ラウドネス目標など、数十の非自明な詳細を再発見しなければならないからです。
デフォルトの出力:1080p / 30fpsのビデオ、約45~60秒、感情的なナレーション付きで、最初はユーザーが承認するために限定公開でアップロードされ、その後公開されます。ユーザーが確認していないビデオを公開しないでください。声とペースは主観的なものです。
プロジェクト用に設定する
初回使用前に、config.md(いくつかのIDとパス)を記入してください。このスキルはハードコードされた値ではなく、これらの設定値を読み取るため、どのプロジェクトでも機能します。必要な値は以下の通りです:
- あなたのYouTubeチャンネル(OAuthアカウントで選択されている必要があります)
- あなたのOAuthクライアントシークレットへのパスとGCPプロジェクト番号(YouTube Data API v3が有効であること)
- 完成したビデオの告知先(Slackチャンネル、Discordなど)
- ブランドカラーと製品URLのパターン
使用するタイミング
ページ/機能/ツール用のビデオを作成する、ナレーションを追加する、またはビデオをYouTubeに公開する場合に使用します。「最高のページにビデオを追加してほしい」という広範なリクエストの場合は、まずアナリティクスからトップページを取得し、ページごとにこのパイプラインを実行します。最初に1つパイロット版を作成し、フォーマットの承認を得てから、残りをバッチ処理します。
パイプライン(7ステップ)
上から順に進めてください。各ステップの詳細は、参照ファイルまたはスクリプトに記載されています。
-
主題を理解する。 実装/ドキュメントを読み、表示されるステップが実際の動作と一致していることを確認します。ツールのウォークスルーの場合は、実際のツール(Playwright)を操作して、実際の入力→出力のフローを確認します。それがウォークスルーです。
-
実際のスクリーンショットを撮影する。 本番環境に対してPlaywrightを使用し、1920×1080で撮影します。事前にプロモーションバナーやクッキーバーを非表示にします。
references/video-production.md→ 「スクリーンショットの撮影」を参照してください。 -
Remotionビデオを構築する。
remotion-scaffold/構造をコピーします。シーンはsrc/theme.tsで30fpsのフレーム数でカウントされます。各シーンのサイズをナレーションの長さ(ステップ4)に合わせます。完全なシーン/アニメーションパターンはreferences/video-production.mdにあります。 -
ナレーションを生成する。
scripts/tts_voiceover.py— OpenAIgpt-4o-mini-tts、音声ash、感情を込めるためのinstructionsプロンプト付き(これがないと読み上げが平板でロボット的になります。これは最も重要なVOの詳細です)。シーンごとのクリップを生成し、各シーンの開始フレームに同期させ、ミックスされたトラックのラウドネスを正規化します。クリップがシーンを超える場合は、theme.tsでシーンのタイミングを再調整し、再レンダリングします。 -
レンダリング + マルチプレクス + エンコード。
npx remotion renderを実行し、ffmpegでVOトラックをマルチプレクスし(-c:v copy)、その後 10 MB未満のアップロード用カットをエンコードします(libx264 -crf 25 -movflags +faststart)。コマンドはreferences/video-production.md→ 「レンダリング、マルチプレクス、エンコード」にあります。 -
YouTubeに公開する。
scripts/youtube.py(アップロードにはyoutubeuploaderをラップし、その他すべてにData APIを使用)。限定公開でアップロードし、ユーザーの承認を得てから公開に設定します。最初にreferences/youtube-publishing.mdをお読みください。認証設定、OAuthリダイレクトの落とし穴、API未有効エラー、クォータ制限、メタデータテンプレートが記載されています。 -
埋め込み + 告知。 ページにクリック再生用のフェードセクションを追加します(ポスター + 再生ボタン;YouTubeのiframeはクリック時にのみマウントされ、初期読み込み時にはオフになります)。その後、チームチャンネルにリンクを投稿します。両方のパターンは
references/embed-and-announce.mdにあります。
ガードレール
- 限定公開 → 承認 → 公開、毎回これを行います。ユーザー自身のチャンネルにアップロードするには、ユーザーの承認が必要です。
- Google OAuthの同意はユーザー自身が与える必要があります — 代わりに「許可」をクリックすることはできません。認証が設定されていない場合は、ユーザーをガイドしてください(
references/youtube-publishing.mdを参照)。バイパスしようとしないでください。 - マスターレンダリングは保持してください。アップロード用カットのみサイズ制限があります。
- YouTube APIのクォータは約 24時間に6回のアップロードです。それを超えるバッチは数日に分けて行う必要があります — 途中で静かに失敗するのではなく、その旨を伝えてください。
- CLIではサムネイルを設定できません — ユーザーがStudioで追加するか(またはAPI経由で個別に設定する)必要があることを伝えてください。