フローとペイウォールを取得する - iOS

フローまたはペイウォールビルダーのペイウォールを設計したら、それをモバイルアプリに表示できます。最初のステップは、以下の説明に従って、プレースメントに関連付けられたフローまたはペイウォールとそのビュー設定を取得することです。

フローまたはペイウォールの取得

フロービルダーまたはペイウォールビルダーを使ってフローやペイウォールをデザインした場合、それをモバイルアプリのコードでレンダリングしてユーザーに表示することを心配する必要はありません。このようなフローやペイウォールには、表示する内容と表示方法の両方が含まれています。ただし、プレースメントを通じてIDを取得し、ビュー設定を準備した上で、モバイルアプリに表示する必要があります。 フローまたはペイウォールとそのビュー設定は、できるだけ早い段階で取得してください。表示する直前ではなく、理想的にはずっと前に取得しましょう。ビュー設定を取得した時点で、SDKはバックグラウンドで画像のダウンロードとキャッシュを開始します。早く取得するほど、ダウンロードが完了するまでの時間が長く確保できます。フローまたはペイウォールを表示する頃には、設定と画像がすでにキャッシュ済みで表示できる状態になっています。

フローまたはペイウォールを取得するには、getFlow メソッドを使用します：

do {
    let flow = try await Adapty.getFlow(placementId: "YOUR_PLACEMENT_ID")
    // the requested flow/paywall
} catch {
    // handle the error
}

Adapty.getFlow(placementId: "YOUR_PLACEMENT_ID") { result in
    switch result {
        case let .success(flow):
            // the requested flow/paywall
        case let .failure(error):
            // handle the error
    }
}

パラメーター:

ビュー設定の取得

フローまたはペイウォールを取得したら、flow.hasViewConfiguration を使ってビュー設定が含まれているかどうかを確認します。このフラグは、Adapty ダッシュボードでプレースメントがどのように設計されたかを示します。

• true — プレースメントが Flow Builder（フロー）または Paywall Builder（ペイウォール）で設計されています。Adapty が UI をレンダリングします。以降の手順に従い、ビュー設定を取得してフローまたはペイウォールを表示してください。
• false — プレースメントはビルダー UI を持たないカスタムペイウォールです。 getFlowConfiguration メソッドを使用してビュー設定を読み込みます。

guard flow.hasViewConfiguration else {
    // handle as remote config paywall
    return
}

let flowConfiguration = try await AdaptyUI.getFlowConfiguration(forFlow: flow)

パラメーター:

デフォルトオーディエンスのフローまたはペイウォールを取得して高速化する

通常、フローやペイウォールはほぼ瞬時に取得されるため、このプロセスの高速化を特に気にする必要はありません。ただし、オーディエンスやプレースメントが多数あり、ユーザーのインターネット接続が不安定な場合は、フローやペイウォールの取得に想定以上の時間がかかることがあります。そのような状況では、何も表示しないよりもスムーズなユーザー体験を提供するために、デフォルトのフローまたはペイウォールを表示したいと思うかもしれません。 これに対処するために、getFlowForDefaultAudience メソッドを使用できます。このメソッドは、指定されたプレースメントの All Users オーディエンス向けのフローまたはペイウォールを取得します。ただし、推奨されるアプローチは getFlow メソッドでフローまたはペイウォールを取得することであり、詳細は上記のペイウォール情報の取得セクションをご覧ください。

Adapty.getFlowForDefaultAudience(placementId: "YOUR_PLACEMENT_ID") { result in
    switch result {
        case let .success(flow):
            // the requested flow
        case let .failure(error):
            // handle the error
    }
}

アセットのカスタマイズ

ペイウォール/フローの画像や動画をカスタマイズするには、カスタムアセットを実装します。

ヒーロー画像と動画には事前定義済みのID（hero_imageとhero_video）が割り当てられています。カスタムアセットバンドルでは、これらのIDを使って各要素を指定し、動作をカスタマイズします。

その他の画像や動画については、Adapty ダッシュボードでカスタムIDを設定する必要があります。

たとえば、次のようなことができます。

• 一部のユーザーに別の画像や動画を表示する。
• リモートのメイン画像の読み込み中に、ローカルのプレビュー画像を表示する。
• 動画を再生する前にプレビュー画像を表示する。
• 動画が読み込まれる前にプレイヤーがレイアウトスペースを確保できるよう、動画のピクセル解像度を指定する（アスペクト比 = width / height）。スキップするには nil を渡す。

