Phase 2: コア機能

カット編集とエクスポート機能の実装

このフェーズの目標

✓ 動画プレーヤーの実装
✓ タイムラインUIの基本実装
✓ カット・トリミング機能
✓ 動画エクスポート

Step 1: 動画プレーヤー

# Claude Codeへの指示

"src/lib/components/player/VideoPlayer.svelteを作成して。
機能:
- HTML5 Video要素を使用
- 再生/一時停止ボタン
- シークバー
- 現在時間/総時間表示
- 音量コントロール
Svelte 5のRunesで状態管理。"

<script lang="ts">
  let videoElement: HTMLVideoElement;
  let playing = $state(false);
  let currentTime = $state(0);
  let duration = $state(0);

  function togglePlay() {
    if (playing) {
      videoElement.pause();
    } else {
      videoElement.play();
    }
    playing = !playing;
  }
</script>

<video
  bind:this={videoElement}
  on:timeupdate={() => currentTime = videoElement.currentTime}
  on:loadedmetadata={() => duration = videoElement.duration}
/>

Step 2: タイムラインUI

# Claude Codeへの指示

"src/lib/components/timeline/Timeline.svelteを作成して。
機能:
- Canvas要素で描画
- クリップをドラッグで移動
- ズーム機能（マウスホイール）
- 再生ヘッド表示
- タイムルーラー"

Step 3: カット・トリミング

# Claude Codeへの指示

"カット編集機能を実装して。
- イン点/アウト点の設定（Iキー/Oキー）
- 選択範囲のカット
- Rust側でFFmpegを呼び出してカット処理
- ロスレスカットを優先（-c copy）"

// src-tauri/src/commands/cut.rs
#[tauri::command]
pub async fn cut_video(
    input: &str,
    start: f64,
    end: f64,
    output: &str
) -> Result<(), String> {
    let status = Command::new("ffmpeg")
        .args([
            "-i", input,
            "-ss", &format!("{:.3}", start),
            "-to", &format!("{:.3}", end),
            "-c", "copy",
            "-avoid_negative_ts", "make_zero",
            output
        ])
        .status()
        .map_err(|e| e.to_string())?;

    if status.success() {
        Ok(())
    } else {
        Err("Cut failed".to_string())
    }
}

Step 4: エクスポート機能

# Claude Codeへの指示

"エクスポートダイアログを実装して。
設定項目:
- 出力フォーマット（MP4, WebM, MOV）
- 解像度プリセット
- コーデック選択（H.264, H.265, VP9）
- 品質/ビットレート
進捗バーも表示して。"

キーボードショートカット実装

Space 再生/一時停止

I イン点設定

O アウト点設定

←/→ 1フレーム移動

Cmd+E エクスポート

Cmd+Z 取り消し

完了チェックリスト

動画が再生できる
タイムラインにクリップが表示される
イン/アウト点が設定できる
カットした動画がエクスポートできる

← Phase 1: 基盤構築 Phase 3: 高度な機能 →