iOS SDKのObserverモードでPaywall Builderのペイウォールを表示する

ペイウォールビルダーを使用してペイウォールをカスタマイズした場合、それをユーザーに表示するためにモバイルアプリのコードでレンダリングする必要はありません。このようなペイウォールには、ペイウォール内に表示する内容とその表示方法の両方が含まれています。

このセクションはオブザーバーモード専用です。オブザーバーモードで作業していない場合は、iOS - ペイウォールビルダーのペイウォールを表示するを参照してください。

フローの表示を始める前に（クリックして展開）

Adapty と App Store の初期連携を設定します。 2. Adapty SDK をインストールして設定します。observerMode パラメーターを true に設定してください。iOS SDK インストールガイドを参照してください。 3. Adapty ダッシュボードでプロダクトを作成します。 4. ビルダーでフローまたはペイウォールを設定し、プロダクトを割り当てます。 5. プレースメントを作成し、フローまたはペイウォールを割り当てます。 6. モバイルアプリのコードでフローとその設定を取得します。

AdaptyObserverModeResolver オブジェクトを実装します。プロトコルは SDK v3 と同じです — オブザーバーモード自体はフローとペイウォールのレンダリング間で変わりません:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @escaping () -> Void,
                  onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // call onStartPurchase / onFinishPurchase to notify AdaptyUI about the purchase progress
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                             onFinishRestore: @escaping () -> Void) {
       // call onStartRestore / onFinishRestore to notify AdaptyUI about the restore progress
}

リゾルバーを observerModeResolver: パラメーターとして渡し、フロー設定オブジェクトを作成します:
```
do {
    let flowConfiguration = try await AdaptyUI.getFlowConfiguration(
        forFlow: flow,
        observerModeResolver: <AdaptyObserverModeResolver>
    )
} catch {
    // handle the error
}
```
リクエストパラメーター: | パラメーター | 必須/任意 | 説明 | | :----------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------- | | forFlow | required | Adapty.getFlow(placementId:) で取得した AdaptyFlow オブジェクト。フローとペイウォールの取得を参照してください。 | | observerModeResolver | required | 上記で実装した AdaptyObserverModeResolver。 |

AdaptyUI.flowController(with:delegate:) を使ってフローコントローラーを初期化します:

import AdaptyUI

let visualFlow = try AdaptyUI.flowController(
    with: flowConfiguration,
    delegate: <AdaptyFlowControllerDelegate>
)

リクエストパラメーター:

パラメータ	必須/任意	説明
flowConfiguration	required	フローのビジュアル詳細を含む `AdaptyUI.FlowConfiguration` オブジェクト。フローとペイウォールの取得を参照。
delegate	required	フローイベントをリッスンするための `AdaptyFlowControllerDelegate`。フロー＆ペイウォールイベントの処理を参照。

戻り値:

オブジェクト	説明
AdaptyFlowController	リクエストされたフロー画面を表すオブジェクト。

コントローラーを表示します:
```
present(visualFlow, animated: true)
```

購入トランザクションにペイウォールを紐付けるのを忘れずに。これを行わないと、Adapty は購入元のペイウォールを特定できません。

SwiftUI では、リゾルバを使ってフロー設定を取得し、.flow モディファイアに渡します。

@State var flowPresented = false
@State var flowConfiguration: AdaptyUI.FlowConfiguration?

var body: some View {
    Text("Hello, AdaptyUI!")
        .flow(
            isPresented: $flowPresented,
            flowConfiguration: flowConfiguration,
            didPerformAction: { action in
                switch action {
                    case .close:
                        flowPresented = false
                    default:
                        break
                }
            },
            didFinishPurchase: { product, purchaseResult in /* dismiss, or do nothing to let the flow continue */ },
            didFailPurchase: { product, error in /* handle the error */ },
            didFinishRestore: { profile in /* check access level and dismiss */ },
            didFailRestore: { error in /* handle the error */ },
            didReceiveError: { error in flowPresented = false }
        )
        .task {
            flowConfiguration = try? await AdaptyUI.getFlowConfiguration(
                forFlow: flow,
                observerModeResolver: <AdaptyObserverModeResolver>
            )
        }
}

