Phase 3: 高度な機能

マルチトラック、エフェクト、トランジション

このフェーズの目標

✓ マルチトラックタイムライン
✓ ビデオエフェクト
✓ トランジション
✓ テキストオーバーレイ

注意: このフェーズは複雑度が上がります。 Claude Codeへの指示を細かく分割し、段階的に実装することを推奨します。

Step 1: マルチトラックタイムライン

# Claude Codeへの指示

"タイムラインをマルチトラック対応にして。
- ビデオトラック最大4つ
- オーディオトラック最大4つ
- トラックの追加/削除
- クリップをトラック間でドラッグ移動
- トラックごとのミュート/ソロ"

データ構造の設計

interface Project {
  tracks: Track[];
}

interface Track {
  id: string;
  type: 'video' | 'audio';
  clips: Clip[];
  muted: boolean;
}

interface Clip {
  id: string;
  sourceFile: string;
  startTime: number; // タイムライン上の位置
  duration: number;
  inPoint: number;  // ソースのイン点
  outPoint: number; // ソースのアウト点
}

Step 2: ビデオエフェクト

# Claude Codeへの指示

"エフェクトパネルを実装して。
FFmpegフィルターを使用:
- 色調補正（brightness, contrast, saturation）
- ブラー
- シャープ
- クロップ
- 回転
パラメータはスライダーで調整可能に。"

FFmpegフィルター例

明るさ: eq=brightness=0.1

コントラスト: eq=contrast=1.2

彩度: eq=saturation=1.5

ブラー: boxblur=5:5

Step 3: トランジション

# Claude Codeへの指示

"クリップ間のトランジションを実装して。
FFmpegのxfadeフィルターを使用:
- フェード
- ワイプ（左/右/上/下）
- ディゾルブ
トランジション長さは調整可能に。"

# クロスフェードの例
ffmpeg -i clip1.mp4 -i clip2.mp4 \
  -filter_complex "xfade=transition=fade:duration=1:offset=4" \
  output.mp4

Step 4: テキストオーバーレイ

# Claude Codeへの指示

"テキストレイヤー機能を追加して。
- テキスト入力
- フォント選択
- サイズ/色/位置調整
- シャドウ/アウトライン
FFmpegのdrawtextフィルターを使用。"

複雑なプロジェクトのレンダリング

フィルターグラフの構築

複数トラック、エフェクト、トランジションを組み合わせる場合、 FFmpegのフィルターグラフを動的に構築する必要があります。

[0:v]trim=0:5,setpts=PTS-STARTPTS[v0];
[1:v]trim=0:5,setpts=PTS-STARTPTS[v1];
[v0][v1]xfade=transition=fade:duration=1:offset=4[out]

完了チェックリスト

複数トラックにクリップを配置できる
エフェクトを適用できる
トランジションが動作する
テキストを追加できる
全て合成してエクスポートできる

← Phase 2: コア機能 Claude Code活用法 →