# REACT-NATIVE - Adapty Documentation (Full Content) This file contains the complete content of all documentation pages for this platform. Locale: ja Generated on: 2026-07-24T13:00:57.707Z Total files: 45 --- # File: sdk-installation-react-native-expo --- --- title: "Install & configure Adapty React Native SDK in an Expo project" description: "Step-by-step guide on installing Adapty React Native SDK in an Expo project for subscription-based apps." --- :::important このガイドでは、**Expo プロジェクト**への Adapty React Native SDK のインストールと設定について説明します。 **Pure React Native（Expo なし）**を使用している場合は、代わりに [React Native インストールガイド](sdk-installation-react-native-pure) をご覧ください。 ::: Adapty SDK には、React Native アプリにシームレスに統合するための 2 つの主要モジュールが含まれています： - **Core Adapty**: このモジュールは、アプリで Adapty が正常に動作するために必要です。 - **AdaptyUI**: このモジュールは、クロスプラットフォームのペイウォールを簡単に作成できるノーコードツール「[Adapty ペイウォールビルダー](adapty-paywall-builder)」を使用する場合に必要です。AdaptyUI はコアモジュールと同時に自動的に有効化されます。 React Native アプリへのアプリ内課金の実装方法について詳しく知りたい場合は、[こちらのチュートリアル](https://adapty.io/blog/react-native-in-app-purchases-tutorial/)をご覧ください。 :::tip Adapty SDKをExpoアプリに統合する実際の例を見てみたいですか？サンプルアプリをご確認ください： - [Expo devビルドサンプル](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/FocusJournalExpo)：実際の購入やペイウォールビルダーを含む全機能対応 - [Expo Go & Webサンプル](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/ExpoGoWebMock)：モックモードでのテスト用 ::: 完全な実装のウォークスルーは、以下の動画でもご覧いただけます：
## 要件 \{#requirements\} Adapty React Native SDK は iOS 15.0+ が必要です。 iOS 向けにビルドするには **Swift 6.0** 以降が必要です。[キッズモード](kids-mode-react-native)には **Swift 6.1** 以降が必要です。 :::info SDK v3.17 以降、Adapty SDK はデフォルトで Google Play Billing Library v8.0.0 を使用します。 ::: :::info SDKのインストールは、Adaptyセットアップのステップ5です。アプリ内で課金が機能するようにするには、アプリをストアに接続し、Adapty ダッシュボードでプロダクト、ペイウォール、プレースメントを作成する必要があります。[クイックスタートガイド](quickstart)では、必要なすべての手順を説明しています。 ::: ## Adapty SDK のインストール \{#install-adapty-sdk\} :::important v4 以降、Adapty React Native SDK はネイティブ依存関係の CocoaPods インストールをサポートしなくなりました。v4 以降（[フロービルダー](adapty-flow-builder)向け）が必要な場合は、代わりに以下の [Adapty SDK 4.0: Swift Package Manager を有効にする](#adapty-sdk-40-enable-swift-package-manager) を参照してください。 ::: [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) :::important [Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/)（カスタム開発ビルド）は、ExpoプロジェクトでAdaptyを使用するために必要です。 Expo Goはカスタムネイティブモジュールをサポートしていないため、UI/ロジック開発用の[**モックモード**](#set-up-mock-mode-for-expo-go--expo-web)でのみ使用できます（実際の購入やAdaptyUI/ペイウォールビルダーのレンダリングはありません）。 ::: 1. Adapty SDKをインストールします（`@adapty/core`も自動的にインストールされます）： ```sh npx expo install react-native-adapty npx expo prebuild ``` 2. EASまたはローカルビルドを使用して、開発用アプリをビルドします： ```sh # For iOS eas build --profile development --platform ios # For Android eas build --profile development --platform android ``` ```sh # For iOS npx expo run:ios # For Android npx expo run:android ``` 3. 開発サーバーを起動します: ```sh npx expo start --dev-client ``` ### Adapty SDK 4.0: Swift Package Manager を有効にする \{#adapty-sdk-40-enable-swift-package-manager\} React Native SDK 4.0 — [フローBuilder](adapty-flow-builder) サポートを追加 — は **React Native 0.75 以降** が必要です。SDK をインストールします: ```sh npx expo install react-native-adapty@^4.0.0 ``` v4はCocoaPodsのサブ依存関係の代わりに、Swift Package Manager経由でネイティブiOS SDK（`Adapty`、`AdaptyUI`、`AdaptyPlugin`）を取得します（[CocoaPodsのspecリポジトリは2026年12月に読み取り専用になります](https://blog.cocoapods.org/CocoaPods-Specs-Repo/)）。SPMはダイナミックフレームワークを必要とするため、Expoでは[`expo-build-properties`](https://docs.expo.dev/versions/latest/sdk/build-properties/)プラグインで有効にします。`app.json`（または`app.config.js`）に追加してください： ```json showLineNumbers title="app.json" { "expo": { "plugins": [ [ "expo-build-properties", { "ios": { "useFrameworks": "dynamic" } } ] ] } } ``` 次に、プラグインをインストールしてネイティブプロジェクトを再生成します: ```sh npx expo install expo-build-properties npx expo prebuild --clean ``` 詳細な移行手順については、[Adapty React Native SDK を v4 へ移行する](migration-to-react-native-sdk-v4) を参照してください。 ## Adapty SDK の Adapty モジュールを有効化する \{#activate-adapty-module-of-adapty-sdk\} **Public SDK Key** を取得するには： 1. Adapty ダッシュボードを開き、[**App settings → General**](https://app.adapty.io/settings/general) に移動します。 2. **Api keys** セクションで、**Public SDK Key**（Secret Key ではない）をコピーします。 3. コード内の `"YOUR_PUBLIC_SDK_KEY"` を置き換えます。 または、[Adapty CLI](developer-cli) を使ってプログラムから取得することもできます： ``` npm install -g adapty adapty auth login adapty apps list ``` あるいは、直接実行する場合： ``` npx adapty auth login adapty apps list ``` - Adapty の初期化には必ず **Public SDK key** を使用してください。**Secret key** は[サーバーサイド API](getting-started-with-server-side-api) 専用です。 - **SDK keys** はアプリごとに固有です。複数のアプリがある場合は、正しいキーを選択してください。 `App.tsx` に以下のコードをコピーして Adapty を有効化します： ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` :::important `activate` が解決するまで、他の Adapty SDK メソッドを呼び出さないでください。完全な順序については [React Native SDK の呼び出し順序](react-native-sdk-call-order) を参照してください。 ::: 次に、アプリ内でペイウォールを設定します： - [Adapty ペイウォールビルダー](adapty-paywall-builder)を使用する場合は、[ペイウォールビルダーのクイックスタート](react-native-quickstart-paywalls)を参照してください。 - 独自のペイウォール UI を構築する場合は、[カスタムペイウォールのクイックスタート](react-native-quickstart-manual)を参照してください。 :::tip 開発環境でのアクティベーションエラーを回避するには、[こちらのヒント](#development-environment-tips)を参照してください。 ::: ## AdaptyUI モジュールを有効化する \{#activate-adaptyui-module-of-adapty-sdk\} [ペイウォールビルダー](adapty-paywall-builder)を使用する場合は、AdaptyUI モジュールが必要です。コアモジュールを有効化すると自動的に有効化されるため、追加の操作は不要です。 ## オプション設定 \{#optional-setup\} ### ログ \{#logging\} #### ログシステムの設定 \{#set-up-the-logging-system\} Adapty はエラーやその他の重要な情報をログに記録し、状況を把握しやすくします。以下のログレベルが利用可能です。 | Level | Description | | ---------- | ------------------------------------------------------------ | | `error` | エラーのみがログに記録されます | | `warn` | エラーおよび重大なエラーは引き起こさないものの注意すべきSDKからのメッセージがログに記録されます | | `info` | エラー、警告、および各種情報メッセージがログに記録されます | | `verbose` | 関数呼び出し、APIクエリなど、デバッグ時に役立つ可能性のある追加情報がすべてログに記録されます | ログレベルは、Adapty の設定前または設定中にアプリ内で指定できます。 ```typescript showLineNumbers title="App.tsx" // Set log level before activation // 'verbose' is recommended for development and the first production release adapty.setLogLevel('verbose'); // Or set it during configuration adapty.activate('YOUR_PUBLIC_SDK_KEY', { logLevel: 'verbose', }); ``` ### データポリシー \{#data-policies\} Adaptyはユーザーの個人データを明示的に送信しない限り保存しませんが、ストアや国のガイドラインに準拠するために追加のデータセキュリティポリシーを実装することができます。 #### IPアドレスの収集と共有を無効にする \{#disable-ip-address-collection-and-sharing\} Adaptyモジュールをアクティベートする際に、`ipAddressCollectionDisabled`を`true`に設定すると、ユーザーのIPアドレスの収集と共有を無効にできます。デフォルト値は`false`です。 このパラメータを使用して、ユーザーのプライバシーを強化し、地域のデータ保護規制（GDPRやCCPAなど）に準拠し、IPベースの機能がアプリに不要な場合に不必要なデータ収集を削減できます。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ipAddressCollectionDisabled: true, }); ``` #### 広告IDの収集と共有を無効にする \{#disable-advertising-id-collection-and-sharing\} Adapty モジュールを有効化する際、広告識別子の収集を無効にするには、iOS の場合は `ios.idfaCollectionDisabled`、Android の場合は `android.adIdCollectionDisabled` を `true` に設定してください。デフォルト値は `false` です。 App Store / Play Store のポリシーへの準拠、App Tracking Transparency プロンプトの表示回避、または広告 ID に基づくアトリビューションや分析がアプリで不要な場合に、このパラメータを使用してください。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { idfaCollectionDisabled: true, }, android: { adIdCollectionDisabled: true, }, }); ``` #### AdaptyUI のメディアキャッシュ設定 \{#set-up-media-cache-configuration-for-adaptyui\} デフォルトでは、AdaptyUI はパフォーマンス向上とネットワーク使用量の削減のために、画像や動画などのメディアをキャッシュします。カスタム設定を指定することで、キャッシュの動作を変更できます。 `mediaCache` を使用して、デフォルトのキャッシュ設定を上書きしてください： ```typescript adapty.activate('YOUR_PUBLIC_SDK_KEY', { mediaCache: { memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes memoryStorageCountLimit: 2147483647, // Optional: max number of items in memory diskStorageSizeLimit: 200 * 1024 * 1024, // Optional: disk cache size in bytes }, }); ``` | パラメーター | 必須 | 説明 | |-----------|----------|-------------| | memoryStorageTotalCostLimit | 任意 | メモリ上のキャッシュサイズ（バイト単位）。デフォルト値はプラットフォームによって異なります。 | | memoryStorageCountLimit | 任意 | メモリストレージのアイテム数制限。デフォルト値はプラットフォームによって異なります。 | | diskStorageSizeLimit | 任意 | ディスク上のファイルサイズ制限（バイト単位）。デフォルト値はプラットフォームによって異なります。 | ### ローカルアクセスレベルを有効にする（Android） \{#enable-local-access-levels-android\} デフォルトでは、[ローカルアクセスレベル](local-access-levels)は iOS で有効、Android で無効になっています。Android でも有効にするには、`localAccessLevelAllowed` を `true` に設定してください： ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { android: { localAccessLevelAllowed: true, }, }); ``` ### バックアップ復元時のデータクリア \{#clear-data-on-backup-restore\} `clearDataOnBackup` を `true` に設定すると、SDKはアプリがiCloudバックアップから復元されたことを検出し、キャッシュされたプロファイル情報、プロダクト詳細、ペイウォールなど、ローカルに保存されたすべてのSDKデータを削除します。その後、SDKはクリーンな状態で初期化されます。デフォルト値は `false` です。 :::note 削除されるのはローカルのSDKキャッシュのみです。Appleとのトランザクション履歴およびAdaptyサーバー上のユーザーデータは変更されません。 ::: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { clearDataOnBackup: true }, }); ``` ## 開発環境に関するヒント \{#development-environment-tips\} #### Expo Go / Expo Web 向けモックモードの設定 \{#set-up-mock-mode-for-expo-go--expo-web\} Expo Go および Expo Web 環境では、Adapty のネイティブモジュールにアクセスできません。ランタイムエラーを避けながら、アプリの UI やペイウォールのロジックをビルド・テストできるよう、Adapty は**モックモード**を提供しています。 ::::important モックモードは、実際の購入をテストするためのツールでは**ありません**： - App Store / Google Play の購入フローを**開きません**。また、実際のトランザクションを**作成しません**。 - **Adapty ペイウォールビルダー（AdaptyUI）**で作成したペイウォール/オンボーディングを**レンダリングしません**。 - Adaptyのネイティブモジュールは**完全にバイパスされます**。Xcode/Androidビルドにネイティブ SDK ファイルが存在しない場合や、無効な API キーを使用した場合でもエラーは発生しません。 実際の購入やペイウォールビルダーのペイウォールをテストするには、モックモードが自動的に無効になる Expo Dev Client / プロダクションビルドを使用してください。 :::: **デフォルトでは**、SDKはExpo GoおよびWeb環境を自動的に検出し、モックモードを有効にします。モックデータをカスタマイズしたい場合を除き、設定は不要です。 モックモードが有効な場合： - すべてのAdaptyメソッドは、Adaptyのサーバーへのネットワークリクエストを行わずにモックデータを返します。 - デフォルトでは、初期モックプロファイルにアクティブなサブスクリプションはありません。 - デフォルトでは、`makePurchase(...)` は購入成功をシミュレートし、プレミアムアクセスを付与します。 アクティベーション時に `mockConfig` を使ってモックデータをカスタマイズできます。設定フォーマットとサポートされているパラメータは[こちら](https://react-native.adapty.io/interfaces/adaptymockconfig)をご覧ください。 ```typescript showLineNumbers title="App.tsx" try { await adapty.activate('YOUR_PUBLIC_SDK_KEY', { mockConfig: { // Customize the initial mock profile (optional) }, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); } ``` SDKのメソッドを有効化前に呼び出す必要がある場合（`isActivated()`や`setLogLevel()`など）、`activate()`の前に`enableMock()`を使用してください。ブリッジがすでに初期化されている場合、このメソッドは何もしません。 ```typescript showLineNumbers title="App.tsx" adapty.enableMock(); // オプション: mockConfigを渡してモックデータをカスタマイズできます // これで有効化前にメソッドを呼び出せます await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` #### 開発目的でSDKの有効化を遅らせる \{#delay-sdk-activation-for-development-purposes\} Adapty は SDK のアクティベーション時に必要なユーザーデータをすべて事前取得するため、最新データへのアクセスが高速になります。 ただし、iOS シミュレーターでは開発中に認証を頻繁に求められるため、問題が生じることがあります。Adapty は StoreKit の認証フローを制御できませんが、SDK が最新のユーザーデータを取得するリクエストを遅延させることができます。 `__debugDeferActivation` プロパティを有効にすると、次に Adapty SDK を呼び出すまで `activate` の実行が保留されます。これにより、必要でない場合に認証データを求めるプロンプトが不必要に表示されるのを防げます。 この機能は**開発用途のみを想定したもの**であり、すべてのユーザーシナリオに対応しているわけではない点にご注意ください。本番環境では、実際のデバイスは認証データを記憶しており、何度も認証を求めることはないため、アクティベーションを遅らせるべきではありません。 推奨する使用方法は以下のとおりです。 ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### React NativeのFast RefreshにおけるSDKアクティベーションエラーのトラブルシューティング \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\} React NativeでAdapty SDKを使って開発していると、次のエラーが発生することがあります：`Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.` これは、React Native のファスト リフレッシュ機能が開発中に複数のアクティベーション呼び出しをトリガーするために発生します。これを防ぐには、`__ignoreActivationOnFastRefresh` オプションを `__DEV__`（React Native の開発モードフラグ）に設定してください。 ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __ignoreActivationOnFastRefresh: __DEV__, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` ## トラブルシューティング \{#troubleshooting\} #### iOSの最小バージョンエラー \{#minimum-ios-version-error\} iOSビルド時に、**最小iOSバージョン**またはデプロイメントターゲットに関するエラーが表示されることがあります。AdaptyはiOS 15.0以降を必要とします。 ExpoはiOSプロジェクト（`Podfile`を含む）を`expo prebuild`の実行時に生成するため、**`Podfile`を直接編集しないでください**。代わりに、`expo-build-properties`設定プラグインを使用してデプロイメントターゲットを設定してください。 1. プラグインをインストールします： ```sh npx expo install expo-build-properties ``` 2. ExpoのConfig（`app.json`または`app.config.js`）を更新して、iOSのデプロイメントターゲットを設定します： ``` { "expo": { // ...other Expo config... "plugins": [ [ "expo-build-properties", { "ios": { // Adapty requires iOS 15.0+. "deploymentTarget": "15.0" } } ], ] } } ``` 3. ネイティブ iOS プロジェクトを再生成してリビルドします： ``` npx expo prebuild --clean npx expo run:ios # or `eas build -p ios` on your CI ``` #### Android Auto Backup マニフェストの競合 \{#android-auto-backup-manifest-conflict\} Expo で複数の SDK（Adapty、AppsFlyer、expo-secure-store など）を使用していて、それぞれが Android Auto Backup を設定している場合、マニフェストのマージ競合が発生することがあります。 典型的なエラーは次のようになります: `Manifest merger failed : Attribute application@fullBackupContent value=(@xml/secure_store_backup_rules) from AndroidManifest.xml:24:248-306 is also present at [io.adapty:android-sdk:3.12.0] AndroidManifest.xml:9:18-70 value=(@xml/adapty_backup_rules).` この競合を解決するには、Adapty プラグインに Android バックアップ設定を管理させる必要があります。 プロジェクトで `expo-secure-store` も使用している場合は、重複を避けるためにそのバックアップ設定を無効にしてください。 `app.json` の設定方法は以下のとおりです。 ```json title="app.json" { "expo": { "plugins": [ ["react-native-adapty", { "replaceAndroidBackupConfig": true }], ["expo-secure-store", { "configureAndroidBackup": false }] ] } } ``` `replaceAndroidBackupConfig` オプションはデフォルトで `false` です。有効にすると、Adapty プラグインが Android のバックアップルールを管理できるようになります。 `expo-secure-store` を使用している場合は、警告を防ぐために `"configureAndroidBackup": false` を含めてください。SecureStore のバックアップ設定は Adapty によって処理されます。 :::important このセットアップは、Adapty、AppsFlyer、および expo-secure-store のバックアップ要件にのみ対応しています。 プロジェクト内の他のライブラリがカスタムバックアップルールを定義している場合は、手動で設定する必要があります。 ::: --- # File: sdk-installation-react-native-pure --- --- title: "Install & configure Adapty SDK in a pure React Native project" description: "Step-by-step guide on installing Adapty SDK on React Native for subscription-based apps." --- :::important このガイドは**純粋な React Native（非 Expo）プロジェクト**にのみ適用されます。 **Expo** を使用している場合は、代わりに [Expo インストールガイド](sdk-installation-react-native-expo)を参照してください。 ::: Adapty SDK には、React Native アプリへシームレスに統合するための 2 つの主要モジュールが含まれています： - **Core Adapty**: このモジュールは、アプリでAdaptyを正しく動作させるために必要です。 - **AdaptyUI**: このモジュールは、クロスプラットフォームのペイウォールをノーコードで簡単に作成できる[Adapty ペイウォールビルダー](adapty-paywall-builder)を使用する場合に必要です。AdaptyUIはコアモジュールと一緒に自動的に有効になります。 :::tip Adapty SDKをモバイルアプリに実際に統合した例を見たいですか？ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを示す[サンプルアプリ](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples)をご覧ください。 ::: ## 要件 \{#requirements\} Adapty React Native SDK は iOS 15.0 以上が必要です。 iOS 向けビルドには **Swift 6.0** 以降が必要です。[キッズモード](kids-mode-react-native) は **Swift 6.1** 以降が必要です。 :::info SDK v3.17 以降、Adapty SDK はデフォルトで Google Play Billing Library v8.0.0 を使用します。 ::: :::info SDKのインストールは、Adaptyセットアップのステップ5です。アプリ内で課金が機能するようにするには、アプリをストアに接続し、Adapty ダッシュボードでプロダクト、ペイウォール、プレースメントを作成する必要があります。[クイックスタートガイド](quickstart)では、必要なすべての手順を説明しています。 ::: ## Adapty SDKのインストール \{#install-adapty-sdk\} :::important v4以降、Adapty React Native SDKはネイティブ依存関係のCocoaPodsインストールをサポートしなくなりました。v4以降（[フロービルダー](adapty-flow-builder)用）が必要な場合は、以下の[Adapty SDK 4.0: Swift Package Managerを有効にする](#adapty-sdk-40-enable-swift-package-manager)の手順に従ってください。 ::: [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) 1. Adapty SDK をインストールします（`@adapty/core` も自動的にインストールされます）: ```sh showLineNumbers title="Shell" # using npm npm install react-native-adapty # or using yarn yarn add react-native-adapty ``` 2. iOS の場合、pods をインストールします: ```sh showLineNumbers title="Shell" cd ios && pod install ```
Android で React Native のバージョンが 0.73.0 より古い場合（クリックして展開） `/android/build.gradle` ファイルを更新してください。`kotlin-gradle-plugin:1.8.0` 以降の依存関係が含まれていることを確認してください: ```groovy showLineNumbers title="/android/build.gradle" ... buildscript { ... dependencies { ... classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0" } } ... ```
### Adapty SDK 4.0: Swift Package Managerを有効にする \{#adapty-sdk-40-enable-swift-package-manager\} React Native SDK 4.0 — [フロービルダー](adapty-flow-builder)のサポートを追加 — は **React Native 0.75以降**が必要です。SDKをインストールします: ```sh showLineNumbers title="Shell" npm install react-native-adapty@^4.0.0 # or using yarn yarn add react-native-adapty@^4.0.0 ``` v4 では、ネイティブ iOS SDK（`Adapty`、`AdaptyUI`、`AdaptyPlugin`）を CocoaPods のサブ依存関係ではなく、Swift Package Manager 経由で取得するようになりました（[CocoaPods のスペックリポジトリは 2026 年 12 月に読み取り専用になります](https://blog.cocoapods.org/CocoaPods-Specs-Repo/)）。SPM にはダイナミックフレームワークが必要です。`ios/Podfile` のターゲットに以下を追加し、pod を再インストールしてください： ```ruby showLineNumbers title="ios/Podfile" use_frameworks! :linkage => :dynamic ``` ```sh showLineNumbers title="Shell" cd ios && pod install --repo-update ``` 以前に `Adapty`、`AdaptyUI`、または `AdaptyPlugin` を CocoaPods のサブ依存関係として追加していた場合は、まず `Podfile` から `pod 'Adapty'`、`pod 'AdaptyUI'`、`pod 'AdaptyPlugin'` の行を削除してください。 :::warning デフォルトのスタティックリンクからダイナミックフレームワークへ切り替えると、モジュラーヘッダーに対応していないライブラリと競合する場合があり、Flipper とも互換性がありません。詳細は [Migrate Adapty React Native SDK to v4](migration-to-react-native-sdk-v4) をご確認ください。 ::: ## Adapty SDK の Adapty モジュールを有効化する \{#activate-adapty-module-of-adapty-sdk\} **Public SDK Key** を取得するには： 1. Adapty ダッシュボードを開き、[**App settings → General**](https://app.adapty.io/settings/general) に移動します。 2. **Api keys** セクションで、**Public SDK Key**（Secret Key ではない）をコピーします。 3. コード内の `"YOUR_PUBLIC_SDK_KEY"` を置き換えます。 または、[Adapty CLI](developer-cli) を使ってプログラムから取得することもできます： ``` npm install -g adapty adapty auth login adapty apps list ``` あるいは、直接実行する場合： ``` npx adapty auth login adapty apps list ``` - Adapty の初期化には必ず **Public SDK key** を使用してください。**Secret key** は[サーバーサイド API](getting-started-with-server-side-api) 専用です。 - **SDK keys** はアプリごとに固有です。複数のアプリがある場合は、正しいキーを選択してください。 以下のコードを `App.tsx` にコピーして Adapty を有効化してください： ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` :::important 他の Adapty SDK メソッドを呼び出す前に、`activate` の解決を待ってください。完全な順序については [React Native SDK の呼び出し順序](react-native-sdk-call-order) を参照してください。 ::: 次に、アプリ内でペイウォールを設定します： - [Adapty ペイウォールビルダー](adapty-paywall-builder)を使用する場合は、[ペイウォールビルダーのクイックスタート](react-native-quickstart-paywalls)をご覧ください。 - 独自のペイウォール UI を構築する場合は、[カスタムペイウォールのクイックスタート](react-native-quickstart-manual)をご覧ください。 :::tip 開発環境でのアクティベーションエラーを避けるには、[こちらのヒント](#development-environment-tips)をご参照ください。 ::: ## AdaptyUI モジュールを有効化する \{#activate-adaptyui-module-of-adapty-sdk\} [ペイウォールビルダー](adapty-paywall-builder)を使用する場合は、AdaptyUI モジュールが必要です。コアモジュールを有効化すると自動的に有効になるため、追加の操作は不要です。 ## オプション設定 \{#optional-setup\} ### ロギング \{#logging\} #### ロギングシステムのセットアップ \{#set-up-the-logging-system\} Adapty はエラーやその他の重要な情報をログに記録し、状況を把握するのに役立てます。以下のログレベルが利用可能です。 | Level | Description | | ---------- | ------------------------------------------------------------ | | `error` | エラーのみがログに記録されます | | `warn` | エラーおよび重大なエラーは発生しないものの注意が必要なSDKからのメッセージがログに記録されます | | `info` | エラー、警告、およびさまざまな情報メッセージがログに記録されます | | `verbose` | 関数呼び出しやAPIクエリなど、デバッグ時に役立つ可能性のある追加情報がすべてログに記録されます | AdaptyConfigurationの前後どちらでもログレベルを設定できます: ```typescript showLineNumbers title="App.tsx" // Set log level before activation // 'verbose' is recommended for development and the first production release adapty.setLogLevel('verbose'); // Or set it during configuration adapty.activate('YOUR_PUBLIC_SDK_KEY', { logLevel: 'verbose', }); ``` ### データポリシー \{#data-policies\} Adapty はユーザーの個人データを保存しませんが（明示的に送信した場合を除く）、ストアや国のガイドラインに準拠するために、追加のデータセキュリティポリシーを実装することができます。 #### IPアドレスの収集と共有を無効にする \{#disable-ip-address-collection-and-sharing\} Adapty モジュールを有効化する際に、`ipAddressCollectionDisabled` を `true` に設定すると、ユーザーのIPアドレスの収集と共有を無効にできます。デフォルト値は `false` です。 このパラメーターを使用すると、ユーザーのプライバシー保護、地域のデータ保護規制（GDPRやCCPAなど）への準拠、またはIPベースの機能がアプリに不要な場合の不必要なデータ収集の削減に役立ちます。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ipAddressCollectionDisabled: true, }); ``` #### 広告IDの収集と共有を無効にする \{#disable-advertising-id-collection-and-sharing\} Adapty モジュールをアクティベートする際、広告識別子の収集を無効にするには、iOS の場合は `ios.idfaCollectionDisabled`、Android の場合は `android.adIdCollectionDisabled` を `true` に設定してください。デフォルト値は `false` です。 このパラメーターは、App Store / Play Store のポリシーへの準拠、App Tracking Transparency プロンプトの表示回避、または広告 ID を使用したアトリビューションや分析が不要な場合に活用できます。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { idfaCollectionDisabled: true, }, android: { adIdCollectionDisabled: true, }, }); ``` #### AdaptyUI のメディアキャッシュ設定を行う \{#set-up-media-cache-configuration-for-adaptyui\} デフォルトでは、AdaptyUI はパフォーマンス向上とネットワーク使用量削減のためにメディア（画像や動画など）をキャッシュします。カスタム設定を指定することで、キャッシュの動作をカスタマイズできます。 デフォルトのキャッシュ設定を上書きするには `mediaCache` を使用してください： ```typescript adapty.activate('YOUR_PUBLIC_SDK_KEY', { mediaCache: { memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes memoryStorageCountLimit: 2147483647, // Optional: max number of items in memory diskStorageSizeLimit: 200 * 1024 * 1024, // Optional: disk cache size in bytes }, }); ``` | パラメータ | 必須 | 説明 | |-----------|------|------| | memoryStorageTotalCostLimit | 任意 | メモリ上のキャッシュサイズ（バイト単位）。デフォルト値はプラットフォームによって異なります。 | | memoryStorageCountLimit | 任意 | メモリストレージのアイテム数の上限。デフォルト値はプラットフォームによって異なります。 | | diskStorageSizeLimit | 任意 | ディスク上のファイルサイズの上限（バイト単位）。デフォルト値はプラットフォームによって異なります。 | ### Androidでローカルアクセスレベルを有効にする \{#enable-local-access-levels-android\} デフォルトでは、[ローカルアクセスレベル](local-access-levels)はiOSで有効、Androidで無効になっています。Androidでも有効にするには、`localAccessLevelAllowed`を`true`に設定します： ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { android: { localAccessLevelAllowed: true, }, }); ``` ### バックアップ復元時のデータクリア \{#clear-data-on-backup-restore\} `clearDataOnBackup` を `true` に設定すると、SDKはアプリがiCloudバックアップから復元されたことを検出し、キャッシュされたプロファイル情報、プロダクト詳細、ペイウォールを含むローカルに保存されたSDKデータをすべて削除します。その後、SDKはクリーンな状態で初期化されます。デフォルト値は `false` です。 :::note 削除されるのはローカルのSDKキャッシュのみです。Appleとのトランザクション履歴およびAdaptyサーバー上のユーザーデータは変更されません。 ::: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { clearDataOnBackup: true }, }); ``` ## 開発環境に関するヒント \{#development-environment-tips\} #### 開発目的でのSDKアクティベーションの遅延 \{#delay-sdk-activation-for-development-purposes\} AdaptyはSDKのアクティベーション時に必要なユーザーデータをすべてプリフェッチし、最新データへの高速アクセスを実現します。 ただし、iOSシミュレーターでは開発中に認証を頻繁に求められるため、これが問題になる場合があります。AdaptyはStoreKitの認証フローを制御できませんが、最新ユーザーデータを取得するSDKのリクエストを遅延させることは可能です。 `__debugDeferActivation` プロパティを有効にすると、次の Adapty SDK 呼び出しが行われるまで activate の呼び出しが保留されます。これにより、認証データが不要な場合に不必要なプロンプトが表示されるのを防ぎます。 **この機能は開発用途限定**であることに注意してください。すべてのユーザーシナリオをカバーするわけではありません。本番環境では、実際のデバイスは通常認証データを記憶しており、繰り返し認証情報を求めることがないため、アクティベーションを遅らせるべきではありません。 推奨される使用方法は次のとおりです。 ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### React Native の Fast Refresh で SDK のアクティベーションエラーが発生した場合のトラブルシューティング \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\} React Native で Adapty SDK を使って開発していると、`Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.` というエラーが発生することがあります。 これは React Native のファスト リフレッシュ機能が開発中に複数回のアクティベーション呼び出しをトリガーするために発生します。これを防ぐには、`__ignoreActivationOnFastRefresh` オプションに `__DEV__`（React Native の開発モードフラグ）を設定してください。 ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __ignoreActivationOnFastRefresh: __DEV__, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### ローカルテスト用のモックモードを設定する \{#set-up-mock-mode-for-local-testing\} ローカル開発やテスト時には、サンドボックスの App Store/Google Play アカウントを用意しなくても済むよう、またイテレーションを高速化するために、モックモードを有効にすることができます。モックモードは Adapty のネイティブモジュールを完全にバイパスし、シミュレートされたデータを返します。 :::important モックモードは実際の購入をテストするためのツールでは**ありません**： - App Store / Google Play の購入フローを**開きません**。また、実際のトランザクションを**作成しません**。 - **Adapty ペイウォールビルダー（AdaptyUI）**で作成されたペイウォール/オンボーディングを**レンダリングしません**。 - Adapty のネイティブモジュールは**完全にバイパスされます**。Xcode/Android ビルドにネイティブ SDK ファイルが存在しない場合や、無効な API キーを使用している場合でもエラーは発生しません。 - Adapty のサーバーにはデータが送信されません。 実際の購入とペイウォールビルダーのペイウォールをテストするには、モックモードを無効にしてサンドボックスアカウントを使用してください。 ::: モックモードを有効にするには、`enableMock` を `true` に設定します： ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { enableMock: true, }); ``` モックモードが有効な場合： - すべての Adapty メソッドは、Adapty のサーバーにネットワークリクエストを送ることなくモックデータを返します。 - デフォルトでは、初期モックプロファイルにはアクティブなサブスクリプションがありません。 - デフォルトでは、`makePurchase(...)` は購入成功をシミュレートし、プレミアムアクセスを付与します。 `mockConfig` を使って、アクティベーション時にモックデータをカスタマイズできます。設定フォーマットとサポートされているパラメータは[こちら](https://react-native.adapty.io/interfaces/adaptymockconfig)を参照してください。 ```typescript showLineNumbers title="App.tsx" try { await adapty.activate('YOUR_PUBLIC_SDK_KEY', { mockConfig: { // Customize the initial mock profile (optional) }, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); } ``` アクティベーション前にSDKのメソッド（`isActivated()` や `setLogLevel()` など）を呼び出す必要がある場合は、`activate()` の前に `enableMock()` を使用してください。ブリッジがすでに初期化されている場合、このメソッドは何も行いません。 ```typescript showLineNumbers title="App.tsx" adapty.enableMock(); // Optional: pass mockConfig to customize mock data // Now you can call methods before activation await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` ## トラブルシューティング \{#troubleshooting\} #### iOS最小バージョンエラー \{#minimum-ios-version-error\} iOS最小バージョンエラーが発生した場合は、Podfileを更新してください： ```diff -platform :ios, min_ios_version_supported +platform :ios, '15.0' ``` #### AndroidのAuto Backupマニフェスト競合 \{#android-auto-backup-manifest-conflict\} 一部のSDK（Adaptyを含む）には、独自のAndroid Auto Backup設定が含まれています。バックアップルールを定義する複数のSDKを使用している場合、Androidのマニフェストマージャーが `android:fullBackupContent`、`android:dataExtractionRules`、または `android:allowBackup` に関するエラーで失敗することがあります。 よくあるエラーの症状: `Manifest merger failed: Attribute application@dataExtractionRules value=(@xml/your_data_extraction_rules) is also present at [com.other.sdk:library:1.0.0] value=(@xml/other_sdk_data_extraction_rules)` :::note これらの変更は、Androidプラットフォームのディレクトリ（通常はプロジェクトの `android/` フォルダー内）で行う必要があります。 ::: この問題を解決するには、以下が必要です： - バックアップ関連の属性に対して、アプリの値を使用するようマニフェストマージャーに指示する。 - AdaptyのルールとほかのSDKのルールをマージしたバックアップルールファイルを作成する。 #### 1. マニフェストに `tools` 名前空間を追加する \{#1-add-the-tools-namespace-to-your-manifest\} `AndroidManifest.xml` ファイルのルートの `` タグに tools が含まれていることを確認してください： ```xml ... ``` #### 2. `` でバックアップ属性を上書きする \{#2-override-backup-attributes-in-application\} 同じ `AndroidManifest.xml` ファイルで、`` タグを更新して、アプリが最終的な値を提供し、マニフェストマージャーにライブラリの値を置き換えるよう指示します： ```xml ... ``` いずれかのSDKが `android:allowBackup` も設定している場合は、`tools:replace` に含めてください： ```xml tools:replace="android:allowBackup,android:fullBackupContent,android:dataExtractionRules" ``` #### 3. マージしたバックアップルールファイルを作成する \{#3-create-merged-backup-rules-files\} AndroidプロジェクトのAdaptyのルールとほかのSDKのルールを組み合わせた `res/xml/` ディレクトリにXMLファイルを作成します。AndroidはOSのバージョンによって異なるバックアップルール形式を使用するため、両方のファイルを作成することで、アプリがサポートするすべてのAndroidバージョンとの互換性が確保されます。 :::note 以下の例では、サンプルのサードパーティSDKとしてAppsFlyerを使用しています。アプリで使用しているほかのSDKのルールに置き換えるか、追加してください。 ::: **Android 12以降**（新しいデータ抽出ルール形式を使用）： ```xml title="sample_data_extraction_rules.xml" ``` **Android 11以前**（従来のフルバックアップコンテンツ形式を使用）： ```xml title="sample_backup_rules.xml" #### Androidで別のアプリから戻ったあとに購入が失敗する \{#purchases-fail-after-returning-from-another-app-in-android\} 購入フローを開始するActivityに非デフォルトの`launchMode`が設定されている場合、ユーザーがGoogle Play、銀行アプリ、またはブラウザから戻ったときにAndroidがActivityを誤って再生成または再利用することがあります。その結果、購入結果が失われたり、キャンセルとして処理されたりすることがあります。 購入フローを正しく機能させるには、購入フローを開始するActivityのlaunchModeに`standard`または`singleTop`のみを使用し、その他のモードは避けてください。 `AndroidManifest.xml`で、購入フローを開始するActivityが`standard`または`singleTop`に設定されていることを確認してください。 ```xml ``` #### Swift 6のビルドエラー（PodfileのSWIFT_VERSIONオーバーライドが原因） \{#swift-6-build-errors-caused-by-podfile-swift_version-override\} React Native アプリを iOS 向けにビルドする際、Adapty の pod ターゲットで Swift 6 のコンパイルエラーが発生することがあります。よくある症状としては、`AdaptyUIBuilderLogic` での `@Sendable` の不一致、Adapty 型の `Sendable` 準拠の欠如、アクター分離エラーなどが挙げられます。 Adapty の pods は `s.swift_version = '6.0'` を宣言しており、ビルドには Swift 6 が必要です。アプリ本体のコードは Swift 5 のままで問題ありません。Swift 6 でのビルドが必要なのは、Adapty の pod ターゲット（`Adapty`、`AdaptyUI`、`AdaptyUIBuilder`、`AdaptyLogger`、`AdaptyPlugin`）のみです。 最も一般的な原因は、`ios/Podfile` の `post_install` フックがすべての pod ターゲットに対して `SWIFT_VERSION` を上書きしていることです: ```ruby showLineNumbers title="ios/Podfile" post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '5.9' end end end ``` **修正方法**: Adapty の pod ターゲットをオーバーライドの対象から除外してください: ```ruby showLineNumbers title="ios/Podfile" post_install do |installer| installer.pods_project.targets.each do |target| next if %w[Adapty AdaptyUI AdaptyUIBuilder AdaptyLogger AdaptyPlugin].include?(target.name) target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '5.9' end end end ``` 次に、`ios/` ディレクトリから `pod install` を実行してリビルドしてください。 確認するには、`ios/Pods/Pods.xcodeproj` を開き、`Adapty` ポッドターゲット → **Build Settings** → **Swift Language Version** を選択します。**Swift 6** になっていれば正常です。 --- # File: react-native-quickstart-paywalls --- --- title: "React Native SDKでFlow Builderを使ってアプリ内課金を有効にする" description: "Adapty Flow Builderでアプリ内課金を有効にするクイックスタートガイド。" --- アプリ内課金を有効にするには、3つの主要な概念を理解する必要があります： - [**プロダクト**](product) – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス） - [**フロー**](adapty-flow-builder) – ノーコードのフロービルダーで作成した、プロダクトをユーザーに提示するための画面シーケンス。SDK は `getFlow` で取得します。自分のコードで UI を構築したい場合は、ペイウォールを使ってください — 詳細は[ペイウォールを手動で実装する](react-native-quickstart-manual)を参照してください。 - [**プレースメント**](placements) – アプリ内でフローを表示する場所とタイミング（`main`、`onboarding`、`settings` など）。ダッシュボードでフローをプレースメントに紐付けておき、コード内でプレースメント ID を指定してリクエストします。これにより、A/B テストの実施や、ユーザーごとに異なるフローの表示が簡単に行えます。 Adapty では、アプリ内で購入を有効にする方法を3つ提供しています。アプリの要件に応じていずれかを選択してください。 | 実装方法 | 複雑さ | 使用する場合 | |---|---|---| | Adapty フロービルダー | ✅ 簡単 | [ノーコードビルダーで購入対応済みの完全なフローを作成](quickstart-paywalls)します。Adapty が自動的にレンダリングし、複雑な購入フロー、レシート検証、サブスクリプション管理をすべて裏側で処理します。 | | 手動で作成したペイウォール | 🟡 中程度 | アプリのコードでペイウォール UI を実装しますが、プロダクトの柔軟性を保つために Adapty からフローオブジェクトを取得します。[ガイド](react-native-quickstart-manual)をご覧ください。 | | オブザーバーモード | 🔴 難しい | すでに独自の購入処理インフラを持っており、それを引き続き使用したい場合に選択します。オブザーバーモードには Adapty における制限があることに注意してください。[こちらの記事](observer-vs-full-mode)をご覧ください。 | :::important **以下の手順では、Adapty フロービルダーで作成したフローの実装方法を説明します。** ペイウォール UI を自分で実装したい場合は、[ペイウォールを手動で実装する](react-native-quickstart-manual)をご覧ください。 ::: Adapty フロービルダーで作成したフローを表示するには、アプリのコードで以下を行うだけです。 1. **フローを取得する**: Adapty からフローを取得します。 2. **フローを表示する（購入処理は Adapty が担います）**: アプリにビューを表示します。 3. **ボタンのアクションを処理する**: ユーザーの操作に対するアプリの反応を関連付けます。たとえば、リンクを開いたり、ユーザーがボタンをタップしたときにフローを閉じたりします。 ## 始める前に \{#before-you-start\} 始める前に、以下の手順を完了してください。 1. Adapty ダッシュボードで[App Store](initial_ios)および/または[Google Play](initial-android)にアプリを接続します。 2. Adaptyで[プロダクトを作成](create-product)します。 3. [ペイウォールを作成してプロダクトを追加](create-paywall)します。 4. [プレースメントを作成してペイウォールを追加](create-placement)します。 5. アプリコードに[Adapty SDKをインストールして有効化](sdk-installation-reactnative)します。 :::tip これらの手順を最速で完了するには、[クイックスタートガイド](quickstart)に従うか、[Developer CLI](developer-cli-quickstart)を使ってペイウォールとプレースメントを作成してください。 ::: ## 1. フローを取得する \{#1-get-the-flow\} フローはダッシュボードで設定したプレースメントに紐づいています。プレースメントを使うと、オーディエンスごとに異なるフローを表示したり、[A/B テスト](ab-tests)を実施したりできます。 Adapty フロービルダーで作成したフローを取得するには、`getFlow` メソッドを使って[プレースメント](placements) ID から `flow` オブジェクトを取得します。フローには表示に必要な UI 要素とスタイリング情報が含まれています。 ```typescript showLineNumbers title="React Native" try { const flow = await adapty.getFlow('YOUR_PLACEMENT_ID'); // the requested flow } catch (error) { // handle the error } ``` ## 2. フローを表示する \{#display-the-flow\} フローを取得したら、あとは数行追加するだけで表示できます。 既存のコンポーネントツリー内にフローを埋め込むには、React Native コンポーネント階層に `AdaptyFlowView` コンポーネントを直接使用します。 ```typescript showLineNumbers title="React Native (TSX)" function MyFlow({ flow }) { const onPurchaseCompleted = useCallback( (result, product) => result.type !== 'user_cancelled', [], ); return ( ); } ``` フローをスタンドアロン画面として表示するには、`createFlowView` メソッドで `view` を作成し、イベントハンドラーを設定してから `view.present()` を呼び出します。各 `view` は一度しか使用できません。フローを再度表示する必要がある場合は、`createFlowView` をもう一度呼び出して新しい `view` インスタンスを作成してください。 ```typescript showLineNumbers title="React Native" try { const view = await createFlowView(flow); view.setEventHandlers({ onPurchaseCompleted(result, product) { return result.type !== 'user_cancelled'; }, }); await view.present(); } catch (error) { // handle the error } ``` :::tip フローの表示方法の詳細については、[ガイド](react-native-present-paywalls)をご覧ください。 ::: ## 3. ボタンアクションの処理 \{#handle-button-actions\} フロー内でユーザーがボタンをクリックすると、React Native SDKは購入、復元、フローのクローズ、URLのオープンを自動的に処理します。 ただし、カスタムまたは事前定義されたIDを持つボタンについては、コード内でアクションを処理する必要があります。また、デフォルトの動作をオーバーライドしたい場合もあります。 たとえば、以下はクローズボタンのデフォルトの動作です。コードに追加する必要はありませんが、必要な場合にどのように実装するかを確認できます。 React コンポーネントでは、`AdaptyFlowView` コンポーネント内で直接アクションを処理します: ```typescript showLineNumbers title="React Native (TSX)" function MyFlow({ flow }) { const onCloseButtonPress = useCallback( () => true, // allow the flow to close [], ); const onCustomAction = useCallback( (actionId) => false, [], ); return ( ); } ``` モーダル表示の場合、`setEventHandlers` を使用してイベントハンドラーを実装します： ```typescript showLineNumbers title="React Native" const unsubscribe = view.setEventHandlers({ onCloseButtonPress() { return true; // allow the flow to close }, }); ``` :::tip ボタンの[アクション](react-native-handle-paywall-actions)と[イベント](react-native-handling-events-1)の処理方法については、ガイドをご覧ください。 ::: ## 次のステップ \{#next-steps\} :::tip ご質問やお困りのことがあれば、[サポートフォーラム](https://adapty.featurebase.app/)をご覧ください。よくある質問への回答を見つけたり、ご自身の質問を投稿することができます。チームとコミュニティがサポートいたします！ ::: これでアプリにペイウォールを表示する準備が整いました。[App Store サンドボックス](test-purchases-in-sandbox)または[Google Play Store](testing-on-android)でテスト購入を行い、ペイウォールからテスト購入を完了できることを確認してください。 次に、適切なユーザーにペイウォールを表示したり有料機能へのアクセスを付与したりするために、[ユーザーのアクセスレベルを確認](react-native-check-subscription-status)する必要があります。 ## 完全な例 \{#full-example\} このガイドのすべてのステップをアプリにまとめて統合する方法を紹介します。 ```javascript showLineNumbers title="React Native (TSX)" export default function FlowScreen() { const [flow, setFlow] = useState(null); const loadFlow = async () => { try { const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID'); setFlow(flowData); } catch (error) { console.warn('Error loading flow:', error); } }; const onCloseButtonPress = useCallback( () => true, [], ); const onPurchaseCompleted = useCallback( (result, product) => result.type !== 'user_cancelled', [], ); useEffect(() => { loadFlow(); }, []); return ( {flow ? ( ) : (