React Native SDKでリモートコンフィグペイウォールのペイウォールとプロダクトを取得する

リモートコンフィグやカスタムペイウォールを表示する前に、それらの情報を取得する必要があります。このトピックはリモートコンフィグとカスタムペイウォールに関するものです。Flow Builder や Paywall Builder でカスタマイズされたフローやペイウォールの取得方法については、Flow Builder のフローと Paywall Builder のペイウォールおよびその設定を取得するを参照してください。

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

モバイルアプリでフローとプロダクトの取得を始める前に（クリックして展開）

Adapty ダッシュボードでプロダクトを作成する。
Adapty ダッシュボードでフローまたはペイウォールを作成し、プロダクトを組み込む。
Adapty ダッシュボードでプレースメントを作成し、フローまたはペイウォールをプレースメントに組み込む。
モバイルアプリにAdapty SDK をインストールする。

フローの情報を取得する

Adapty では、プロダクトは App Store と Google Play の両方のプロダクトを組み合わせたものです。これらのクロスプラットフォームのプロダクトはフローやペイウォールに組み込まれており、モバイルアプリの特定のプレースメント内で表示できます。

プロダクトを表示するには、getFlow メソッドを使ってプレースメントのいずれかから AdaptyFlow を取得する必要があります。

プロダクト ID をハードコードしないでください。 ハードコードしてよい ID はプレースメント ID のみです。フローはリモートで設定されるため、プロダクトの数や利用可能なオファーはいつでも変わる可能性があります。アプリはこれらの変更を動的に処理する必要があります。たとえば、今日のフローがプロダクトを 2 つ返し、明日 3 つ返しても、コードを変更せずにすべて表示できるようにしてください。

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(id);
    // the requested flow
} catch (error) {
    // handle the error
}

パラメーター必須/任意説明

placementId 必須プレースメントの識別子です。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。

パラメーター	必須/任意	説明
placementId	必須	プレースメントの識別子です。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
fetchPolicy	デフォルト: `.reloadRevalidatingCacheData`	デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを受け取れるよう、この設定を推奨します。ただし、ユーザーのインターネット接続が不安定な場合は、`.returnCacheDataElseLoad` を使用してキャッシュデータが存在する場合はそれを返すことを検討してください。この場合、最新データが反映されないことがありますが、接続状態に関わらず読み込みが速くなります。キャッシュは定期的に更新されるため、セッション中にネットワークリクエストを省くために使っても問題ありません。キャッシュはアプリを再起動しても保持され、アプリの再インストール時または手動でクリアした場合にのみ削除されます。 Adapty SDK はフローとペイウォールを2層で保存します。上記の定期更新キャッシュとフォールバックペイウォールです。また、フローとペイウォールの取得を高速化するために CDN を使用し、CDN に接続できない場合に備えてスタンドアロンのフォールバックサーバーも用意しています。このシステムにより、インターネット接続が不安定な状況でも信頼性を確保しながら、常に最新バージョンのフローを取得できます。
loadTimeoutMs	デフォルト: 5秒	このメソッドのタイムアウト上限を設定します。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。内部的に複数のリクエストで構成される場合があるため、まれに `loadTimeout` で指定した時間より若干遅くタイムアウトすることがあります。

fetchPolicy

デフォルト: .reloadRevalidatingCacheData

デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを受け取れるよう、この設定を推奨します。

ただし、ユーザーのインターネット接続が不安定な場合は、.returnCacheDataElseLoad を使用してキャッシュデータが存在する場合はそれを返すことを検討してください。この場合、最新データが反映されないことがありますが、接続状態に関わらず読み込みが速くなります。キャッシュは定期的に更新されるため、セッション中にネットワークリクエストを省くために使っても問題ありません。

キャッシュはアプリを再起動しても保持され、アプリの再インストール時または手動でクリアした場合にのみ削除されます。

Adapty SDK はフローとペイウォールを2層で保存します。上記の定期更新キャッシュとフォールバックペイウォールです。また、フローとペイウォールの取得を高速化するために CDN を使用し、CDN に接続できない場合に備えてスタンドアロンのフォールバックサーバーも用意しています。このシステムにより、インターネット接続が不安定な状況でも信頼性を確保しながら、常に最新バージョンのフローを取得できます。

