---
title: "React Native SDKでリモートコンフィグペイウォールのペイウォールとプロダクトを取得する"
description: "Adapty React Native SDKでペイウォールとプロダクトを取得し、ユーザーの収益化を強化します。"
---

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

:::tip

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

:::

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

   1. Adapty ダッシュボードで[プロダクトを作成する](create-product)。

2. Adapty ダッシュボードで[ペイウォールを作成し、プロダクトをペイウォールに組み込む](create-paywall)。

3. Adapty ダッシュボードで[プレースメントを作成し、ペイウォールをプレースメントに組み込む](create-placement)。

4. モバイルアプリに[Adapty SDKをインストールする](sdk-installation-reactnative)。
</details>

## ペイウォール情報を取得する \{#fetch-paywall-information\}

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

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

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

```typescript showLineNumbers
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**   | 必須 | [プレースメント](placements)の識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。 |
| **locale**        | <p>任意</p><p>デフォルト: `en`</p> | <p>[ペイウォールのローカライズ](add-remote-config-locale)の識別子。このパラメータは、マイナス（**-**）で区切られた1つ以上のサブタグで構成される言語コードです。最初のサブタグは言語、2番目は地域を表します。</p><p></p><p>例: `en`は英語、`pt-br`はブラジルポルトガル語を表します。</p><p></p><p>ロケールコードの詳細と推奨される使用方法については、[ローカライズとロケールコード](react-native-localizations-and-locale-codes)を参照してください。</p> |
| **fetchPolicy**   | デフォルト: `.reloadRevalidatingCacheData` | <p>デフォルトでは、SDKはサーバーからデータを読み込もうとし、失敗した場合はキャッシュデータを返します。ユーザーが常に最新のデータを取得できるため、この設定を推奨します。</p><p></p><p>ただし、ユーザーが不安定なインターネット環境にいると想定される場合は、`.returnCacheDataElseLoad`を使用してキャッシュデータが存在すれば返すことを検討してください。この場合、最新データが取得できないこともありますが、接続状況に関わらず読み込み時間が短縮されます。キャッシュは定期的に更新されるため、セッション中にネットワークリクエストを避けるために使用しても安全です。</p><p></p><p>キャッシュはアプリを再起動しても保持され、アプリの再インストールまたは手動でのクリーンアップ時のみ削除されます。</p><p></p><p>Adapty SDKはペイウォールを2つのレイヤーで保存します: 上記の定期更新キャッシュと[フォールバックペイウォール](react-native-use-fallback-paywalls)です。また、ペイウォールをより速く取得するためにCDNを使用し、CDNに到達できない場合のためにスタンドアロンのフォールバックサーバーも利用しています。このシステムは、インターネット接続が不安定な場合でも常に最新のペイウォールを取得できるよう設計されています。</p> |
| **loadTimeoutMs** | デフォルト: 5秒 | <p>このメソッドのタイムアウト上限を設定します。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。</p><p></p><p>まれに、内部で複数のリクエストが実行される場合があるため、`loadTimeout`で指定した時間よりわずかに遅れてタイムアウトすることがあります。</p> |

プロダクトIDをハードコードしないでください！ペイウォールはリモートで設定されるため、利用可能なプロダクト、プロダクト数、特別オファー（無料トライアルなど）は随時変更される可能性があります。これらのシナリオをコードで適切に処理してください。  
例えば、最初に2つのプロダクトを取得した場合はその2つを表示し、後で3つになった場合はコード変更なしに3つすべてを表示できるようにしてください。ハードコードが必要なのはプレースメントIDのみです。

レスポンスパラメータ:

| パラメータ | 説明                                                                                                                                                  |
| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Paywall   | プロダクトIDのリスト、ペイウォール識別子、リモートコンフィグ、およびその他のプロパティを含む[`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall)オブジェクト。 |

## プロダクトを取得する \{#fetch-products\}

ペイウォールを取得したら、対応するプロダクト配列を照会できます:

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

レスポンスパラメータ:

| パラメータ | 説明                                                                                                                                                                                |
| :-------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Products  | プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、およびその他のプロパティを含む[`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct)オブジェクトのリスト。                                   |

独自のペイウォールデザインを実装する際は、[`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct)オブジェクトのプロパティにアクセスする必要があります。以下によく使用されるプロパティを示しますが、利用可能なすべてのプロパティの詳細についてはリンク先のドキュメントを参照してください。

