docs/specs/html-preview/html-generation-sequence.md

HTML生成シーケンス図

概要

FV（ファーストビュー）とコンテンツHTMLの生成フローを示すシーケンス図です。それぞれ独立したエンドポイントで、即座にHTMLを返します。

FV HTML生成シーケンス

sequenceDiagram
    participant Client as クライアント
    participant API as /html-preview/generate-fv-html
    participant UseCase as FVGenerationUseCase
    participant Pipeline as SimplePipeline

    Client->>API: POST /html-preview/generate-fv-html<br/>{tabName, fvData, provider, screenshotUrl}

    API->>API: fvDataからメインコピー抽出
    API->>API: サブコピー抽出（最大3つ）

    API->>UseCase: executeSimplePipeline({
        screenshotUrl,
        mainCopy,
        subCopies,
        fvData,
        tabName,
        provider
    })

    UseCase->>Pipeline: FV画像生成（AI使用）

    alt 生成成功
        Pipeline-->>UseCase: {html, css, imageUrl}
        UseCase-->>API: 生成結果
        API-->>Client: 200 OK<br/>{html, css, imageUrl, pipelineType}
    else 生成失敗
        Pipeline-->>UseCase: エラー
        UseCase-->>API: エラー情報
        API-->>Client: 200 OK<br/>{html: error_message, css: "", imageUrl: null}
    end

    Note over Client: FVを即座に表示

コンテンツHTML生成シーケンス

sequenceDiagram
    participant Client as クライアント
    participant API as /html-preview/generate-contents-html
    participant GenFunc as generateContentsHtmlWithImages
    participant HTMLGen as HTMLGenerator

    Client->>API: POST /html-preview/generate-contents-html<br/>{tabName, cnData}

    alt ダミーモード(?dummyMode=true)
        API->>API: 事前生成HTMLを読み込み
        API-->>Client: 200 OK<br/>{html: dummy_html, css, message: "ダミーモード"}
    else 通常モード
        API->>GenFunc: generateContentsHtmlWithImages(tabName, cnData)

        alt cnDataが存在する場合
            GenFunc->>HTMLGen: new HTMLGenerator()
            GenFunc->>HTMLGen: generateHTML(requestData)

            Note over HTMLGen: テンプレートベースで<br/>HTML生成（プレースホルダー<br/>画像を自動埋め込み）

            HTMLGen-->>GenFunc: 完全なHTML
            GenFunc->>GenFunc: コンテンツセクション抽出
            GenFunc->>GenFunc: 画像更新スクリプト追加
        else cnDataが空の場合
            GenFunc-->>GenFunc: デフォルトHTML返却
        end

        GenFunc-->>API: {html, css}
        API-->>Client: 200 OK<br/>{html, css, message}
    end

    Note over Client: プレビュー画面に<br/>即座に表示

主要な特徴

1. FVとコンテンツの分離

   • FV: /html-preview/generate-fv-html - AIを使った画像生成を含む
   • コンテンツ: /html-preview/generate-contents-html - プレースホルダー画像付き

2. ダミーモードのサポート

   • クエリパラメータ ?dummyMode=true で事前生成HTMLを使用
   • 開発時の高速テストが可能

3. 即座のレスポンス

   • プレースホルダー画像付きのHTMLを即座に返却
   • ユーザーは待ち時間なくレイアウトを確認可能

4. 画像更新対応

   • 画像更新用のJavaScriptを自動付与
   • 後から画像生成APIで生成された画像に置換可能

5. エラーハンドリング

   • FV生成失敗時もエラーメッセージ付きHTMLを返却
   • システムが完全に停止することを防ぐ