loadTimeoutMs

デフォルト: 5秒

このメソッドのタイムアウト上限を設定します。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。

内部的に複数のリクエストで構成される場合があるため、まれに loadTimeout で指定した時間より若干遅くタイムアウトすることがあります。

v4 では、getFlow は locale パラメータを受け取らなくなりました。カスタムペイウォールの場合、利用可能なすべてのロケールはフローのリモートコンフィグ（flow.remoteConfigs）で返されます。ユーザーのデバイスまたはアプリ設定に合ったものを選択してください。

プロダクトIDをハードコードしないでください！フローはリモートで設定されるため、利用可能なプロダクト、プロダクトの数、特別オファー（無料トライアルなど）は随時変更される可能性があります。これらのシナリオに対応できるようコードを設計してください。

たとえば、最初に2つのプロダクトを取得した場合、アプリはその2つを表示します。しかし後で3つのプロダクトを取得した場合は、コードを変更することなく3つすべてを表示できる必要があります。ハードコードが必要なのはプレースメントIDだけです。

レスポンスのパラメーター：

パラメーター	説明
Flow	プレースメント、識別子（`id`、`variationId`）、名前、ペイウォールのバリアント（`paywalls`）、設定済みロケールごとのエントリーを含む `remoteConfigs` 配列を持つ `AdaptyFlow` オブジェクト。フローのプロダクトを取得するには、`getPaywallProducts(flow)` を呼び出してください。

プロダクトの取得

フローを取得したら、そのフローに対応するプロダクトの配列を取得できます。

try {
    // ...flow
    const products = await adapty.getPaywallProducts(flow);
  // the requested products list
} catch (error) {
    // handle the error
}

レスポンスパラメーター：

パラメーター	説明
Products	`AdaptyPaywallProduct` オブジェクトのリスト。プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、その他いくつかのプロパティが含まれます。
独自のペイウォールデザインを実装する際には、`AdaptyPaywallProduct` オブジェクトから以下のプロパティにアクセスする必要があります。以下によく使われるプロパティを示しますが、利用可能なすべてのプロパティの詳細はリンク先のドキュメントを参照してください。
プロパティ	説明
-------------------------	----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	プロダクトのタイトルを表示するには、`product.localizedTitle` を使用します。ローカライズはデバイスのロケールではなく、ユーザーが選択したストアの国に基づいて行われます。
Price	ローカライズされた価格を表示するには、`product.price?.localizedString` を使用します。このローカライズはデバイスのロケール情報に基づいています。`product.price?.amount` を使用して価格を数値として取得することもできます。値はローカル通貨で提供されます。関連する通貨記号を取得するには、`product.price?.currencySymbol` を使用します。
Subscription Period	期間（週、月、年など）を表示するには、`product.subscription?.localizedSubscriptionPeriod` を使用します。このローカライズはデバイスのロケールに基づいています。プログラムでサブスクリプション期間を取得するには、`product.subscription?.subscriptionPeriod` を使用します。そこから `unit` プロパティにアクセスして期間の長さ（`'day'`、`'week'`、`'month'`、`'year'`、または `'unknown'`）を取得できます。`numberOfUnits` の値で期間の単位数を取得できます。たとえば、四半期ごとのサブスクリプションの場合、`unit` プロパティには `'month'`、`numberOfUnits` プロパティには `3` が表示されます。
Introductory Offer	サブスクリプションに初回オファーが含まれているかどうかを示すバッジやその他のインジケーターを表示するには、`product.subscription?.offer?.phases` プロパティを確認します。このリストには、無料トライアルフェーズと初回価格フェーズの最大2つの割引フェーズを含めることができます。各フェーズオブジェクトには次の便利なプロパティがあります： • `paymentMode`：`'free_trial'`、`'pay_as_you_go'`、`'pay_up_front'`、`'unknown'` の値を持つ文字列。無料トライアルは `'free_trial'` タイプになります。 • `price`：割引価格（数値）。無料トライアルの場合は `0` を確認します。 • `localizedNumberOfPeriods`：オファーの期間をデバイスのロケールでローカライズした文字列。たとえば、3日間のトライアルオファーの場合、このフィールドには `'3 days'` と表示されます。 • `subscriptionPeriod`：オファー期間の個別の詳細はこのプロパティで取得することもできます。前のセクションで説明したのと同様の方法でオファーにも使用できます。 • `localizedSubscriptionPeriod`：ユーザーのロケールに合わせてフォーマットされた割引のサブスクリプション期間。