getFlowConfigurationのobserverModeResolver:パラメーターは、レンダリングされたフローがカスタム購入ロジックを尊重するようにするものです。このモディファイア自体はフルモードと同じコールバックを使用します。

購入トランザクションにペイウォールを関連付けることを忘れないでください。そうしないと、Adaptyは購入元のペイウォールを特定できません。

ペイウォールを表示する前に（クリックして展開）

Adapty の初期連携を設定します。Google Play との連携およびApp Store との連携をご参照ください。 2. SDK をインストールして設定します。observerMode パラメータを true に設定してください。フレームワーク別の手順は iOS をご参照ください。 3. Adapty ダッシュボードでプロダクトを作成します。 4. Adapty ダッシュボードでペイウォールを設定してプロダクトを割り当て、ペイウォールビルダーでカスタマイズします。 5. Adapty ダッシュボードでプレースメントを作成してペイウォールを割り当てます。 6. モバイルアプリのコードでペイウォールビルダーのペイウォールとその設定を取得します。

AdaptyObserverModeResolver オブジェクトを実装します：

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @escaping () -> Void,
                  onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                             onFinishRestore: @escaping () -> Void) {
       // use the onStartRestore and onFinishRestore callbacks to notify AdaptyUI about the process of the restore
}

observerMode(didInitiatePurchase:onStartPurchase:onFinishPurchase:) イベントは、ユーザーが購入を開始したことを通知します。このコールバックに応じて、カスタム購入フローを起動できます。

observerModeDidInitiateRestorePurchases(onStartRestore:onFinishRestore:) イベントは、ユーザーが復元を開始したことを通知します。このコールバックに応じて、カスタム復元フローを起動できます。また、購入またはリストアのプロセスをAdaptyUIに通知するために、以下のコールバックを必ず呼び出してください。これは、ローダーの表示など、ペイウォールの適切な動作に必要です。

コールバック	説明
onStartPurchase()	購入が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishPurchase()	購入が完了したことを AdaptyUI に通知するために呼び出すコールバックです。
onStartRestore()	復元が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishRestore()	復元が完了したことを AdaptyUI に通知するために呼び出すコールバックです。

ペイウォール設定オブジェクトを作成します：
```
do {
    let paywallConfiguration = try AdaptyUI.getPaywallConfiguration(
     forPaywall: <paywall object>, 
     observerModeResolver: <AdaptyObserverModeResolver>
     )
} catch {
    // handle the error
}
```
リクエストパラメータ： | パラメータ | 必須 / 任意 | 説明 | | :----------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Paywall | required | 目的のペイウォールのコントローラーを取得するための AdaptyPaywall オブジェクト。 | | ObserverModeResolver | required | 前のステップで実装した AdaptyObserverModeResolver オブジェクト。 |

.paywallController(for:products:viewConfiguration:delegate:) メソッドを使用して、表示したいビジュアルペイウォールを初期化します：

import AdaptyUI

let visualPaywall = AdaptyUI.paywallController(
    with: <paywall configuration object>,
    delegate: <AdaptyPaywallControllerDelegate>
)

リクエストパラメーター：

パラメータ	必須/任意	説明
Paywall Configuration	必須	ペイウォールの視覚的な詳細を含む `AdaptyUI.PaywallConfiguration` オブジェクトです。`AdaptyUI.getPaywallConfiguration(forPaywall:locale:)` メソッドを使用してください。詳細はペイウォールビルダーのペイウォールとその設定を取得するをご参照ください。
Delegate	必須	ペイウォールイベントを受け取るための `AdaptyPaywallControllerDelegate` です。詳細はペイウォールイベントの処理をご参照ください。
戻り値：

オブジェクト	説明
AdaptyPaywallController	リクエストされたペイウォール画面を表すオブジェクト

