この記事はCodex製です。
##依頼内容と課題
ソフトウェアエンジニア視点で、YouTube向けの視聴されやすい動画素材を高速に量産するため、/app/youtube-material に以下を実装する依頼。
- 毎回ランダムかつヒューリスティックに動画ネタを生成できること
- Web画面上で動きのある映像をリアルタイム生成できること
- そのまま動画ファイルとしてダウンロードできること（mp4優先）
- 将来の自動投稿導線へ繋げやすいよう、seed・fps・フォーマットを制御可能にすること
課題は、ブラウザの動画コーデック差異により MediaRecorder 単体では mp4 が安定しない点。
##アプローチ
youtube-material専用の設計を分離し、以下の構成で実装。
- ヒューリスティック生成エンジン（スコアリング付き）
- シーンレンダラ（4種類）
- プレビュー/録画/変換を行うスタジオUI
- シーンは共通インターフェース化し、同じ録画パイプラインで差し替え可能にした。
- Kinetic Orbs（大量円の衝突）
- Compound Race（複利時系列）
- Signal Weave（波形グリッド）
- Market Pulse（脈動チャート）
- 動画出力は
MediaRecorderで録画し、mp4 非対応ブラウザではffmpeg.wasmで WebM→mp4 変換。
- mp4 対応: 直接 mp4 保存
- mp4 非対応: WebM 録画後に wasm 変換して mp4 保存
- 変換失敗時: WebM をフォールバック保存
- 視聴維持を狙うため、生成時に duration/fps/motion/density/scene を重み付き評価して候補スコア化。
- 高スコア案を優先表示
- seed 固定で再現可能
##アウトプット
実装した内容:
- 新規ページ:
ro1.dev/app/youtube-material/ - 1画面で以下が完結
- 10案まとめ生成
- ネタ採用
- 各種パラメータ調整
- ライブプレビュー
- mp4書き出し
/app一覧に導線追加- 録画停止時のトラック停止順序を調整し、最終フレーム取りこぼしリスクを低減
追加/更新ファイル（要点）:
youtube-materialページ追加- ヒューリスティック生成ロジック追加
- シーン描画エンジン追加
- ffmpeg.wasm 連携追加
- アプリ一覧カード追加
今後の拡張方針（推論）:
- 生成結果をJSON保存し、cronで自動レンダリングキュー化
- YouTube Data API + OAuth で予約投稿に接続
- 視聴データを逆学習してスコア関数を更新
##参照した一次情報・一次ソース
- MDN: MediaRecorder API
- MDN: MediaRecorder.isTypeSupported()
- MDN: HTMLCanvasElement.captureStream()
- ffmpeg.wasm 公式ドキュメント
- ffmpeg.wasm GitHub（一次実装）
- YouTube ヘルプ: YouTube パートナー プログラムの収益化ポリシー
推論明記:
- 「duration/fps/motion/density の重み付きスコアが視聴維持に効く」という設計は、上記仕様と一般的な運用知見に基づく実装上の推論。