Phase 1: 基盤構築
プロジェクトセットアップとFFmpeg統合
このフェーズの目標
- ✓ Tauri + SvelteKitプロジェクトの作成
- ✓ FFmpegとの基本連携
- ✓ 動画ファイルの読み込みとメタデータ取得
- ✓ 基本的なUI骨格の構築
Step 1: プロジェクト作成
# Claude Codeへの指示
"Tauri 2.0 + SvelteKit 5 + Tailwind CSSでデスクトップアプリプロジェクトを作成して。
プロジェクト名: video-editor
TypeScriptを使用して。"
# 手動で行う場合 npm create tauri-app@latest video-editor cd video-editor npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Step 2: FFmpeg連携の実装
# Claude Codeへの指示
"src-tauri/src/にffmpeg.rsを作成して。
以下のTauriコマンドを実装:
- get_video_info: 動画ファイルのメタデータを取得
- probe_file: ffprobeでファイル情報を取得
FFmpegはstd::process::Commandで呼び出す。"
// src-tauri/src/ffmpeg.rs
use std::process::Command;
use serde::{Deserialize, Serialize};
#[derive(Serialize, Deserialize)]
pub struct VideoInfo {
pub duration: f64,
pub width: u32,
pub height: u32,
pub fps: f64,
pub codec: String,
}
#[tauri::command]
pub fn get_video_info(path: &str) -> Result<VideoInfo, String> {
let output = Command::new("ffprobe")
.args([
"-v", "quiet",
"-print_format", "json",
"-show_format",
"-show_streams",
path
])
.output()
.map_err(|e| e.to_string())?;
// JSONパース処理...
Ok(VideoInfo { /* ... */ })
}Step 3: 基本UIの構築
# Claude Codeへの指示
"src/routes/+page.svelteにメインエディタUIを作成して。
レイアウト:
- 上部: ツールバー
- 左: メディアブラウザ
- 中央: プレビューエリア
- 下部: タイムライン（プレースホルダー）
Tailwind CSSでスタイリング。ダークモード対応。"
Step 4: ファイル読み込み
# Claude Codeへの指示
"動画ファイルをドラッグ&ドロップでインポートできるようにして。
- Tauriのファイルダイアログも使用可能に
- インポート後、get_video_infoでメタデータを取得
- メディアブラウザにサムネイルを表示"
Phase 1 完成イメージ
完了チェックリスト
- npm run tauri dev で起動できる
- 動画ファイルをドロップできる
- メタデータが表示される
- ダークモード切り替えが動作する
実体験: Tauri + Claude Codeの落とし穴
実際に起きた問題
Tauri + SvelteKitで動画編集ソフトを開発し、統合・デプロイ・起動まで成功。 しかしClaude Code CLIで編集しようとすると非常に時間がかかり、どうしようもない状態になった。 結果、Tauriを外してSvelteKitのみの構成に変更した。
# 問題の構造
src/App.svelte 2,726行（モノリシック） src-tauri/src/*.rs Rust複数ファイル src-tauri/Cargo.toml 依存関係 src-tauri/tauri.conf.json 設定 ──────────────────────────────── Claude Codeの負荷: 実質4,000-5,000行相当
原因1: デュアル言語
TypeScript + Rustの両方を理解・生成する必要があり、 コンテキスト消費が2倍以上。Rustは所有権・ライフタイムの理解も必要。
原因2: モノリシック構造
1ファイルに2,726行が集中。小さな変更でも全体を読み込む必要があり、 Claude Codeの処理時間が膨大に。
原因3: Rustコンパイル
Rustの初回ビルドは2-5分、増分でも30秒-2分。 試行錯誤のサイクルが非常に遅くなる。
解決策
ファイルを100-300行単位に分割し、 Rustは最小限（FFmpegラッパーのみ）にすることで Claude Codeの負荷を1/10以下に削減可能。
Tauriだけで動画編集ソフトは作れるか？
結論: 可能だが、設計次第
TauriでLinux対応の安定した動画編集ソフトを開発することは可能。 ただし、Claude Codeと相性よく開発するにはRustを最小限に抑える設計が必須。
推奨アーキテクチャ: Thin Rust Layer
Rustはシステムとの橋渡しのみ担当。ロジックは全てTypeScript側に。
// src-tauri/src/main.rs - これだけでOK（約50行）
#[tauri::command]
fn run_ffmpeg(args: Vec<String>) -> Result<String, String> {
std::process::Command::new("ffmpeg")
.args(&args)
.output()
.map(|o| String::from_utf8_lossy(&o.stdout).to_string())
.map_err(|e| e.to_string())
}
#[tauri::command]
fn run_ffprobe(path: &str) -> Result<String, String> {
std::process::Command::new("ffprobe")
.args(["-v", "quiet", "-print_format", "json",
"-show_format", "-show_streams", path])
.output()
.map(|o| String::from_utf8_lossy(&o.stdout).to_string())
.map_err(|e| e.to_string())
}Thin Rust Layer のメリット
TypeScript側でFFmpegコマンドを構築
// src/lib/utils/ffmpeg.ts
export function buildCutCommand(
input: string,
output: string,
start: number,
end: number
): string[] {
return [
'-i', input,
'-ss', start.toFixed(3),
'-to', end.toFixed(3),
'-c', 'copy',
'-avoid_negative_ts', 'make_zero',
output
];
}
// 使用時
const args = buildCutCommand(inputPath, outputPath, 10.5, 25.0);
const result = await invoke('run_ffmpeg', { args });Claude Code対応のファイル構造
避けるべき構造
src/ ├── App.svelte ← 2,000行以上 src-tauri/ ├── src/ │ ├── main.rs ← 500行以上 │ ├── ffmpeg.rs ← 300行 │ └── ...
推奨構造
src/ ├── App.svelte ← 80行 ├── lib/components/ ← 各150-300行 ├── lib/utils/ffmpeg.ts ← 200行 src-tauri/ ├── src/main.rs ← 50行のみ
ポイント: 各ファイルを100-300行に保つことで、Claude Codeは必要なファイルだけを読み込み、 高速に編集できる。Tauriを使っても、この構造なら問題なく開発可能。