フローとペイウォールの表示 - iOS

フローとペイウォールの表示
✦
フロー BETA Flow Builder で作成——デバイス上でネイティブにレンダリングされ、WebView は不要
✦
Paywall Builder のペイウォール 既存のすべての Paywall Builder コンテンツ
カスタムペイウォールを作成しますか？ 手動連携ガイドを参照してください。

フローまたはペイウォールを作成した場合、ユーザーに表示するためにモバイルアプリのコードでレンダリングを気にする必要はありません。フローやペイウォールには、表示する内容とその表示方法の両方が含まれています。

以下で使用する AdaptyUI.FlowConfiguration オブジェクトの取得方法については、フローとペイウォールの取得を参照してください。

SwiftUI でフローとペイウォールを表示する

モーダルビューとして表示する

フローまたはペイウォールをモーダルビューとしてデバイス画面に表示するには、SwiftUI の .flow モディファイアを使用します。最小限の呼び出しには isPresented、flowConfiguration、および4つの必須コールバックが必要です。

.flow(
    isPresented: $flowPresented,
    flowConfiguration: <AdaptyUI.FlowConfiguration>,
    didFailPurchase: { _, _ in /* handle the error */ },
    didFinishRestore: { _ in /* check access level and dismiss */ },
    didFailRestore: { _ in /* handle the error */ },
    didReceiveError: { _ in flowPresented = false }
)

ボタンタップを処理する didPerformAction や購入成功に反応する didFinishPurchase などのオプションコールバックを追加することで、より細かく制御できます。

@State var flowPresented = false // この変数の状態を管理し、フローまたはペイウォールを表示したいタイミングで `true` に設定してください

var body: some View {
  Text("Hello, AdaptyUI!")
      .flow(
          isPresented: $flowPresented,
          flowConfiguration: <AdaptyUI.FlowConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      flowPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          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 }
      )
}

パラメータ：

パラメータ必須説明
isPresented必須フローまたはペイウォール画面の表示状態を管理するバインディング。
flowConfiguration必須フローまたはペイウォールの視覚的な詳細を含む AdaptyUI.FlowConfiguration オブジェクト。AdaptyUI.getFlowConfiguration(forFlow:) メソッドを使用します。詳細はフローとペイウォールの取得を参照してください。
didFailPurchase必須Adapty.makePurchase() が失敗した際に呼び出されます。
didFinishRestore必須Adapty.restorePurchases() が正常に完了した際に呼び出されます。
didFailRestore必須Adapty.restorePurchases() が失敗した際に呼び出されます。
didReceiveError必須レンダリングエラーまたはフロースクリプトからのランタイムエラー（例：JavaScript例外、AdaptyUIError コード 4105）が発生した際に呼び出されます。レンダリングエラーが発生した場合は、Adapty サポートにお問い合わせください。
fullScreen任意フローまたはペイウォールをフルスクリーンモードで表示するか、シートとして表示するかを決定します。デフォルトは true です。
didAppear任意フローまたはペイウォールのビューが表示された際に呼び出されます。
didDisappear任意フローまたはペイウォールのビューが閉じられた際に呼び出されます。
didPerformAction任意ユーザーがボタンをタップした際に呼び出されます。close と openURL の2つのアクションIDが事前定義されており、その他はカスタムでビルダーで設定できます。
didSelectProduct任意ユーザーまたはシステムによって購入するプロダクトが選択された際に呼び出されます。
didStartPurchase任意ユーザーが購入プロセスを開始した際に呼び出されます。
didFinishPurchase任意Adapty.makePurchase() が正常に完了した際に呼び出されます。
didFinishWebPaymentNavigation任意Web決済のナビゲーションが完了した際に呼び出されます。
didStartRestore任意ユーザーが復元プロセスを開始した際に呼び出されます。
didFailLoadingProducts任意プロダクトの読み込み中にエラーが発生した際に呼び出されます。再試行するには true を返します。
didPartiallyLoadProducts任意プロダクトが部分的に読み込まれた際に呼び出されます。
showAlertItem任意フローまたはペイウォールの上にアラートアイテムの表示を管理するバインディング。
showAlertBuilder任意アラートビューをレンダリングするための関数。
placeholderBuilder任意フローまたはペイウォールの読み込み中にプレースホルダービューをレンダリングするための関数。デフォルトは ProgressView です。

パラメータの詳細については、iOS - イベントの処理を参照してください。

非モーダルビューとして表示する

フローやペイウォールを、アプリのナビゲーションフロー内のナビゲーション先またはインラインビューとして表示することもできます。SwiftUI ビューで AdaptyFlowView を直接使用してください。

AdaptyFlowView(
    flowConfiguration: <AdaptyUI.FlowConfiguration>,
    didFailPurchase: { product, error in
        // Handle purchase failure
    },
    didFinishRestore: { profile in
        // Handle successful restore
    },
    didFailRestore: { error in
        // Handle restore failure
    },
    didReceiveError: { error in
        // Handle the error (rendering or JS exception from the flow script).
    }
)

