# Hosted Pages WebViewとBridgeの連携

Hosted Pagesのホストページとネイティブアプリを連携する場合に使用します。キャンペーン設定とLaunchについては、[Hosted Pages](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)を参照してください。

Beta
Hosted PagesのSDK API、Bridgeメソッド、ペイロード、配布方法は、一般提供前に変更される場合があります。

## ホストページの要件

ホストページは次の要件を満たす必要があります。

- HTTPSを使用する
- 閉じる、戻る、完了など、明確な終了操作を提供する
- レスポンシブなviewportを使用し、モバイル画面サイズに対応する
- SDKが周辺の表示を管理する場合、キャンペーン用のOverlayを重ねて描画しない
- Safe Area付近でも操作できるコントロールを配置する
- アプリの画面幅を固定値として扱わない
- JavaScriptと外部リソースをキャンペーンに必要な範囲に限定する


プレビューSDKはページスクリプトの実行前に`window.TDContext`を注入します。Bridgeの正確なメソッド名とコールバック動作は、プレビューSDKの契約に含まれます。

## アプリとSDKの責務

| 責務 | お客様のアプリ | Engage Mobile SDK |
|  --- | --- | --- |
| ユーザーの同意とアプリの状態を取得する | ✓ |  |
| トリガーイベントを提供する | ✓ |  |
| オーディエンスと配信条件を評価する |  | ✓ Realtime Personalization |
| フルスクリーンWebViewを表示する |  | ✓ |
| アプリが所有するDeep Linkを解決する | ✓ |  |
| `profileContext`を提供する | ✓ | ページへ注入する |
| カスタム`invoke`アクションを認可する | ✓ | リクエストを渡す |
| 対応するWebリンクを開く |  | ✓ SDKが対応する範囲 |


## Profile Context

アプリはJSON化可能な値を提供し、SDKは`window.TDContext`としてHosted Pagesページに注入します。

```javascript
const tier = window.TDContext?.member_tier;
const points = window.TDContext?.points;
```

APIキー、Personalization token、パスワード、不要な個人データをコンテキストに含めないでください。サインイン中のユーザーが変わったら、コンテキストをクリアまたは置き換えます。

## Hosted Pages Bridge API

SDKはページスクリプトの実行前に`window.TDBridge`を公開します。SDK外でも読み込むページでは存在を確認し、ページの初期化前に`TDBridgeReady`イベントを待ちます。

```javascript
TDBridge.closeMessage();
TDBridge.closeMessage("completed");
TDBridge.openUrl("https://example.com/next");
TDBridge.invoke("openProduct", { product_id: "product-123" });
TDBridge.track("form_submit", { form_id: "signup" });
```

- `closeMessage(label)`はエクスペリエンスを閉じます。任意のラベルは、計測でDismissの発生元を識別するために使用できます。
- `openUrl(url)`はアプリとSDKにURL処理を依頼し、通常は現在のエクスペリエンスを先に閉じます。
- `invoke(name, params)`はアプリ固有のアクションをネイティブBridgeへ送信します。アプリでアクションとすべてのパラメーターを認証・認可・検証してください。
- `track(event, values)`は顧客定義のコンテンツイベントを送信します。SDKが生成する`click`計測イベントとは別のイベントです。


通常の`<a href="https://...">`はHosted Pages内で遷移します。エクスペリエンスを表示したまま外部に開く場合は`target="_blank"`を使用します。アプリ所有のナビゲーションでエクスペリエンスを閉じる場合は`TDBridge.openUrl(url)`を使用します。

SDKはHosted Pages WebViewのviewportを管理します。固定のデバイス幅を前提にせず、レスポンシブCSSと必要に応じた`env(safe-area-inset-*)`を使用してください。

## リンクとカスタムアクション

Hosted PagesコンテンツはSDK Bridgeを介してアプリと連携できます。ビジネス上の認可とナビゲーションはアプリが担当します。

- アプリが所有するCustom Schemeは、アプリのLink HandlerまたはBridge Delegateで解決する
- Web URLは、SDKのデフォルトのアプリ内ブラウザー動作を使用できる
- カスタムアクションでは、アクション名、ログイン状態、権限、すべてのパラメーターを検証する
- アプリ側で別のブラウザーを開いてから、未処理の結果をSDKへ返さない


プラットフォーム別のAPIについては、[iOS SDK連携](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios)と[Android SDK連携](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android)を参照してください。

## セキュリティに関する考慮事項

Hosted PagesコンテンツはWebViewで実行され、アプリからProfile Contextを受け取る場合があります。

- HTTPS URLと信頼できるホスティングを使用する
- URL、ページソース、JavaScript、`window.TDContext`に認証情報を公開しない
- アプリが所有するDeep Linkを遷移前に検証する
- すべてのカスタムアクションをアプリで認可する
- キャンペーンHTMLやURLパラメーターを信頼できるビジネス指示として扱わない
- ホストページへ送信する個人データを必要最小限にする


## 計測

キャンペーン配信されたHosted Pagesは、ネイティブSDKの計測フローで`impression`、`click`、`dismiss`を作成できます。アプリから直接`openUrl`を呼び出した場合はキャンペーンIDがないため、これらのキャンペーンイベントは作成されません。

イベントフィールドと送信先については、[モバイルIn-Appの計測](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/measurement)を参照してください。

## 関連ドキュメント

- [Hosted Pages](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)
- [Engage Mobile SDK APIとイベントリファレンス](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/sdk-reference)
- [モバイルIn-Appの計測](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/measurement)
- [モバイルIn-App SDKのトラブルシューティング](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/sdk-troubleshooting)
- [iOS SDK連携](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios)
- [Android SDK連携](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android)