Hugging Face's logo

Spaces:
KazukiWatanabe
/
FE_Test
Sleeping

App Files Community
FE_Test / docs /html-generation-process.md
GitHub Actions
Deploy from GitHub Actions [test] - 2025-10-31 10:18:25
5f2aab6
preview code
|
raw
history blame contribute delete
5.1 kB

HTML生成プロセス手順書

概要

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

前提条件

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

HTML生成手順

1. 開発サーバーの起動 

npm run dev:restart

このコマンドは自動的に：

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

2. CNデータの確認

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

ls -la tmp/get_proposal_cn_all_section.json

3. HTML生成API実行

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

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ファイルを確認：

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レスポンス：

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

ログ確認

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

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大区分完全対応