# 🎬 ポスター生成デモ録画ガイド

ポスター生成プロセスを自動的に録画する2つのスクリプトを提供しています。

## 🎲 ランダム10パターン録画（推奨）

`record-10-random.js` - ランダムなポスターとキャラクターの組み合わせで10回録画します。

### 特徴

- **ベースポスター**: 24個からランダム選択
- **キャラクター数**: 確率的に選択
  - 1個: 70%
  - 2個: 25%
  - 3個: 5%
- **スムーズスクロール**: ページ下部への移動時に滑らかなアニメーション
- **タイムアウト**: 16分
- **エラー検出**: 500系エラー時に3秒後に録画終了

### 実行方法

```bash
# スクリプトを実行
node record-10-random.js

# または
pnpm run record-random
```

## 📋 固定5パターン録画

`record-5-patterns.js` - 事前定義された5つのパターンで録画します。

### 録画パターン

| # | ベースポスター | キャラクター | 説明 |
|---|---------------|-------------|------|
| 1 | base_1.jpg (index 1) | character 27 | 単一キャラクター |
| 2 | base_4.jpg (index 4) | character 53 | 単一キャラクター |
| 3 | base_9.jpg (index 9) | character 14 | 単一キャラクター |
| 4 | base_17.jpg (index 17) | character 7 | 単一キャラクター |
| 5 | base_20.jpg (index 20) | character 6 & 8 | 複数キャラクター |

## 🚀 実行方法

### 1. 依存関係のインストール（初回のみ）

```bash
cd /var/www/tkim.planitai.co.jp/blog/20251216-generate-poster-2

# pnpmで依存関係をインストール
pnpm install

# Playwrightブラウザをインストール
pnpx playwright install chromium
```

### 2. 録画実行

```bash
# スクリプトを実行
node record-5-patterns.js

# または
pnpm run record
```

## 📁 出力

録画された動画は `videos/` ディレクトリに保存されます:

```
videos/
├── video-1.webm  (Pattern 1)
├── video-2.webm  (Pattern 2)
├── video-3.webm  (Pattern 3)
├── video-4.webm  (Pattern 4)
└── video-5.webm  (Pattern 5)
```

## ⏱️ 予想時間

- **各パターン**: 3〜16分（API生成時間に依存）
- **合計時間**: 約15〜80分
- **タイムアウト**: 16分（960秒）

## 📊 スクリプトの動作

各パターンで以下を実行します:

1. ✅ ページにアクセス
2. ✅ 既存のギャラリーをスクロール表示
3. ✅ 指定したポスターベースを選択
4. ✅ 指定したキャラクターを選択
5. ✅ 生成ボタンをクリック
6. ⏳ 生成完了を待機（最大16分）
7. 🔍 500系エラー（500/502/503/504）をチェック
   - ⚠️ エラー検出時: 3秒後に録画終了
   - ✅ エラーなし: 正常に続行
8. ✅ 結果ページを表示
9. ✅ メインページに戻る
10. ✅ 新しく生成されたポスターをギャラリーで表示

## 🛠️ カスタマイズ

`record-5-patterns.js` の `patterns` 配列を編集することで、パターンをカスタマイズできます:

```javascript
const patterns = [
  { name: 'pattern1', baseIndex: 1, characters: [26] },
  { name: 'pattern2', baseIndex: 4, characters: [52] },
  // ... 追加のパターン
];
```

## 🔧 トラブルシューティング

### タイムアウトエラー

API生成に10分以上かかる場合、スクリプトの `timeout` 値を増やしてください:

```javascript
await page.waitForSelector('.generated-section, .error', { timeout: 900000 }); // 15分
```

### ビデオファイルが見つからない

`videos/` ディレクトリが存在することを確認してください:

```bash
mkdir -p videos
```

## 📝 注意事項

- ⚠️ 録画中はページを手動で操作しないでください
- ⚠️ API制限に注意してください（5つのリクエストが連続で送信されます）
- ⚠️ 十分なディスク容量があることを確認してください（各動画 ~50-100MB）