オブジェクトが正常に作成されたら、次のように表示できます：

present(visualPaywall, animated: true)

購入トランザクションにペイウォールを関連付けることを忘れないでください。関連付けを行わないと、Adapty は購入元のペイウォールを特定できません。

デバイス画面にビジュアルペイウォールを表示するには、SwiftUI の .paywall モディファイアを使用します：

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywallConfiguration: <paywall configuration object>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false }
      )
}

(empty input — nothing to translate)

パラメータ	必須/任意	説明
Paywall Configuration	必須	ペイウォールの視覚的な詳細を含む `AdaptyUI.PaywallConfiguration` オブジェクト。`AdaptyUI.getPaywallConfiguration(forPaywall:locale:)` メソッドを使用してください。詳細はペイウォールビルダーのペイウォールとその設定を取得するをご参照ください。
Products	任意	`AdaptyPaywallProduct` オブジェクトの配列を指定すると、画面上のプロダクト表示タイミングを最適化できます。`nil` を渡した場合、AdaptyUI が必要なプロダクトを自動的に取得します。
TagResolver	任意	カスタムタグとその解決済みの値のディクショナリを定義します。カスタムタグはペイウォールコンテンツ内のプレースホルダーとして機能し、ペイウォール内のパーソナライズされたコンテンツに合わせて特定の文字列に動的に置き換えられます。詳細はペイウォールビルダーのカスタムタグのトピックをご参照ください。
ObserverModeResolver	任意	前のステップで実装した `AdaptyObserverModeResolver` オブジェクト
クロージャパラメーター:

クロージャパラメーター	説明
didFinishRestore	Adapty.restorePurchases() が成功した場合、このコールバックが呼び出されます。
didFailRestore	Adapty.restorePurchases() が失敗した場合、このコールバックが呼び出されます。
didFailRendering	インターフェースのレンダリング中にエラーが発生した場合、このコールバックが呼び出されます。
その他のクロージャーパラメーターについては、iOS - イベントの処理トピックを参照してください。

購入トランザクションにペイウォールを関連付けることを忘れないでください。そうしないと、Adapty は購入元のペイウォールを特定できません。

ペイウォールの表示を始める前に（クリックして展開）

Adapty と Google Play の初期連携および App Store の初期連携を設定します。
Adapty SDK をインストールして設定します。observerMode パラメーターを true に設定してください。各フレームワーク向けの手順は iOS、React Native、Flutter、Unity を参照してください。
Adapty ダッシュボードでプロダクトを作成します。
Adapty ダッシュボードでペイウォールを設定してプロダクトを割り当て、ペイウォールビルダーを使ってカスタマイズします。
Adapty ダッシュボードでプレースメントを作成してペイウォールを割り当てます。
モバイルアプリのコードで Paywall Builder のペイウォールとその設定を取得します。

AdaptyObserverModeDelegate オブジェクトを実装します:

func paywallController(_ controller: AdaptyPaywallController,
                       didInitiatePurchase product: AdaptyPaywallProduct,
                       onStartPurchase: @escaping () -> Void,
                       onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) イベントは、ユーザーが購入を開始したことを通知します。このイベントに応答して、独自の購入フローを起動できます。

また、購入プロセスをAdaptyUIに通知するために、以下のコールバックを呼び出すことを忘れないでください。これは、ローダーの表示など、ペイウォールが正しく動作するために必要です：

コールバック	説明
onStartPurchase	購入が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishPurchase	購入が完了したことを AdaptyUI に通知するために呼び出すコールバックです。

.paywallController(for:products:viewConfiguration:delegate:observerModeDelegate:) メソッドを使用して、表示したいビジュアルペイウォールを初期化します。

   import AdaptyUI
   
   let visualPaywall = AdaptyUI.paywallController(
       for: <paywall object>,
       products: <paywall products array>,
       viewConfiguration: <LocalizedViewConfiguration>,
       delegate: <AdaptyPaywallControllerDelegate>
       observerModeDelegate: <AdaptyObserverModeDelegate>
   )