UIKit でフローとペイウォールを表示する

デバイス画面にフローまたはペイウォールを表示するには、次の手順を行います。

  1. AdaptyUI.flowController(with:delegate:) メソッドを使用して、表示したいビジュアルフローを初期化します。

    import AdaptyUI

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

    リクエストパラメータ：

    パラメータ必須説明
    flowConfiguration必須フローまたはペイウォールの視覚的な詳細を含む AdaptyUI.FlowConfiguration オブジェクト。AdaptyUI.getFlowConfiguration(forFlow:) メソッドを使用します。詳細はフローとペイウォールの取得を参照してください。
    delegate必須フローおよびペイウォールイベントをリッスンする AdaptyFlowControllerDelegate。詳細はフロー＆ペイウォールイベントの処理を参照してください。

    返り値：

    オブジェクト説明
    AdaptyFlowControllerリクエストされたフローまたはペイウォール画面を表すオブジェクト。

  2. オブジェクトが正常に作成されたら、デバイスの画面に表示できます。

    present(visualFlow, animated: true)

Adapty SDK がモバイルアプリに統合された実際の例を見てみましょう。ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを示すサンプルアプリをご確認ください。

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

以下で使用する AdaptyUI.PaywallConfiguration オブジェクトの取得方法については、ペイウォールビルダーのペイウォールとその設定の取得を参照してください。

SwiftUI でペイウォールを表示する

モーダルビューとして表示する

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

@State var paywallPresented = false // この変数の状態を管理し、ペイウォールを表示したいタイミングで `true` に設定してください

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

パラメータ：

パラメータ必須説明
isPresented必須ペイウォール画面の表示状態を管理するバインディング。
paywallConfiguration必須ペイウォールの視覚的な詳細を含む AdaptyUI.PaywallConfiguration オブジェクト。AdaptyUI.paywallConfiguration(for:products:viewConfiguration:observerModeResolver:tagResolver:timerResolver:) メソッドを使用します。詳細はペイウォールビルダーのペイウォールとその設定の取得を参照してください。
didFailPurchase必須Adapty.makePurchase() が失敗した際に呼び出されます。
didFinishRestore必須Adapty.restorePurchases() が正常に完了した際に呼び出されます。
didFailRestore必須Adapty.restorePurchases() が失敗した際に呼び出されます。
didFailRendering必須インターフェースのレンダリング中にエラーが発生した際に呼び出されます。この場合は、Adapty サポートにお問い合わせください。
fullScreen任意ペイウォールをフルスクリーンモードで表示するか、モーダルとして表示するかを決定します。デフォルトは true です。
didAppear任意ペイウォールのビューが表示された際に呼び出されます。
didDisappear任意ペイウォールのビューが閉じられた際に呼び出されます。
didPerformAction任意ユーザーがボタンをタップした際に呼び出されます。ボタンごとに異なるアクションIDがあります。close と openURL の2つのアクションIDが事前定義されており、その他はカスタムでビルダーで設定できます。
didSelectProduct任意ユーザーまたはシステムによって購入するプロダクトが選択された場合に呼び出されます。
didStartPurchase任意ユーザーが購入プロセスを開始した際に呼び出されます。
didFinishPurchase任意Adapty.makePurchase() が正常に完了した際に呼び出されます。
didFinishWebPaymentNavigation任意Web決済のナビゲーションが完了した際に呼び出されます。
didStartRestore任意ユーザーが復元プロセスを開始した際に呼び出されます。
didFailLoadingProducts任意プロダクトの読み込み中にエラーが発生した際に呼び出されます。再試行するには true を返します。
didPartiallyLoadProducts任意プロダクトが部分的に読み込まれた際に呼び出されます。
showAlertItem任意ペイウォールの上にアラートアイテムの表示を管理するバインディング。
showAlertBuilder任意アラートビューをレンダリングするための関数。
placeholderBuilder任意ペイウォールの読み込み中にプレースホルダービューをレンダリングするための関数。

パラメータの詳細については、iOS - イベントの処理を参照してください。

非モーダルビューとして表示する

ペイウォールを、アプリのナビゲーションフロー内のナビゲーション先またはインラインビューとして表示することもできます。SwiftUI ビューで AdaptyPaywallView を直接使用してください。

AdaptyPaywallView(
    paywallConfiguration: <AdaptyUI.PaywallConfiguration>,
    didFailPurchase: { product, error in
        // Handle purchase failure
    },
    didFinishRestore: { profile in
        // Handle successful restore
    },
    didFailRestore: { error in
        // Handle restore failure
    },
    didFailRendering: { error in
        // Handle rendering error
    }
)

UIKit でペイウォールを表示する

デバイス画面にビジュアルペイウォールを表示するには、次の手順を行います。

  1. .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リクエストされたペイウォール画面を表すオブジェクト。

  2. オブジェクトが正常に作成されたら、デバイスの画面に表示できます。

    present(visualPaywall, animated: true)

Adapty SDK がモバイルアプリに統合された実際の例を見てみましょう。ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを示すサンプルアプリをご確認ください。