カスタムアセットをシンプルな辞書で提供する方法の例を以下に示します:

let customAssets: [String: AdaptyCustomAsset] = [
    // Show a local image using a custom ID
    "custom_image": .image(
        .uiImage(value: UIImage(named: "image_name")!)
    ),

    // Show a local preview image while a remote main image is loading
    "hero_image": .image(
        .remote(
            url: URL(string: "https://example.com/image.jpg")!,
            preview: UIImage(named: "preview_image")
        )
    ),

    // Show a local video with a preview image and a known resolution
    "hero_video": .video(
        .file(
            url: Bundle.main.url(forResource: "custom_video", withExtension: "mp4")!,
            preview: .uiImage(value: UIImage(named: "video_preview")!),
            resolution: CGSize(width: 1080, height: 1920)
        )
    ),
]

let flowConfig = try await AdaptyUI.getFlowConfiguration(
    forFlow: flow,
    assetsResolver: customAssets
)

開発者定義タイマーの設定

モバイルアプリでカスタムタイマーを使用するには、AdaptyTimerResolver プロトコルに準拠したオブジェクトを作成します。このオブジェクトは、各カスタムタイマーのレンダリング方法を定義します。必要であれば、このプロトコルにすでに準拠している [String: Date] ディクショナリを直接使用することもできます。以下に例を示します：

@MainActor
struct AdaptyTimerResolverImpl: AdaptyTimerResolver {
    func timerEndAtDate(for timerId: String) -> Date {
        switch timerId {
        case "CUSTOM_TIMER_6H":
            Date(timeIntervalSinceNow: 3600.0 * 6.0) // 6 hours
        case "CUSTOM_TIMER_NY":
            Calendar.current.date(from: DateComponents(year: 2025, month: 1, day: 1)) ?? Date(timeIntervalSinceNow: 3600.0)
        default:
            Date(timeIntervalSinceNow: 3600.0) // 1 hour
        }
    }
}

この例では、CUSTOM_TIMER_NY と CUSTOM_TIMER_6H は、Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。timerResolver により、アプリは各タイマーを正しい値で動的に更新できます。例えば：

• CUSTOM_TIMER_NY: 元日など、タイマーの終了までの残り時間。
• CUSTOM_TIMER_6H: ユーザーがペイウォールを開いてから始まった6時間のうち、残りの時間。

Adapty ダッシュボードのペイウォールビルダーでペイウォールのビジュアルデザインを作成したら、それをモバイルアプリに表示できます。最初のステップは、以下の説明に従ってプレースメントに関連付けられたペイウォールとそのビュー設定を取得することです。

このトピックはペイウォールビルダーでカスタマイズされたペイウォールに関するものです。ペイウォールを手動で実装する場合は、リモートコンフィグペイウォール用のペイウォールとプロダクトの取得を参照してください。

ペイウォールビルダーで作成したペイウォールを取得する

ペイウォールビルダーを使ってペイウォールをデザインした場合、ユーザーに表示するためのレンダリングコードをアプリに書く必要はありません。このようなペイウォールには、表示する内容と表示方法の両方が含まれています。ただし、プレースメントを通じてペイウォールのIDを取得し、ビュー設定を取得してから、アプリ内に表示する必要があります。 最適なパフォーマンスを確保するために、ペイウォールとそのビュー設定をできるだけ早く取得し、ユーザーに表示する前に画像のダウンロードに十分な時間を確保することが重要です。

ペイウォールを取得するには、getPaywall メソッドを使用します：

do {
    let paywall = try await Adapty.getPaywall("YOUR_PLACEMENT_ID")
    // the requested paywall
} catch {
    // handle the error
}

Adapty.getPaywall(placementId: "YOUR_PLACEMENT_ID", locale: "en") { result in
    switch result {
        case let .success(paywall):
            // the requested paywall
        case let .failure(error):
            // handle the error
    }
}

パラメーター:

ペイウォールビルダーで作成したペイウォールのビュー設定を取得する

ペイウォールを取得したら、ビュー設定が含まれているかどうかを確認してください。ビュー設定が存在する場合は、そのペイウォールがペイウォールビルダーで作成されたことを意味します。これにより、ペイウォールの表示方法が決まります。ビュー設定がある場合はペイウォールビルダーのペイウォールとして扱い、ない場合はリモートコンフィグのペイウォールとして処理してください。 getPaywallConfiguration メソッドを使って、ビュー設定を読み込みます。