| プロパティ                | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **タイトル**               | プロダクトのタイトルを表示するには、`product.localizedTitle`を使用します。ローカライズはデバイスのロケールではなく、ユーザーが選択したストアの国に基づきます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **価格**               | ローカライズされた価格を表示するには、`product.price?.localizedString`を使用します。このローカライズはデバイスのロケール情報に基づきます。`product.price?.amount`を使用して数値として価格にアクセスすることもできます。値は現地通貨で提供されます。関連する通貨記号を取得するには、`product.price?.currencySymbol`を使用します。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **サブスクリプション期間** | 期間（週、月、年など）を表示するには、`product.subscription?.localizedSubscriptionPeriod`を使用します。このローカライズはデバイスのロケールに基づきます。プログラムでサブスクリプション期間を取得するには、`product.subscription?.subscriptionPeriod`を使用します。そこから`unit`プロパティにアクセスして長さ（`'day'`、`'week'`、`'month'`、`'year'`、または`'unknown'`）を取得できます。`numberOfUnits`の値で期間単位の数を取得できます。例えば、四半期サブスクリプションの場合、unitプロパティは`'month'`、numberOfUnitsは`3`になります。                                                                                                                                                                                                                                                                                                       |
| **初回オファー**  | サブスクリプションに初回オファーが含まれているかどうかを示すバッジなどを表示するには、`product.subscription?.offer?.phases`プロパティを確認します。これは最大2つの割引フェーズ（無料トライアルフェーズと初回割引価格フェーズ）を含むリストです。各フェーズオブジェクトには以下の便利なプロパティがあります:<br/>• `paymentMode`: `'free_trial'`、`'pay_as_you_go'`、`'pay_up_front'`、`'unknown'`の値を持つ文字列。無料トライアルは`'free_trial'`タイプになります。<br/>• `price`: 数値としての割引価格。無料トライアルの場合は`0`になります。<br/>• `localizedNumberOfPeriods`: オファーの長さを説明するデバイスのロケールでローカライズされた文字列。例えば、3日間のトライアルオファーはこのフィールドに`'3 days'`と表示されます。<br/>• `subscriptionPeriod`: または、このプロパティを使用してオファー期間の個別の詳細を取得できます。オファーに対しても前のセクションで説明したのと同じように機能します。<br/>• `localizedSubscriptionPeriod`: ユーザーのロケールに合わせてフォーマットされた割引のサブスクリプション期間。 |

## デフォルトオーディエンスのペイウォールでペイウォール取得を高速化する \{#speed-up-paywall-fetching-with-default-audience-paywall\}

通常、ペイウォールはほぼ瞬時に取得されるため、このプロセスの高速化について心配する必要はありません。しかし、オーディエンスやペイウォールが多数あり、かつユーザーのインターネット接続が弱い場合、ペイウォールの取得に予想以上の時間がかかることがあります。そのような場合、ペイウォールをまったく表示しないよりも、スムーズなユーザー体験を確保するためにデフォルトのペイウォールを表示したいことがあるでしょう。

この問題に対処するため、`getPaywallForDefaultAudience`メソッドを使用できます。これは指定したプレースメントの**All Users**オーディエンス向けペイウォールを取得します。ただし、上記の[ペイウォール情報を取得する](fetch-paywalls-and-products-react-native#fetch-paywall-information)セクションで詳述している`getPaywall`メソッドによる取得が推奨アプローチであることを理解しておくことが重要です。

:::warning
`getPaywall`を推奨する理由

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

- **後方互換性の問題が生じる可能性**: 現在と将来のアプリバージョンで異なるペイウォールを表示する必要がある場合、課題が生じる可能性があります。現在の（レガシー）バージョンをサポートするペイウォールを設計するか、現在の（レガシー）バージョンのユーザーがレンダリングされないペイウォールに遭遇する可能性を受け入れるかのどちらかになります。
- **ターゲティングの喪失**: すべてのユーザーが**All Users**オーディエンス向けに設計された同じペイウォールを見ることになり、国、マーケティングアトリビューション、独自のカスタム属性に基づくパーソナライズされたターゲティングが失われます。

これらの欠点を受け入れてでも高速なペイウォール取得のメリットを得たい場合は、以下のように`getPaywallForDefaultAudience`メソッドを使用してください。そうでなければ、[上記](fetch-paywalls-and-products-react-native#fetch-paywall-information)で説明した`getPaywall`を使用してください。
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

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

:::note
`getPaywallForDefaultAudience`メソッドはReact Native SDKバージョン2.11.2以降で利用可能です。
:::

| パラメータ | 必須 | 説明 |
|---------|--------|-----------|
| **placementId** | 必須 | [プレースメント](placements)の識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。 |
| **locale** | <p>任意</p><p>デフォルト: `en`</p> | <p>[ペイウォールのローカライズ](add-remote-config-locale)の識別子。このパラメータは、マイナス（**-**）で区切られた1つ以上のサブタグで構成される言語コードです。最初のサブタグは言語、2番目は地域を表します。</p><p></p><p>例: `en`は英語、`pt-br`はブラジルポルトガル語を表します。</p><p></p><p>ロケールコードの詳細と推奨される使用方法については、[ローカライズとロケールコード](react-native-localizations-and-locale-codes)を参照してください。</p> |
| **fetchPolicy** | デフォルト: `.reloadRevalidatingCacheData` | <p>デフォルトでは、SDKはサーバーからデータを読み込もうとし、失敗した場合はキャッシュデータを返します。ユーザーが常に最新のデータを取得できるため、この設定を推奨します。</p><p></p><p>ただし、ユーザーが不安定なインターネット環境にいると想定される場合は、`.returnCacheDataElseLoad`を使用してキャッシュデータが存在すれば返すことを検討してください。この場合、最新データが取得できないこともありますが、接続状況に関わらず読み込み時間が短縮されます。キャッシュは定期的に更新されるため、セッション中にネットワークリクエストを避けるために使用しても安全です。</p><p></p><p>キャッシュはアプリを再起動しても保持され、アプリの再インストールまたは手動でのクリーンアップ時のみ削除されます。</p> |