UI/UXフレームワーク
動画編集UIの実装技術
推奨: SvelteKit 5
なぜSvelteか
- ・ シンプルな構文でClaude Codeが理解しやすい
- ・ ビルド時コンパイルで高パフォーマンス
- ・ Runes（Svelte 5）でリアクティブな状態管理
- ・ 仮想DOMなしで直接DOM操作
SvelteKit 5
推奨
- ✓ 最もシンプル
- ✓ Runesで直感的
- ✓ Tauriと相性良好
React
実績豊富
- ○ LosslessCut採用
- ○ エコシステム充実
- △ 状態管理が複雑
Vue 3
バランス型
- ○ 学習しやすい
- ○ Composition API
- △ バンドルサイズ
タイムラインUIの実装
Canvas vs SVG vs DOM
Canvas（推奨）
大量のクリップでも高速。ピクセル単位の制御。
SVG
イベント処理が容易。少数クリップ向け。
DOM
最も簡単だがパフォーマンスに限界。
<!-- Timeline.svelte -->
<script lang="ts">
let canvas: HTMLCanvasElement;
let clips = $state([]);
let zoom = $state(1);
let scrollX = $state(0);
$effect(() => {
const ctx = canvas.getContext('2d');
drawTimeline(ctx, clips, zoom, scrollX);
});
</script>
<canvas
bind:this={canvas}
on:mousedown={handleMouseDown}
on:mousemove={handleMouseMove}
/>スタイリング: Tailwind CSS
Tailwind CSSを推奨
- ・ ユーティリティクラスでClaude Codeが生成しやすい
- ・ 一貫したデザインシステム
- ・ ダークモード対応が簡単
- ・ Svelteとの相性が良い
ドラッグ&ドロップの実装
// ドラッグ処理の基本
let dragging = $state(false);
let dragOffset = $state({ x: 0, y: 0 });
function handleMouseDown(e: MouseEvent, clipId: string) {
dragging = true;
dragOffset = {
x: e.clientX - clips.find(c => c.id === clipId).x,
y: e.clientY - clips.find(c => c.id === clipId).y
};
}
function handleMouseMove(e: MouseEvent) {
if (!dragging) return;
// クリップ位置を更新
}
function handleMouseUp() {
dragging = false;
// スナップ処理、位置確定
}キーボードショートカット
動画編集では効率的なキーボード操作が重要です。
Space 再生/一時停止
J K L 逆再生/停止/再生
I O イン/アウト点
Cmd+Z 取り消し