リクエストパラメーター:

パラメーター	必須/任意	説明
Paywall	必須	目的のペイウォールのコントローラーを取得するための `AdaptyPaywall` オブジェクト。
Products	任意	画面上のプロダクト表示タイミングを最適化するために、`AdaptyPaywallProduct` オブジェクトの配列を指定します。`nil` を渡した場合、AdaptyUI が自動的に必要なプロダクトを取得します。
ViewConfiguration	必須	ペイウォールのビジュアル詳細を含む `AdaptyUI.LocalizedViewConfiguration` オブジェクト。`AdaptyUI.getViewConfiguration(paywall:locale:)` メソッドを使用してください。詳細はペイウォールビルダーのペイウォールと設定の取得を参照してください。
Delegate	必須	ペイウォールイベントをリッスンするための `AdaptyPaywallControllerDelegate`。詳細はペイウォールイベントの処理を参照してください。
ObserverModeDelegate	必須	前のステップで実装した `AdaptyObserverModeDelegate` オブジェクト。
TagResolver	任意	カスタムタグとその解決済みの値の辞書を定義します。カスタムタグはペイウォールコンテンツ内のプレースホルダーとして機能し、ペイウォール内のパーソナライズされたコンテンツ向けに特定の文字列へ動的に置き換えられます。詳細はペイウォールビルダーのカスタムタグのトピックを参照してください。
戻り値:

オブジェクト	説明
AdaptyPaywallController	リクエストされたペイウォール画面を表すオブジェクト

オブジェクトが正常に作成されたら、次のように表示できます:

present(visualPaywall, animated: true)

デバイス画面にビジュアルペイウォールを表示するには、SwiftUI の .paywall モディファイアを使用します：

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywall: <paywall object>,
          configuration: <LocalizedViewConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false },
          observerModeDidInitiatePurchase: { product, onStartPurchase, onFinishPurchase in
              // use the product object to handle the purchase
              // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
          }, 
      )
}

(empty input — nothing to translate)

パラメータ	必須/任意	説明
Paywall	必須	対象のペイウォールのコントローラーを取得するための `AdaptyPaywall` オブジェクトです。
Product	任意	画面上のプロダクト表示タイミングを最適化するために `AdaptyPaywallProduct` オブジェクトの配列を指定します。`nil` を渡した場合、AdaptyUI が必要なプロダクトを自動的に取得します。
Configuration	必須	ペイウォールの視覚的な詳細を含む `AdaptyUI.LocalizedViewConfiguration` オブジェクトです。`AdaptyUI.getViewConfiguration(paywall:locale:)` メソッドを使用してください。詳細はペイウォールビルダーのペイウォールとその設定の取得を参照してください。
TagResolver	任意	カスタムタグとその解決済みの値の辞書を定義します。カスタムタグはペイウォールコンテンツ内のプレースホルダーとして機能し、ペイウォール内のパーソナライズされたコンテンツに応じた文字列に動的に置き換えられます。詳細はペイウォールビルダーのカスタムタグに関するトピックを参照してください。
Closure parameters:
クロージャのパラメータ	説明
:----------------------------------	:--------------------------------------------------------------------------------
didFinishRestore	Adapty.restorePurchases() が成功した場合、このコールバックが呼び出されます。
didFailRestore	Adapty.restorePurchases() が失敗した場合、このコールバックが呼び出されます。
didFailRendering	インターフェースのレンダリング中にエラーが発生した場合、このコールバックが呼び出されます。
observerModeDidInitiatePurchase	ユーザーが購入を開始したときにこのコールバックが呼び出されます。
他のクロージャパラメータについては、iOS - イベントの処理トピックをご参照ください。

必ず購入トランザクションにペイウォールを関連付けるようにしてください。関連付けを行わないと、Adaptyは購入元のペイウォールを特定できません。