埋め込みJS・ZIP配布 v0.1（確定）

LP定義は lp-definition-v0.1.md、計測は analytics-events-v0.1.md に従う。

1. 埋め込みJS

1.1 読み込み

<script src="https://{配信元}/swipe-lp/v0/runtime.js" defer></script>

defer 推奨。バージョンはURLに含め、メジャー互換が壊れるときだけパスを上げる。

1.2 マウント先（コンテナ）

ランタイムは 1つのルート要素 にマウントする。

<div
  id="swipe-lp"
  data-swipe-lp-id="01JRQEXAMPLELPID00"
  data-swipe-lp-api-base="https://api.example.com"
  data-swipe-lp-public-key="pk_live_xxxxxxxx"
></div>

任意:

1.3 プログラム初期化（data属性の代替）

window.SwipeLP.mount('#swipe-lp', {
  lpId: '01JRQEXAMPLELPID00',
  apiBase: 'https://api.example.com',
  publicKey: 'pk_live_xxxxxxxx',   // 省略可
  surface: 'embed',                // 省略時 embed
  // 任意:
  fillContainer: false,            // true: 親要素の高さ(100%)に合わせる
  desktopFrame: 'letterbox',       // 'letterbox' | 'none'。省略時は LP 定義の値
  desktopMaxWidth: 420,            // letterbox 時のコンテンツ最大幅(px)
  basePath: '/campaign/foo/',      // 任意: 相対 media の解決基準
});
window.SwipeLP.unmount('#swipe-lp'); // v0.2: 計測 flush 後に DOM を除去

SwipeLP.mount は 同一要素に再呼び出し可（内部で先にクリーンアップ）。明示的に外す場合は SwipeLP.unmount。

1.4 グローバル名

1.5 LP定義の取得（埋め込み時）

ランタイムは次を GET する（相対パスは apiBase からの結合）。

GET {apiBase}/v1/public/lp/{lpId}

200 ボディ例:

{
  "definition": { "...": "lp-definition-v0.1 と同一スキーマ" },
  "revision": "1"
}

• ビューアは definition.revision と定義内の revision の整合を確認し、不一致なら定義内を優先してよい（サーバ実装の単一化のため両方持てる）。
• 404 … エラーUIを表示。

レスポンス型・HTTPステータス・キー検証の詳細は api-v0.1.md。

1.6 分析の送信

• URL: POST {apiBase}/v1/analytics/events
• ヘッダ: X-SwipeLP-Key: {publicKey}（publicKey があるとき必須）
• ボディ: { "events": [ ... ] }（各要素は analytics-events-v0.1.md）

publicKey が無い場合は リクエストを送らない（開発用・社内限定公開向け）。

キー形式・検証・エラーコードは api-v0.1.md。

2. ZIP配布

2.1 ルート構成（確定）

ZIPを解凍したルートに次を置く（名前は固定）。

マニフェストという別名は使わず、LP本体は常に lp.json と呼ぶ。追加設定は swipe-lp.config.json のみ。

2.2 swipe-lp.config.json

{
  "schemaVersion": "0.1",
  "surface": "zip",
  "apiBase": "https://api.example.com",
  "publicKey": "pk_live_xxxxxxxx",
  "analytics": {
    "enabled": true
  }
}

ZIP単体で 完全オフラインのときは swipe-lp.config.json を省略するか analytics.enabled: false とし、イベントは送信しない。

2.3 index.html の責務

• swipe-lp.runtime.v0.js を読み込む。
• 空の div に対し、lp.json を 相対パスで fetch してから SwipeLP.mount に渡すか、ランタイムが ./lp.json を既定読み込みする実装でもよい（実装側でどちらかに統一）。
• swipe-lp.config.json がある場合は同様に読み、surface: zip と計測設定を適用。

2.4 相対パス規則

• lp.json 内の media.src は assets/ からの相対（例: assets/01.webp）。
• index.html から lp.json は ./lp.json。
• ランタイムからの fetch は ZIPルートを基準にする。サブパス配置時は basePath（mount オプション / config）を利用。

3. プレビュー（管理画面）

• surface は preview。
• 埋め込みと同様に apiBase + lpId で定義取得するか、iframe 内にインラインJSONを渡す実装でもよい（実装詳細は管理画面側）。イベント送信は本番と同じエンベロープ。

4. ホスト型公開URL（/p/{publicId}）

埋め込み先の HTML を持っていない利用者向けに、当サーバが直接 LP を返す閲覧専用ページを提供する。

4.1 URL

GET https://{site-origin}/p/{publicId}

{publicId} は LP 定義の id と一致する公開ID（例: 01JRQEXAMPLELPID00）。

4.2 振る舞い

• 200: LP 本体を全画面で表示（fillContainer: true 相当）。PC では LP 定義 swipe.desktopFrame（既定 letterbox）に従い中央寄せ＋左右帯で見える。
• 404: 「未公開・存在しない」案内ページ（robots: noindex, nofollow）。
• 410: 「公開を取り下げました」案内ページ。
• SSR で <title> ・ description ・ OG/Twitter カードを LP meta から自動生成する。

4.3 計測

• 公開時に live 計測キー（pk_live_*）が LP に紐づいていれば、GET /v1/public/lp/{id} の publicKey 経由で 当ページからも計測する（同一オリジンの /api へ POST /v1/analytics/events）。
• キーが無い・非公開の場合は閲覧のみ（イベント送信なし）。
• 計測キーを別管理したい場合は自サイトに埋め込み（§1）するか、ZIP に swipe-lp.config.json を入れる（§2）。

v0.2 以降の候補

• SwipeLP.unmount（実装済）
• ZIPをサブパス（/campaign/foo/）に置いたときの basePath（実装済）
• 埋め込みでの インライン定義（小規模LP向け）