フローまたはペイウォールを作成した場合、それをユーザーに表示するためにモバイルアプリのコードでレンダリングを実装する必要はありません。フローやペイウォールには、表示するコンテンツとその表示方法の両方が含まれています。
このガイドでは、Adapty がレンダリングするフローと新しいペイウォールビルダーのペイウォールについて説明します。リモートコンフィグのペイウォールや Observer モード の場合は、手順が異なります。
以下で使用する flowConfiguration オブジェクトの取得方法については、フローとペイウォールの取得を参照してください。
デバイス画面にビジュアルフローを表示するには、まず設定が必要です。AdaptyUI.getFlowView() メソッドを呼び出すか、AdaptyFlowView を直接作成してください:
val flowView = AdaptyUI.getFlowView(
activity,
flowConfiguration,
products,
eventListener,
insets,
customAssets,
tagResolver,
timerResolver,
)
val flowView =
AdaptyFlowView(activity) // or retrieve it from xml
...
with(flowView) {
showFlow(
flowConfiguration,
products,
eventListener,
insets,
customAssets,
tagResolver,
timerResolver,
)
}
AdaptyFlowView flowView = AdaptyUI.getFlowView(
activity,
flowConfiguration,
products,
eventListener,
insets,
customAssets,
tagResolver,
timerResolver
);
AdaptyFlowView flowView =
new AdaptyFlowView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver);
<com.adapty.ui.AdaptyFlowView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" />
ビューの作成が完了したら、ビュー階層に追加してデバイスの画面に表示できます。
AdaptyFlowView を AdaptyUI.getFlowView() 以外の方法で取得した場合は、.showFlow() メソッドを別途呼び出す必要があります。
デバイス画面にビジュアルフローを表示するには、まず設定が必要です。以下のコンポーザブル関数を使用してください:
AdaptyFlowScreen(
flowConfiguration,
products,
eventListener,
insets,
customAssets,
tagResolver,
timerResolver,
)
リクエストパラメータ:
| パラメータ | 必須/任意 | 説明 |
|---|
| flowConfiguration | 必須 | フローのビジュアル詳細を含む AdaptyUI.FlowConfiguration オブジェクトを指定します。AdaptyUI.getFlowConfiguration(flow) メソッドを使って読み込んでください。詳細は ビュー設定の取得 をご参照ください。 |
| products | 任意 | 画面上のプロダクトの表示タイミングを最適化するために AdaptyPaywallProduct の配列を指定します。null を渡すと、AdaptyUI が必要なプロダクトを自動的に取得します。 |
| eventListener | 任意 | フローイベントを監視するために AdaptyFlowEventListener を指定します。使いやすさの観点から AdaptyFlowDefaultEventListener を拡張することを推奨します。詳細は フロー & ペイウォールイベントの処理 をご参照ください。 |
| insets | 任意 | インセットは、タップ可能な要素がシステムバーの裏に隠れないようにするためのフロー周囲のスペースです。 デフォルト: Unspecified。この場合、Adapty が自動的にインセットを調整します。エッジツーエッジのフローでは適切に機能します。 フローがエッジツーエッジでない場合は、カスタムインセットを設定することを検討してください。設定方法については、以下の フローインセットの変更 セクションをご参照ください。 |
| customAssets | 任意 | AdaptyCustomAssets オブジェクトを渡すことで、実行時にフローやペイウォール内の画像や動画を置き換えられます。詳細は アセットのカスタマイズ をご参照ください。 |
| tagResolver | 任意 | フローのテキスト内のカスタムタグを解決するには AdaptyUiTagResolver を使用します。このリゾルバーはタグパラメータを受け取り、対応する文字列に解決します。詳細はペイウォールビルダーのカスタムタグのトピックをご参照ください。 |
| timerResolver | 任意 | カスタムタイマー機能を使用する場合は、ここにリゾルバーを渡してください。 |
Adapty SDK がモバイルアプリにどのように統合されているか、実際の例を見てみませんか?ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを実演しているサンプルアプリをご覧ください。
フローのインセットを変更する
インセットとは、フローの周囲の余白のことで、タップ可能な要素がシステムバーの後ろに隠れないようにするためのものです。デフォルトでは Adapty がインセットを自動的に調整するため、エッジツーエッジのフローでも問題なく機能します。
フローがエッジツーエッジでない場合は、カスタムインセットを設定することをお勧めします。
- ステータスバーとナビゲーションバーのどちらも
AdaptyFlowView と重ならない場合は、AdaptyFlowInsets.None を使用してください。
- フローが上部のステータスバーとは重なるが下部とは重ならないといった複雑な設定の場合は、以下の例のように
bottomInset のみを 0 に設定できます。
//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
ViewCompat.setOnApplyWindowInsetsListener(this, null)
action(systemBarInsets)
insets
}
}
//and then use it with the view
flowView.onReceiveSystemBarsInsets { insets ->
val flowInsets = AdaptyFlowInsets.vertical(insets.top, 0)
flowView.showFlow(
flowConfiguration,
products,
eventListener,
flowInsets,
customAssets,
tagResolver,
timerResolver,
)
}
...
ViewCompat.setOnApplyWindowInsetsListener(flowView, (view, insets) -> {
Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
ViewCompat.setOnApplyWindowInsetsListener(flowView, null);
AdaptyFlowInsets flowInsets =
AdaptyFlowInsets.vertical(systemBarInsets.top, 0);
flowView.showFlow(flowConfiguration, products, eventListener, flowInsets);
return insets;
});
開発者定義タイマーを使用する
モバイルアプリで開発者定義タイマーを使用するには、timerResolver オブジェクトを作成します。これは、カスタムタイマーとフローのレンダリング時に置き換えられる文字列値をペアにした辞書またはマップです。以下に例を示します。
...
val customTimers = mapOf(
"CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}
...
Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
"CUSTOM_TIMER_NY",
new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
@NonNull
@Override
public Date timerEndAtDate(@NonNull String timerId) {
Date date = customTimers.get(timerId);
return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* in 1 hour */
}
};
この例では、CUSTOM_TIMER_NY は Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。timerResolver により、アプリは正しい値(例:New Year’s Day などのタイマー終了時刻から現在時刻を引いて計算した 13d 09h 03m 34s)でタイマーを動的に更新します。
モバイルアプリでカスタムタグを使用するには、tagResolver オブジェクト(カスタムタグと、フロー描画時にそれらを置き換える文字列値のペアを持つ辞書またはマップ)を作成します。以下に例を示します。
val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }
Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;
この例では、USERNAME は Adapty ダッシュボードで <USERNAME/> として入力したカスタムタグです。tagResolver により、アプリはこのカスタムタグを John などの指定した値に動的に置き換えます。
tagResolver はフローを表示する直前に作成・設定することをおすすめします。準備ができたら、フローの表示に使用する AdaptyUI メソッドに渡してください。
フローの読み込みインジケーターの色を変更する
次の方法で、読み込みインジケーターのデフォルトカラーをオーバーライドできます。
<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
<item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>
ペイウォールビルダーを使ってペイウォールをカスタマイズした場合、モバイルアプリのコード内でそのペイウォールをレンダリングしてユーザーに表示する処理は不要です。このようなペイウォールには、表示するコンテンツと表示方法の両方が含まれています。
このガイドは、SDK v3.0 が必要な新しいペイウォールビルダーのペイウォール専用です。ペイウォールの表示方法は、異なるバージョンのペイウォールビルダーで設計されたペイウォール、リモートコンフィグペイウォール、およびオブザーバーモードによって異なります。
以下で使用する viewConfiguration オブジェクトの取得方法については、ペイウォールビルダーのペイウォールと設定の取得を参照してください。
デバイス画面にビジュアルペイウォールを表示するには、まず設定を行う必要があります。AdaptyUI.getPaywallView() メソッドを呼び出すか、AdaptyPaywallView を直接作成してください。
val paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
val paywallView =
AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
showPaywall(
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
}
AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver
);
AdaptyPaywallView paywallView =
new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, insets, personalizedOfferResolver, tagResolver, timerResolver);
<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" />
ビューが正常に作成されたら、それをビュー階層に追加してデバイスの画面に表示できます。
AdaptyPaywallView を AdaptyUI.getPaywallView() を呼び出す以外の方法で取得した場合は、.showPaywall() メソッドも呼び出す必要があります。
デバイス画面にペイウォールのビジュアルを表示するには、まず設定が必要です。次のコンポーザブル関数を使用してください:
AdaptyPaywallScreen(
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
リクエストパラメーター:
| パラメータ | 必須/任意 | 説明 |
|---|
| viewConfiguration | 必須 | ペイウォールのビジュアル情報を含む AdaptyUI.LocalizedViewConfiguration オブジェクトを指定します。取得には Adapty.getViewConfiguration(paywall) メソッドを使用してください。詳しくは ペイウォールのビジュアル設定の取得 をご覧ください。 |
| products | 任意 | 画面上のプロダクト表示タイミングを最適化するために AdaptyPaywallProduct の配列を指定します。null を渡した場合、AdaptyUI が必要なプロダクトを自動的に取得します。 |
| eventListener | 任意 | ペイウォールのイベントを監視するために AdaptyUiEventListener を指定します。使いやすさの観点から、AdaptyUiDefaultEventListener を継承することを推奨します。詳しくは ペイウォールイベントの処理 をご覧ください。 |
| insets | 任意 | インセットは、タップ可能な要素がシステムバーの後ろに隠れないようにするためのペイウォール周囲のスペースです。 デフォルト値は UNSPECIFIED で、Adapty がインセットを自動調整します。これはエッジツーエッジのペイウォールに最適です。 ペイウォールがエッジツーエッジでない場合は、カスタムインセットを設定することをお勧めします。設定方法については、以下の ペイウォールインセットの変更 セクションをご覧ください。 |
| personalizedOfferResolver | 任意 | パーソナライズされた価格表示(詳細)を示すには、AdaptyUiPersonalizedOfferResolver を実装し、AdaptyPaywallProduct に対してその価格がパーソナライズされている場合は true、そうでない場合は false を返す独自のロジックを渡します。 |
| tagResolver | 任意 | ペイウォールテキスト内のカスタムタグを解決するには AdaptyUiTagResolver を使用します。このリゾルバはタグパラメータを受け取り、対応する文字列に変換します。詳しくはペイウォールビルダーのカスタムタグのトピックをご覧ください。 |
| timerResolver | 任意 | カスタムタイマー機能を使用する場合は、ここにリゾルバを渡してください。 |
Adapty SDK がモバイルアプリにどのように統合されているか、実際の例を見てみませんか?ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを実演しているサンプルアプリをご覧ください。
ペイウォールのインセットを変更する
インセットとは、システムバーの裏側にタップ可能な要素が隠れないようにするための、ペイウォール周囲のスペースのことです。デフォルトでは、Adapty がインセットを自動的に調整します。これはエッジツーエッジのペイウォールではうまく機能します。
ペイウォールがエッジツーエッジでない場合は、カスタムインセットを設定することをお勧めします。
- ステータスバーとナビゲーションバーの両方が
AdaptyPaywallViewと重ならない場合は、AdaptyPaywallInsets.NONEを使用してください。
- ペイウォールが上部のステータスバーとは重なるが下部とは重ならないといったカスタム設定の場合は、以下の例のように
bottomInsetのみを0に設定できます。
//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
ViewCompat.setOnApplyWindowInsetsListener(this, null)
action(systemBarInsets)
insets
}
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
val paywallInsets = AdaptyPaywallInsets.vertical(insets.top, 0)
paywallView.showPaywall(
viewConfiguration,
products,
eventListener,
paywallInsets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
}
...
ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);
AdaptyPaywallInsets paywallInsets =
AdaptyPaywallInsets.of(systemBarInsets.top, 0);
paywallView.showPaywall(paywall, products, viewConfiguration, paywallInsets, productTitleResolver);
return insets;
});
開発者定義タイマーを使用する
モバイルアプリで開発者定義タイマーを使用するには、timerResolver オブジェクトを作成します。これは、カスタムタイマーとペイウォールのレンダリング時に置き換えられる文字列値をペアにした辞書またはマップです。以下に例を示します:
...
val customTimers = mapOf(
"CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}
...
Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
"CUSTOM_TIMER_NY",
new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
@NonNull
@Override
public Date timerEndAtDate(@NonNull String timerId) {
Date date = customTimers.get(timerId);
return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* in 1 hour */
}
};
この例では、CUSTOM_TIMER_NY は Adapty ダッシュボードで設定した開発者定義タイマーの Timer ID です。timerResolver により、アプリはタイマーを正しい値(例:13d 09h 03m 34s、元旦などのタイマー終了時刻から現在時刻を引いた値)で動的に更新できます。
モバイルアプリでカスタムタグを使用するには、tagResolver オブジェクト(カスタムタグとペイウォール表示時に置換される文字列値を対応付けるディクショナリまたはマップ)を作成します。以下に例を示します。
val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }
Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;
この例では、USERNAME は Adapty ダッシュボードで <USERNAME/> として入力したカスタムタグです。tagResolver によって、アプリがこのカスタムタグを John のような指定した値に動的に置き換えます。
tagResolver はペイウォールを表示する直前に作成・設定することをおすすめします。準備ができたら、ペイウォールを表示するために使用する AdaptyUI メソッドに渡してください。
ローディングインジケーターの色を変更する
ローディングインジケーターのデフォルト色は、以下の方法で上書きできます。
<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
<item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>