# HTML生成プロセス手順書

## 概要

このドキュメントは、mugen_ai_lp_web_uiプロジェクトにおけるHTML生成プロセスの手順を説明します。17大区分のCNデータから完全なランディングページHTMLを生成するプロセスを詳細に記載しています。

## 前提条件

- 開発サーバーが起動していること
- `tmp/get_proposal_cn_all_section.json`にCNデータが存在すること
- 必要なAPIエンドポイントが正常に動作していること

## HTML生成手順

### 1. 開発サーバーの起動

```bash
npm run dev:restart
```

このコマンドは自動的に：
- ポート3200で動作中のプロセスをkill
- 開発サーバーを起動
- ログをdev.logファイルとコンソール両方に出力

### 2. CNデータの確認

生成に使用するJSONファイルが存在することを確認：

```bash
ls -la tmp/get_proposal_cn_all_section.json
```

### 3. HTML生成API実行

以下のcURLコマンドでHTML生成を実行：

```bash
curl -X POST "http://localhost:3200/api/cn-html-preview" \
  -H "Content-Type: application/json" \
  -d "{\"cnData\": $(cat tmp/get_proposal_cn_all_section.json)}" \
  -o tmp/final_html_output.html
```

### 4. 生成結果の確認

生成されたHTMLファイルを確認：

```bash
ls -la tmp/final_html_output.html
```

## 生成されるコンテンツ

### 17大区分の対応セクション

1. **問題提起/共感** → グレー背景のストラテジーセクション
2. **シミュレーション** → 黒背景のシミュレーションセクション  
3. **解決策/ベネフィット提示** → 白背景のAIパワーセクション
4. **商品/サービスの特徴** → グレー背景のイノベーションセクション
5. **商品/サービスの詳細情報** → 黒背景のプロダクト詳細セクション
6. **SPオファー/限定特典** → 白背景のスペシャルオファーセクション
7. **料金/プラン** → グレー背景のプライシングセクション
8. **ご利用の流れ/ステップ** → 黒背景の使用フローセクション
9. **成功事例/ユーザーボイス紹介** → 白背景のサクセスストーリーセクション
10. **活用シーン** → グレー背景のユースケースセクション
11. **FAQ/よくある質問** → 黒背景のFAQセクション
12. **競合比較** → 白背景のコンパリソンセクション
13. **権威訴求** → グレー背景のアワードセクション
14. **メディア掲載情報** → 黒背景のメディアセクション
15. **スタッフ・メンバー紹介** → 白背景のスタッフセクション
16. **店舗情報** → グレー背景のストアセクション
17. **News/更新情報** → 黒背景のニュースセクション

### 動的フィールド対応

各セクションは以下の動的フィールドに対応：

- **FAQ**: `質疑`フィールド
- **メディア掲載**: `タイトル`フィールド
- **スタッフ**: `名前`、`導入`、`紹介文`フィールド
- **店舗情報**: `店舗`、`導入`、`詳細情報`フィールド
- **競合比較**: `比較項目`フィールド
- **SPオファー**: `オファー/特典内容`、`ボタン`、`導入`フィールド
- **News**: `タイトル`フィールド
- **シミュレーション**: `質疑`、`ボタン`、`導入`フィールド

## 出力形式

生成されるJSONレスポンス：

```json
{
  "html": "生成されたHTML文字列",
  "css": "対応するCSS文字列", 
  "message": "HTMLが生成されました。"
}
```

## ログ確認

生成プロセスの詳細ログを確認：

```bash
tail -f dev.log
```

主要なログメッセージ：
- `[CN-SAMPLE API] Processing CN sections: { sectionsCount: 17 }`
- `[HTMLGenerator] Starting HTML generation`
- `[HTMLGenerator] Content sections count: 17`
- `[HTMLGenerator] HTML generation completed`
- `[CN-SAMPLE API] HTML generated successfully`

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

### よくあるエラー

1. **Internal Server Error**
   - 開発サーバーを再起動
   - JSONファイルの存在確認

2. **有効なCNデータが見つかりません**
   - リクエストボディが`{cnData: ...}`形式であることを確認
   - JSONファイルの内容を確認

3. **400 Bad Request**
   - CNデータの形式確認
   - 必要なフィールドの存在確認

### 推奨確認手順

1. 開発サーバーログの確認
2. JSONファイルの存在・内容確認
3. APIエンドポイントの動作確認
4. 生成されたHTMLファイルのサイズ確認

## 関連ファイル

- **API Route**: `/app/api/cn-html-preview/route.ts`
- **HTML Generator**: `/server/lib/templates/ContentsHtmlGenerator.ts`
- **CSS Styles**: `/server/lib/styles/common-css.ts`
- **Test Data**: `/tmp/get_proposal_cn_all_section.json`
- **Output**: `/tmp/final_html_output.html`

## 更新履歴

- 2024-12-xx: 初版作成
- 2024-12-xx: 動的フィールド対応追加
- 2024-12-xx: 17大区分完全対応