--- title: "ExpoプロジェクトにAdapty React Native SDKをインストール・設定する" description: "サブスクリプションアプリ向けに、ExpoプロジェクトでAdapty React Native SDKをインストールするステップバイステップガイド。" --- :::important このガイドは、**ExpoプロジェクトへのAdapty React Native SDKのインストールと設定**を説明します。 **純粋な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アプリでIAPを実装する方法の完全なチュートリアルが必要な場合は、[こちら](https://adapty.io/blog/react-native-in-app-purchases-tutorial/)をご覧ください。 :::tip Adapty SDKがExpoアプリにどのように統合されているかの実際の例を見たい方は、サンプルアプリをご確認ください： - [Expo dev buildサンプル](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 13.0以降をサポートしていますが、[Adapty ペイウォールビルダー](adapty-paywall-builder)で作成したペイウォールを使用するにはiOS 15.0以降が必要です。 :::info SDK v3.17以降、Adapty SDKはデフォルトでGoogle Play Billing Library v8.0.0を使用します。 ::: --- no_index: true --- import Callout from '../../../components/Callout.astro'; SDKのインストールは、Adaptyセットアップのステップ5です。アプリ内で課金が機能するようにするには、アプリをストアに接続し、Adapty ダッシュボードでプロダクト、ペイウォール、プレースメントを作成する必要があります。[クイックスタートガイド](quickstart)では、必要なすべての手順を説明しています。 ## Adapty SDKをインストールする \{#install-adapty-sdk\} [![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プロジェクトでAdaptyを使用するには、[Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/)（カスタム開発ビルド）が必要です。 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. devサーバーを起動します： ```sh npx expo start --dev-client ``` ## 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"` を置き換えます。 :::important - Adapty の初期化には必ず **Public SDK key** を使用してください。**Secret key** は[サーバーサイド API](getting-started-with-server-side-api) 専用です。 - **SDK keys** はアプリごとに固有です。複数のアプリがある場合は、正しいキーを選択してください。 ::: Adaptyを有効化するために、以下のコードを`App.tsx`にコピーしてください： ```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)をご参照ください。 ::: ## Adapty SDKのAdaptyUIモジュールを有効化する \{#activate-adaptyui-module-of-adapty-sdk\} [ペイウォールビルダー](adapty-paywall-builder)を使用する場合は、AdaptyUIモジュールが必要です。コアモジュールを有効化すると自動的に有効化されるため、追加の設定は不要です。 ## オプション設定 \{#optional-setup\} ### ログ \{#logging\} #### ログシステムを設定する \{#set-up-the-logging-system\} Adaptyはエラーやその他の重要な情報をログに記録し、何が起きているかを把握できるようにします。以下のレベルが使用可能です： | レベル | 説明 | | ---------- | ------------------------------------------------------------ | | `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.idfaCollectionDisabled`（iOS）または`android.adIdCollectionDisabled`（Android）を`true`に設定すると、広告識別子の収集を無効にできます。デフォルト値は`false`です。 このパラメータは、App Store/Play Storeのポリシーへの準拠、アプリトラッキングの透明性プロンプトの回避、または広告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(); // Optional: pass mockConfig to customize mock data // Now you can call methods before activation await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` #### 開発目的でSDKの有効化を遅延させる \{#delay-sdk-activation-for-development-purposes\} AdaptyはSDK有効化時に必要なユーザーデータをすべて事前取得し、最新データへの高速アクセスを可能にします。 ただし、これはiOSシミュレーターで問題になる場合があります。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のFast Refresh機能が開発中に複数回の有効化呼び出しをトリガーするために発生します。これを防ぐには、`__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の最小バージョン**またはデプロイメントターゲットに関するエラーが表示されることがあります。特に、**iOS 15.0以降**が必要な[Adapty ペイウォールビルダー](adapty-paywall-builder)で作成したペイウォールを使用する場合に発生します。 Expoは`expo prebuild`中にiOSプロジェクト（`Podfile`を含む）を生成するため、**`Podfile`を直接編集すべきではありません**。代わりに、`expo-build-properties`設定プラグインを使用してデプロイメントターゲットを設定してください。 1. プラグインをインストールします： ```sh npx expo install expo-build-properties ``` 2. Expo設定（`app.json`または`app.config.js`）を更新してiOSデプロイメントターゲットを設定します： ``` { "expo": { // ...other Expo config... "plugins": [ [ "expo-build-properties", { "ios": { // Use "13.0" for core Adapty features only, // or "15.0" if you use paywalls created in the paywall builder. "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でAndroid Auto Backupを設定する複数のSDK（Adapty、AppsFlyer、expo-secure-storeなど）を使用している場合、マニフェストマージの競合が発生することがあります。 典型的なエラーは次のようになります：`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のバックアップ要件のみを対象としています。 プロジェクト内の他のライブラリがカスタムバックアップルールを定義している場合は、それらを手動で設定する必要があります。 :::