フローとペイウォールの取得 - iOS

フローをデザインしたら、モバイルアプリで表示できます。最初のステップは、プレースメントに関連付けられたフローまたはペイウォールとそのビュー設定を取得することです。詳細は以下をご覧ください。

始める前に

必要なもの：

• Adapty ダッシュボードのプロダクト: プロダクトを作成する。
• プロダクトを含むフロー: フロー & ペイウォールビルダーで作成し、プロダクトを割り当てる。
• プレースメント: プレースメントを作成して、フローを割り当てる。
• Adapty SDK のインストール: iOS SDK インストールガイドを参照。

フロー/ペイウォールの取得

ビルダーでフローやペイウォールを作成した場合、それをモバイルアプリのコードでレンダリングしてユーザーに表示する方法を気にする必要はありません。フローやペイウォールには、表示する内容と表示方法の両方が含まれています。ただし、プレースメントから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 & 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 を渡してください。

Here’s an example of how you can provide custom assets via a simple dictionary:

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時間のうち、残り時間。