guard paywall.hasViewConfiguration else {
    //  use your custom logic
    return
}

do {
    let paywallConfiguration = try await AdaptyUI.getPaywallConfiguration(
            forPaywall: paywall,
            products: products
    )
    // use loaded configuration
} catch {
    // handle the error
}

パラメーター:

読み込みが完了したら、ペイウォールを表示してください。

デフォルトオーディエンス向けペイウォールを取得してより速く表示する

通常、ペイウォールはほぼ瞬時に取得されるため、速度を気にする必要はありません。ただし、オーディエンスやペイウォールの数が多く、ユーザーのインターネット接続が不安定な場合は、ペイウォールの取得に想定以上の時間がかかることがあります。そのような状況では、ペイウォールをまったく表示しないよりも、デフォルトのペイウォールを表示してスムーズなユーザー体験を提供することを検討するとよいでしょう。 この問題に対処するために、getPaywallForDefaultAudience メソッドを使用できます。このメソッドは、指定されたプレースメントの All Users オーディエンス向けペイウォールを取得します。ただし、推奨されるアプローチは getPaywall メソッドでペイウォールを取得することであり、詳細は上記の ペイウォール情報の取得 セクションをご覧ください。

Adapty.getPaywallForDefaultAudience(placementId: "YOUR_PLACEMENT_ID", locale: "en") { result in
    switch result {
        case let .success(paywall):
            // the requested paywall
        case let .failure(error):
            // handle the error
    }
}

アセットのカスタマイズ

ペイウォールの画像や動画をカスタマイズするには、カスタムアセットを実装します。

ヒーロー画像と動画には、hero_image と hero_video という定義済みIDがあります。カスタムアセットバンドルでは、これらのIDを使って各要素を指定し、動作をカスタマイズできます。

その他の画像や動画については、Adapty ダッシュボードでカスタムIDを設定する必要があります。

たとえば、次のようなことができます。

• 一部のユーザーに別の画像や動画を表示する。
• リモートのメイン画像の読み込み中に、ローカルのプレビュー画像を表示する。
• 動画を再生する前にプレビュー画像を表示する。

カスタムアセットをシンプルな辞書形式で提供する方法の例を示します：

let customAssets: [String: AdaptyCustomAsset] = [
    // Show a local image using a custom ID
    "custom_image": .image(
        .uiImage(value: UIImage(named: "image_name")!)
    ),

    // Show a local preview image while a remote main image is loading
    "hero_image": .image(
        .remote(
            url: URL(string: "https://example.com/image.jpg")!,
            preview: UIImage(named: "preview_image")
        )
    ),

    // Show a local video with a preview image
    "hero_video": .video(
        .file(
            url: Bundle.main.url(forResource: "custom_video", withExtension: "mp4")!,
            preview: .uiImage(value: UIImage(named: "video_preview")!)
        )
    ),
]

let paywallConfig = try await AdaptyUI.getPaywallConfiguration(
    forPaywall: paywall,
    assetsResolver: customAssets
)

デベロッパー定義タイマーの設定

モバイルアプリでカスタムタイマーを使用するには、AdaptyTimerResolver プロトコルに準拠したオブジェクトを作成します。このオブジェクトは、各カスタムタイマーのレンダリング方法を定義します。[String: Date] ディクショナリはすでにこのプロトコルに準拠しているため、直接使用することもできます。以下に例を示します。

@MainActor
struct AdaptyTimerResolverImpl: AdaptyTimerResolver {
    func timerEndAtDate(for timerId: String) -> Date {
        switch timerId {
        case "CUSTOM_TIMER_6H":
            Date(timeIntervalSinceNow: 3600.0 * 6.0) // 6 hours
        case "CUSTOM_TIMER_NY":
            Calendar.current.date(from: DateComponents(year: 2025, month: 1, day: 1)) ?? Date(timeIntervalSinceNow: 3600.0)
        default:
            Date(timeIntervalSinceNow: 3600.0) // 1 hour
        }
    }
}

この例では、CUSTOM_TIMER_NY と CUSTOM_TIMER_6H は、Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。timerResolver により、アプリは各タイマーを正しい値で動的に更新できます。例えば：

• CUSTOM_TIMER_NY: 元日など、タイマー終了までの残り時間。
• CUSTOM_TIMER_6H: ユーザーがペイウォールを開いてから始まった6時間のうち、残り時間。