デフォルトオーディエンスフローでフローの取得を高速化する

通常、フローはほぼ瞬時に取得されるため、この処理を高速化することを気にする必要はありません。ただし、オーディエンスやプレースメントが多数あり、ユーザーのインターネット接続が遅い場合は、フローの取得に予想以上の時間がかかることがあります。このような状況では、何も表示しないよりも、デフォルトのフローを表示してスムーズなユーザー体験を提供したい場合があるでしょう。これに対処するために、getFlowForDefaultAudience メソッドを使用できます。このメソッドは、指定したプレースメントの All Users オーディエンスのフローを取得します。ただし、推奨される方法は、上記のフロー情報の取得セクションで説明されている getFlow メソッドを使用してフローを取得することである点を理解しておくことが重要です。

getFlow を推奨する理由

getFlowForDefaultAudience メソッドにはいくつかの重大な欠点があります：

後方互換性の問題: 異なるアプリバージョン（現在のバージョンと将来のバージョン）で異なるフローを表示する必要がある場合、課題が生じる可能性があります。現在の（レガシー）バージョンに対応したフローを設計するか、現在の（レガシー）バージョンのユーザーがフローが正常に表示されない問題に直面することを受け入れるかのどちらかを選ぶことになります。
ターゲティングの喪失: すべてのユーザーが All Users オーディエンス向けに設計された同一のフローを見ることになり、国、マーケティングのアトリビューション、独自のカスタム属性に基づくパーソナライズされたターゲティングができなくなります。これらのデメリットを受け入れてでも高速なフロー取得のメリットを活かしたい場合は、以下のように getFlowForDefaultAudience メソッドを使用してください。そうでない場合は、上記で説明した getFlow を引き続き使用してください。

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow
} catch (error) {
    // handle the error
}

パラメーター必須/任意説明

placementId 必須プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。

fetchPolicy

デフォルト: .reloadRevalidatingCacheData

デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。この方法を推奨します。ユーザーが常に最新のデータを受け取れることが保証されるためです。

ただし、ユーザーがネットワーク接続の不安定な環境にいると想定される場合は、.returnCacheDataElseLoad を使用して、キャッシュが存在すればそちらを返すことを検討してください。この場合、最新データが届かないことがありますが、接続状況にかかわらず読み込み時間が短縮されます。キャッシュはセッション中に定期的に更新されるため、不要なネットワークリクエストを避ける目的で使用しても安全です。

キャッシュはアプリの再起動後も保持されます。クリアされるのは、アプリのアンインストール時または手動でのクリーンアップ時のみです。

リモートコンフィグとカスタムペイウォールを表示する前に、それらの情報を取得する必要があります。このトピックはリモートコンフィグとカスタムペイウォールに関するものです。ペイウォールビルダーでカスタマイズしたペイウォールの取得方法については、ペイウォールビルダーのペイウォールとその設定を取得するを参照してください。

モバイルアプリでペイウォールとプロダクトの取得を始める前に（クリックして展開）

Adapty ダッシュボードでプロダクトを作成する。
ペイウォールを作成し、プロダクトをペイウォールに追加する（Adapty ダッシュボード）
プレースメントを作成し、ペイウォールをプレースメントに追加する（Adapty ダッシュボード）
Adapty SDK をインストールする（モバイルアプリ）

ペイウォール情報を取得する

Adapty では、プロダクトは App Store と Google Play の両方からのプロダクトを組み合わせたものです。これらのクロスプラットフォームのプロダクトはペイウォールに統合されており、モバイルアプリの特定のプレースメント内に表示することができます。

プロダクトを表示するには、getPaywall メソッドを使ってプレースメントのいずれかからペイウォールを取得する必要があります。

