アニメーションダウンロード機能 実装計画

概要

proportional-animation-qqq.vue の比例縮尺財務諸表アニメーションをWebM動画としてダウンロードできる機能を追加する。

実装方針

• 出力形式: WebMのみ（高画質、MediaRecorder API使用）
• ボタン位置: AnimationControlPanelの横
• ライブラリ: html2canvas（フレームキャプチャ）+ MediaRecorder API（WebMエンコード）

新規作成ファイル

1. apps/web/app/composables/useAnimationExport.ts

アニメーションエクスポート用の再利用可能なcomposable

// 主要インターフェース
interface ExportOptions {
  fps?: number              // デフォルト: 30
  quality?: number          // ビットレート (デフォルト: 5000000)
  scale?: number            // html2canvas scale (デフォルト: 2)
  holdDuration?: number     // 各期間の表示時間 (デフォルト: 1500ms)
  filename?: string
}

interface AnimationController {
  getPeriodCount: () => number
  setCurrentPeriod: (index: number) => void
  getLabel: (index: number) => string
}

export function useAnimationExport() {
  // exportAnimation(), isExporting, progress を返す
}

2. apps/web/app/components/financial-quiz/AnimationExportButton.vue

ダウンロードボタンUI

• シンプルなアイコンボタン（ダウンロードアイコン）
• エクスポート中はスピナー表示
• AnimationControlPanelのスタイルに合わせる

修正ファイル

1. ProportionalFinancialStatementsAnimated.vue

defineExposeで期間制御インターフェースを公開

defineExpose({
  getPeriodCount: () => maxPeriodIndex.value + 1,
  getCurrentPeriod: () => currentPeriodIndex.value,
  setCurrentPeriod: (index: number) => { currentPeriodIndex.value = index },
  getPeriodLabel: (index: number) => companies[0]?.periods[index]?.label || ''
})

2. proportional-animation-qqq.vue

• template refを追加してチャートコンテナを参照
• AnimationExportButtonを配置
• エクスポート機能を接続

依存関係

cd apps/web
pnpm add html2canvas

技術詳細

フレームキャプチャフロー

1. periodIndex = 0 にセット
2. 550ms待機（500ms transition + 50ms buffer）
3. html2canvasでキャプチャ
4. Canvasに描画 → MediaRecorderでフレーム追加
5. holdDuration分待機（表示時間）
6. 次のperiodへ → 2に戻る
7. 全期間完了後、WebMファイルをダウンロード

MediaRecorder設定

const recorder = new MediaRecorder(stream, {
  mimeType: 'video/webm;codecs=vp9',
  videoBitsPerSecond: 5000000
})

ファイルパス一覧