# Remotion x VOICEVOX ゆっくり解説テンプレート

Remotion と VOICEVOX を組み合わせて、複数キャラクターが時系列で登場・発話する動画テンプレートです。
サンプルテーマは「ネコミミはなぜかわいいのか？」です。

## 使い方

### 1. 依存関係をインストール
```bash
npm install
```

### 2. VOICEVOX エンジンを起動
VOICEVOX のエンジンを起動してください。既定では `http://host.docker.internal:50021` を参照します。
詳細は公式リポジトリを参照してください。

https://github.com/VOICEVOX/voicevox_engine

### 3. 脚本を編集
`src/data/script.ts` の `characters` と `timeline` を編集します。

```ts
show("sayo", {caption: "ネコミミ代表として、小夜が登場！"});
say("sayo-001", "sayo", "小夜です。ネコミミ代表として、耳のかわいさを証明しに来ました。");
say("zunda-005", "zundamon", "それじゃあ、また次回なのだ！");
```

- `characters`: 表示名、VOICEVOX の `speakerName` / `styleName`、立ち絵設定を定義します。
- `initialVisibleCharacters`: 動画開始時から表示するキャラクターを定義します。
- `show(...)`: キャラクターを画面に登場させ、任意の説明字幕を出します。
- `say(...)`: キャラクターに読み上げさせ、字幕と音声を同期します。
- 行ごとにスタイルを変える場合は `say(..., {voicevox: {styleName: "スタイル名"}})` を使います。

### 4. 音声を生成
```bash
npm run voice:generate
```

`src/data/script.ts` の `say(...)` から `public/audio/lines/*.wav` を生成し、
`src/data/voicevox-manifest.json` に長さ・話者・スタイル情報を記録します。
音声が未生成の行は、プレビュー時にテキスト長から尺を推定します。

### 5. プレビュー
```bash
npm run start
```

### 6. レンダリング
```bash
npm run render YukkuriZundamon out/video.mp4
```

## 編集ポイント
- 時系列脚本: `src/data/script.ts`
- 音声タイミング: `src/data/voicevox-manifest.json` (自動生成)
- 映像の構成: `src/yukkuri-composition.tsx`

## 字幕方針

本テンプレートは、短編 VOICEVOX ドラマ動画や、実写映像を背景にした解説動画での利用を主用途としています。

そのため、字幕は `@remotion/captions` の `Caption` 型 JSON による単語単位・時刻単位の正式な字幕データとしては扱わず、`src/data/script.ts` の `say(...)` / `show(...)` に紐づく発話単位・シーン単位の表示テキストとして扱います。

`say(...)` の字幕は VOICEVOX で生成した音声尺、または未生成時の推定尺に同期して表示します。SRT/VTT 互換、単語単位ハイライト、自動文字起こし字幕が必要になった場合は、その時点で `@remotion/captions` の導入を検討します。

## VOICEVOX設定
- `VOICEVOX_URL` (既定: `http://host.docker.internal:50021`)
- 話者とスタイルは `src/data/script.ts` の `characters.*.voicevox` で指定します。

## 立ち絵の差し替え
現在の小夜は CSS の仮立ち絵です。画像素材を使う場合は `public` 配下に画像を置き、
`characters.sayo.avatar.imagePath` に `images/sayo.png` のような `public` からの相対パスを設定してください。

以前の `public/audio/zundamon.txt` と `src/data/script.json` は互換用に残していますが、現在は参照しません。