プロダクト ID をハードコードしないでください。 ハードコードすべき ID はプレースメント ID だけです。ペイウォールはリモートで設定されるため、プロダクトの数や利用可能なオファーはいつでも変わる可能性があります。アプリはこれらの変更を動的に処理する必要があります。今日ペイウォールが 2 つのプロダクトを返し、明日 3 つを返すようになっても、コードを変更せずにすべてを表示できるようにしてください。

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // the requested paywall
} catch (error) {
    // handle the error
}

パラメーター	有無	説明
placementId	必須	プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale	任意デフォルト: `en`	ペイウォールのローカライゼーションの識別子。マイナス（-）文字で区切られた1つ以上のサブタグで構成される言語コードを指定します。最初のサブタグは言語、2番目のサブタグは地域を表します。例: `en` は英語、`pt-br` はブラジルポルトガル語を表します。ロケールコードおよび推奨する使用方法については、ローカライゼーションとロケールコードをご覧ください。
fetchPolicy	デフォルト: `.reloadRevalidatingCacheData`	デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを取得できるため、この設定を推奨します。ただし、ユーザーが不安定なインターネット環境を利用していると想定される場合は、`.returnCacheDataElseLoad` を使用してキャッシュが存在する場合にキャッシュデータを返すことを検討してください。この場合、最新データが取得できないことがありますが、接続状況に関わらず高速な読み込みが実現できます。キャッシュは定期的に更新されるため、セッション中のネットワークリクエストを避ける用途では安全に使用できます。キャッシュはアプリを再起動しても保持され、アプリの再インストール時または手動でクリアした場合にのみ削除されます。 Adapty SDK はペイウォールを2つの層で保存します。上記の定期更新キャッシュとフォールバックペイウォールです。また、ペイウォールの高速取得のために CDN を使用し、CDN に到達できない場合に備えてスタンドアロンのフォールバックサーバーも用意しています。このシステムは、インターネット接続が不安定な場合でも、常に最新バージョンのペイウォールを確実に取得できるよう設計されています。
loadTimeoutMs	デフォルト: 5秒	このメソッドのタイムアウト上限を設定します。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。内部では複数のリクエストで構成される処理のため、まれに `loadTimeout` で指定した時間よりもわずかに遅れてタイムアウトが発生する場合があります。
プロダクトIDをハードコードしないでください！ペイウォールはリモートで設定されるため、利用可能なプロダクト、プロダクトの数、特典（無料トライアルなど）は随時変更される場合があります。こうしたシナリオに対応できるコードを記述してください。

たとえば、最初に2つのプロダクトを取得した場合、アプリはそれら2つを表示する必要があります。後で3つのプロダクトを取得した場合は、コードを変更することなく3つすべてを表示できなければなりません。ハードコードする必要があるのはプレースメントIDのみです。

レスポンスのパラメーター：

パラメータ	説明
Paywall	プロダクトIDのリスト、ペイウォールの識別子、リモートコンフィグ、その他いくつかのプロパティを含む `AdaptyPaywall` オブジェクト。

プロダクトの取得

ペイウォールを取得したら、それに対応するプロダクトの配列を取得できます。

try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}

レスポンスパラメーター:

