QQQ銘柄動画バッチ生成・R2配信計画

背景

/financial-quiz/proportional-animation-qqqページでは、100銘柄の財務アニメーションを動画としてダウンロードできる機能がある。現在はブラウザ上でリアルタイム生成しているが、以下の理由から事前生成に切り替える。

重要: 無料枠はアカウント単位で適用される。バケット単位やプロジェクト単位ではなく、Cloudflareアカウント全体で10GBを共有。

→ 余裕で無料枠内。エグレス無料のため、ダウンロード数が増えても追加コストなし。

参考:

financial-data.ts (データ)
    ↓ [Node.js スクリプト]
Canvas + Chart.js でレンダリング
    ↓ [FFmpeg]
WebM → MP4 変換・最適化
    ↓ [wrangler r2]
Cloudflare R2 にアップロード

R2 bucket: financial-videos
├── AAPL.mp4
├── GOOGL.mp4
├── MSFT.mp4
├── ... (100銘柄)
└── metadata.json  # 生成日時、バージョン情報

https://r2.eurekapu.com/financial-videos/{ticker}.mp4

または Cloudflare Pages 経由でプロキシ。

Node.js + canvas パッケージで、Vue コンポーネントの描画ロジックを再現。

cd apps/web
node scripts/generate-financial-videos.mjs

Python + FFmpeg で一括変換。

python scripts/convert-to-mp4.py

wrangler r2 object put financial-videos/{ticker}.mp4 \
  --file ./videos/{ticker}.mp4

AnimationExportButton.vue を修正し、事前生成動画への直リンクに変更。

Canvas直接レンダリングが複雑な場合の代替案として、以下がある。

メリット: 既存のレンダリングロジックをそのまま使用デメリット: 時間がかかる（100銘柄 × 約30秒 = 約50分）