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

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

このガイドは、Adapty によってレンダリングされるフローと新しいペイウォールビルダーのペイウォールを対象としています。リモートコンフィグのペイウォールと Observer モードでは、処理方法が異なります。

リモートコンフィグペイウォールを表示する場合は、リモートコンフィグで設計されたペイウォールのレンダリングを参照してください。
オブザーバーモードでフローを表示する場合は、オブザーバーモードでフローを表示するを参照してください。

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

Adapty Kotlin Multiplatform SDK では、フローとペイウォールを表示する方法が2つあります：

Compose Multiplatform を使用する場合
Compose Multiplatform を使用しない場合

Compose Multiplatform の場合

フローまたはペイウォールを表示するには、createFlowView メソッドで作成した view に対して view.present() メソッドを呼び出します。各 view は一度しか使用できません。フローを再度表示する必要がある場合は、createFlowView をもう一度呼び出して新しい view インスタンスを作成してください。

同じ view を再作成せずに再利用すると、エラーが発生する場合があります。


viewModelScope.launch {
    AdaptyUI.createFlowView(flow = flow).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

ダイアログを表示する

Android でフローまたはペイウォールが表示されている場合は、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では、通常のアラートがフロービューの背後に表示されるため、ユーザーには見えません。このメソッドを使用することで、すべてのプラットフォームでフローの上に正しくダイアログが表示されます。


viewModelScope.launch {
    view.showDialog(
        title = "Close this screen?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the flow
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

iOSのプレゼンテーションスタイルを設定する

present() メソッドに iosPresentationStyle パラメータを渡すことで、iOS でのフローまたはペイウォールの表示スタイルを設定できます。このパラメータには AdaptyUIIOSPresentationStyle.FULLSCREEN（デフォルト）または AdaptyUIIOSPresentationStyle.PAGESHEET を指定できます。


viewModelScope.launch {
    val view = AdaptyUI.createFlowView(flow = flow).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Compose Multiplatformを使わない場合

createNativeFlowView はコアモジュール io.adapty:adapty-kmp の一部です。Compose Multiplatform を使用しないプロジェクトでは、io.adapty:adapty-kmp-ui の依存関係は不要です。

Compose Multiplatform を使わずにフローやペイウォールを埋め込むには、createNativeFlowView を呼び出してください。返された AdaptyNativeFlowView をレイアウトに追加します。


val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

デフォルトでは、埋め込みビューはセーフエリアのパディングを適用しません。レイアウト側でインセットを処理する必要があります。ビュー自体にパディングを適用させたい場合は、createNativeFlowView に androidEnableSafeArea = true を渡してください。このパラメータは Android 専用です。

KMP インターフェースのデフォルトメソッドは Swift で @required になるため、Swift から直接 AdaptyUIFlowsEventsObserver を実装することはできません。まず iosMain でオープン基底クラスを宣言してください:

open class BaseFlowObserver : AdaptyUIFlowsEventsObserver

Swiftでサブクラスを作成し、必要なメソッドのみをオーバーライドします:

class MyFlowObserver: BaseFlowObserver {
    override func flowViewDidPerformAction(view: AdaptyUIFlowView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativeFlowView(
    flow: flow,
    observer: MyFlowObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

ビューの破棄

ビューをレイアウトから削除する際は dispose() を呼び出してください。これにより、イベントリスナーの登録が解除され、内部リソースが解放されます。

nativeView.dispose()

カスタムタグ

カスタムタグを使えば、シナリオごとに別々のフローやペイウォールを作成する手間を省けます。ユーザーデータに基づいて動的に変化する単一のフローを想像してみてください。たとえば、「こんにちは！」という汎用的な挨拶の代わりに、「こんにちは、John さん！」や「こんにちは、Ann さん！」といった個人に向けた挨拶を表示できます。

カスタムタグの活用例をいくつか紹介します：

フローやペイウォールにユーザーの名前やメールアドレスを表示する。
今日の曜日を表示して購買意欲を高める（例：「ハッピーサーズデー」）。
販売しているプロダクトに関するパーソナライズされた詳細情報を追加する（フィットネスプログラムの名前や VoIP アプリの電話番号など）。

カスタムタグを使うと、さまざまな状況に適応する柔軟なフローを作成でき、アプリのインターフェースをよりパーソナライズされた魅力的なものにできます。

場合によっては、アプリがカスタムタグの置換内容を把握できないことがあります。特にユーザーが古いバージョンの AdaptyUI SDK を使用している場合がそれにあたります。これを防ぐため、未知のカスタムタグを含む行を置き換えるフォールバックテキストを必ず追加してください。これを設定しないと、ユーザーにタグがコード（<USERNAME/>）のまま表示されることがあります。

フローやペイウォールでカスタムタグを使用するには、フロービューを作成する際にタグを渡します。


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "DAY_OF_WEEK" to "Thursday"
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)

カスタムタイマー

タイマーは、期間限定のスペシャルオファーやシーズンオファーを訴求するのに役立つツールです。ただし、このタイマーはオファーの有効期限やキャンペーンの期間とは連動していません。設定した値からゼロに向かってカウントダウンするだけのシンプルなスタンドアロンのカウントダウンです。タイマーがゼロに達しても何も起こらず、そのままゼロの状態が続きます。

タイマーの前後にテキストをカスタマイズして、「オファー終了まで：10:00 秒」のようなメッセージを作成できます。

フローまたはペイウォールでカスタムタイマーを使用するには、フロービューを作成する際に渡してください：


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTimers = customTimers,
)

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

このガイドは新しいペイウォールビルダーのペイウォール専用です。リモートコンフィグで設計されたペイウォールや Observer mode では、ペイウォールの表示方法が異なります。

リモートコンフィグのペイウォールを表示する方法については、リモートコンフィグで設計されたペイウォールのレンダリングを参照してください。

Adapty Kotlin Multiplatform SDKは、ペイウォールを表示する2つの方法を提供します：

Compose Multiplatformを使用する場合
Compose Multiplatformを使用しない場合

Compose Multiplatform を使用する場合

ペイウォールを表示するには、createPaywallView メソッドで作成した view の view.present() メソッドを使用します。各 view は一度しか使用できません。再度ペイウォールを表示する必要がある場合は、createPaywallView をもう一度呼び出して新しい view インスタンスを作成してください。

同じ view を再作成せずに再利用すると、エラーが発生することがあります。


viewModelScope.launch {
    AdaptyUI.createPaywallView(paywall = paywall).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

ダイアログを表示する

Android でペイウォールが表示されている場合、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では、通常のアラートはペイウォールの背面に表示されるため、ユーザーから見えなくなります。このメソッドを使用することで、すべてのプラットフォームでペイウォールの上に正しくダイアログを表示できます。


viewModelScope.launch {
    view.showDialog(
        title = "Close paywall?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the paywall
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

iOS のプレゼンテーションスタイルを設定する

present() メソッドに iosPresentationStyle パラメータを渡すことで、iOS でのペイウォールの表示方法を設定できます。パラメータには AdaptyUIIOSPresentationStyle.FULLSCREEN（デフォルト）または AdaptyUIIOSPresentationStyle.PAGESHEET を指定できます。


viewModelScope.launch {
    val view = AdaptyUI.createPaywallView(paywall = paywall).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Compose Multiplatformなしで使う

createNativePaywallViewはコアio.adapty:adapty-kmpモジュールの一部です。Compose Multiplatformを使用しないプロジェクトでは、io.adapty:adapty-kmp-ui依存関係は不要です。

Compose Multiplatformなしでペイウォールを埋め込むには、createNativePaywallViewを呼び出します。これはレイアウトに追加するAdaptyNativePaywallViewを返します：


val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

KMP インターフェースのデフォルトメソッドは Swift では @required になるため、Swift から直接 AdaptyUIPaywallsEventsObserver を実装することはできません。まず iosMain でオープン基底クラスを宣言してください：

open class BasePaywallObserver : AdaptyUIPaywallsEventsObserver

次に、必要なメソッドだけをオーバーライドしてSwiftでサブクラスを作成します。

class MyPaywallObserver: BasePaywallObserver {
    override func paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativePaywallView(
    paywall: paywall,
    observer: MyPaywallObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

ビューの破棄

nativeView.dispose()

カスタムタグ

カスタムタグを使うと、シナリオごとに別々のペイウォールを作成しなくて済みます。ユーザーデータに基づいて動的に変化する1つのペイウォールを想像してみてください。たとえば、「こんにちは！」という汎用的な挨拶の代わりに、「こんにちは、John！」や「こんにちは、Ann！」のようにユーザーを名前で呼ぶことができます。

カスタムタグの活用例をいくつかご紹介します：

ペイウォールにユーザーの名前やメールアドレスを表示する。
売上アップのために現在の曜日を表示する（例：「ハッピーサーズデー」）。
販売しているプロダクトに関するパーソナライズされた詳細を追加する（フィットネスプログラムの名前や、VoIPアプリの電話番号など）。

カスタムタグを使用すると、さまざまな状況に適応する柔軟なペイウォールを作成でき、アプリのインターフェースをよりパーソナライズされた魅力的なものにできます。

アプリがカスタムタグの置換内容を認識できない場合があります—特にユーザーが古いバージョンの AdaptyUI SDK を使用している場合です。これを防ぐため、未知のカスタムタグを含む行を置き換えるフォールバックテキストを必ず追加してください。設定しないと、ユーザーにタグがコード（<USERNAME/>）としてそのまま表示される可能性があります。

ペイウォールでカスタムタグを使用するには、ペイウォールビューを作成する際にカスタムタグを渡します：


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "DAY_OF_WEEK" to "Thursday"
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)

カスタムタイマー

ペイウォールタイマーは、期間限定の特別オファーや季節オファーを宣伝するのに便利なツールです。ただし、このタイマーはオファーの有効期限やキャンペーンの期間とは連動していません。設定した値からゼロまでカウントダウンするだけのシンプルなタイマーです。タイマーがゼロになっても特に何も起こらず、ゼロのまま表示され続けます。

タイマーの前後にテキストをカスタマイズして、「オファー終了まで: 10:00 秒」のようなメッセージを作成できます。

ペイウォールでカスタムタイマーを使用するには、ペイウォールビューを作成する際に渡してください:


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)