パラメータ	説明
Products	`AdaptyPaywallProduct` オブジェクトのリスト。プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、その他のプロパティが含まれます。
独自のペイウォールデザインを実装する場合、`AdaptyPaywallProduct` オブジェクトから以下のプロパティにアクセスする必要があります。よく使われるプロパティを以下に示しますが、利用可能なすべてのプロパティの詳細については、リンク先のドキュメントを参照してください。
プロパティ	説明
-------------------------	----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	プロダクトのタイトルを表示するには、`product.localizedTitle` を使用します。ローカライズはデバイスのロケールではなく、ユーザーが選択したストアの国に基づきます。
Price	ローカライズされた価格を表示するには、`product.price?.localizedString` を使用します。このローカライズはデバイスのロケール情報に基づきます。`product.price?.amount` を使用すると、価格を数値として取得することもできます。値はローカル通貨で提供されます。対応する通貨記号を取得するには、`product.price?.currencySymbol` を使用します。
Subscription Period	期間（週、月、年など）を表示するには、`product.subscription?.localizedSubscriptionPeriod` を使用します。このローカライズはデバイスのロケールに基づきます。プログラムでサブスクリプション期間を取得するには、`product.subscription?.subscriptionPeriod` を使用します。そこから `unit` プロパティにアクセスして、長さ（`'day'`、`'week'`、`'month'`、`'year'`、または `'unknown'`）を取得できます。`numberOfUnits` の値で期間の単位数を取得できます。たとえば、四半期ごとのサブスクリプションの場合、`unit` プロパティには `'month'`、`numberOfUnits` には `3` が設定されます。
Introductory Offer	サブスクリプションに初回オファーが含まれていることを示すバッジやインジケーターを表示するには、`product.subscription?.offer?.phases` プロパティを確認してください。これは最大2つの割引フェーズ（無料トライアルフェーズと初回価格フェーズ）を含むリストです。各フェーズオブジェクトには以下の便利なプロパティがあります： • `paymentMode`：`'free_trial'`、`'pay_as_you_go'`、`'pay_up_front'`、`'unknown'` の値を持つ文字列。無料トライアルは `'free_trial'` タイプになります。 • `price`：割引価格（数値）。無料トライアルの場合は `0` を確認してください。 • `localizedNumberOfPeriods`：デバイスのロケールを使用してローカライズされた、オファーの長さを説明する文字列。たとえば、3日間のトライアルオファーの場合、このフィールドには `'3 days'` が表示されます。 • `subscriptionPeriod`：このプロパティを使用して、オファー期間の個別の詳細を取得することもできます。オファーに対しても、前のセクションで説明したものと同じ方法で機能します。 • `localizedSubscriptionPeriod`：ユーザーのロケールに合わせてフォーマットされた、割引のサブスクリプション期間。

デフォルトオーディエンスのペイウォールでペイウォール取得を高速化する

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

getPaywall を推奨する理由

getPaywallForDefaultAudience メソッドにはいくつかの重大な欠点があります：

後方互換性の問題: 現在のバージョンと将来のバージョンで異なるペイウォールを表示する必要がある場合、問題が生じる可能性があります。現在（レガシー）バージョンに対応したペイウォールを設計するか、現在（レガシー）バージョンのユーザーがペイウォールを表示できない問題を許容するかのどちらかになります。
ターゲティングの喪失: すべてのユーザーが All Users オーディエンス向けに設計された同一のペイウォールを見ることになり、国、マーケティングのアトリビューション、独自のカスタム属性などに基づいたパーソナライズされたターゲティングができなくなります。これらのデメリットを受け入れてでもペイウォールの高速取得を利用したい場合は、以下のように getPaywallForDefaultAudience メソッドを使用してください。そうでなければ、上記で説明した getPaywall を使い続けることをおすすめします。

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

getPaywallForDefaultAudience メソッドは、React Native SDK バージョン 2.11.2 以降で利用できます。

パラメーター必須/任意説明

placementId 必須プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。

locale

任意

デフォルト: en

ペイウォールのローカライズの識別子。このパラメーターは、マイナス（-）文字で区切られた1つ以上のサブタグで構成される言語コードを指定します。最初のサブタグは言語、2番目は地域を表します。

例: en は英語、pt-br はブラジルポルトガル語を表します。

ロケールコードおよび推奨される使用方法については、ローカライズとロケールコードを参照してください。

fetchPolicy

デフォルト: .reloadRevalidatingCacheData

デフォルトでは、SDK はサーバーからデータの読み込みを試み、失敗した場合はキャッシュされたデータを返します。この方法を推奨します。ユーザーが常に最新のデータを取得できるためです。

ただし、ユーザーのインターネット接続が不安定な場合は、.returnCacheDataElseLoad を使用してキャッシュが存在する場合にキャッシュデータを返すことを検討してください。この場合、最新のデータが取得できないことがありますが、接続状況にかかわらず読み込みが速くなります。キャッシュはセッション中も定期的に更新されるため、ネットワークリクエストを減らすために安全に活用できます。

キャッシュはアプリの再起動後も保持され、アプリのアンインストール時または手動でクリアした場合にのみ削除されます。