RevenueCat セットアップ手順

この記事では、React Native（Expo）アプリでRevenueCatを使用したサブスクリプション管理のセットアップ手順を説明します。

目次

1. 概要
2. 前提条件
3. RevenueCat Dashboardでの設定
4. コード側の実装状況
5. ビルドと動作確認
6. トラブルシューティング
7. 次のステップ

概要

RevenueCatは、iOS/Androidのアプリ内課金を管理するためのプラットフォームです。以下の機能を提供します：

• サブスクリプション管理（月額・年額など）
• クロスプラットフォーム対応（iOS/Android）
• 購入・復元機能
• サブスクリプション状態の管理

前提条件

• RevenueCatアカウントの作成（https://app.revenuecat.com）
• App Store Connectアカウント（iOSの場合）
• Google Play Consoleアカウント（Androidの場合）
• React Native（Expo）プロジェクト
• react-native-purchasesパッケージのインストール

RevenueCat Dashboardでの設定

1. API Keyの取得

1. RevenueCat Dashboardにログイン
2. 左サイドバーから「Apps & providers」> 「API keys」を選択
3. 「SDK API keys」セクションで、iOS用とAndroid用のPublic API Keyを確認
4. .envファイルに設定：

EXPO_PUBLIC_REVENUECAT_IOS_API_KEY=your_ios_api_key_here
EXPO_PUBLIC_REVENUECAT_ANDROID_API_KEY=your_android_api_key_here

注意: テスト環境ではtest_で始まるAPI Keyが表示されます。本番環境では、test_が付いていない本番用のAPI Keyを使用してください。

2. Entitlements（権利）の設定

Entitlementは、ユーザーが購入したサブスクリプションで得られる権利を定義します。

1. RevenueCat Dashboardの左サイドバーから「Product catalog」をクリック
2. 「Entitlements」タブを選択
3. 「+ New」をクリック
4. 以下の設定を入力：
   • Identifier: 例 pro、premium、subscriptionなど（重要: コードで使用するIDと一致させる）
   • Display Name: 任意の表示名
5. 「Save」をクリック

重要: Identifierは、コード内で使用するIDと一致させる必要があります。例：customerInfo.entitlements.active['pro']を使用する場合は、Identifierをproに設定します。

3. Products（商品）の設定

3.1 App Store Connectでの準備（iOS）

1. App Store Connectにログイン
2. アプリを選択
3. 「サブスクリプション」セクションに移動
4. 「サブスクリプショングループ」を作成（例：「アプリ名 Pro」）
5. 「サブスクリプション」を作成：
   • 商品ID: 例 com.yourcompany.appname.pro.monthly
   • 価格: 希望する価格を設定
   • 期間: 1ヶ月、3ヶ月、6ヶ月、1年など
6. 必要に応じて複数のプラン（月額、年額など）を作成

3.2 RevenueCatで商品を登録

1. RevenueCat Dashboard > 「Product catalog」> 「Products」タブ
2. 「+ New」をクリック
3. 「Add from Store」を選択
4. App Store Connectで作成した商品を選択
5. 「Entitlements」で先ほど作成したproを選択
6. 「Save」をクリック

4. Offerings（オファリング）の設定

Offeringは、ユーザーに表示するサブスクリプションプランのグループです。

1. RevenueCat Dashboardの左サイドバーから「Paywalls」をクリック
2. 「Offerings」タブを選択
3. 「+ New Offering」をクリック
4. 以下の設定を入力：
   • Identifier: default（または任意のID）
   • Display Name: Default Offering（任意）
5. 「Packages」セクションで「+ Add Package」をクリック
6. 先ほど作成したProductを選択
7. 「Save」をクリック

重要: OfferingのIdentifierはdefaultが推奨されます。コード内でofferings.currentを使用しているためです。

コード側の実装

必要な実装

RevenueCatを使用するには、以下の機能を実装する必要があります：

1. RevenueCat初期化

   • ユーザーIDでの初期化
   • ネイティブモジュールの安全なチェック
   • API Keyの設定

2. サブスクリプション状態の管理

   • RevenueCatの購入状態を取得
   • バックエンド（Supabase、Firebaseなど）との同期
   • ユーザーのサブスクリプション状態を保存

3. サブスクリプション画面

   • オファリングの表示
   • 購入処理
   • 購入の復元

4. ナビゲーション統合

   • サブスクリプション画面への遷移

実装例

RevenueCat SDKのラッパー関数

// lib/revenuecat.ts
import { Platform } from 'react-native';

const REVENUECAT_API_KEY = {
  ios: process.env.EXPO_PUBLIC_REVENUECAT_IOS_API_KEY || 'your_ios_api_key',
  android: process.env.EXPO_PUBLIC_REVENUECAT_ANDROID_API_KEY || 'your_android_api_key',
};

export const initializeRevenueCat = async (userId: string): Promise<void> => {
  // 初期化処理
};

export const getOfferings = async (): Promise<any | null> => {
  // オファリング取得処理
};

export const purchasePackage = async (packageToPurchase: any) => {
  // 購入処理
};

サブスクリプション状態のチェック

// ユーザーがProプランを持っているかチェック
const checkProStatus = async (): Promise<boolean> => {
  const customerInfo = await getCustomerInfo();
  if (!customerInfo) return false;
  
  // Entitlement IDを確認（例: 'pro'）
  return customerInfo.entitlements.active['pro'] !== undefined;
};

コード内で使用するID

• Entitlement ID: RevenueCat Dashboardで設定したIdentifier（例：'pro'）
• Offering ID: default（offerings.currentを使用）または任意のID

ビルドと動作確認

カスタム開発ビルドの作成

react-native-purchasesはネイティブモジュールのため、カスタム開発ビルドが必要です。Expo Goでは動作しません。

iOS

npx expo run:ios

Android

npx expo run:android

動作確認手順

1. アプリを起動
2. サインイン（必要な場合）
3. サブスクリプション画面に遷移
4. サブスクリプションプランが表示されることを確認
5. 購入フローをテスト（Sandbox環境）

注意: 実際の購入をテストするには、Sandbox環境のテストアカウントが必要です。

トラブルシューティング

エラー: NativeEventEmitter requires a non-null argument

原因: Expo Goで実行している、またはネイティブモジュールが正しくリンクされていない

解決策:

1. カスタム開発ビルドを作成: npx expo run:ios または npx expo run:android
2. アプリを再起動

エラー: PluginError: Unable to resolve a valid config plugin for react-native-purchases

原因: app.jsonにreact-native-purchasesプラグインが設定されている

解決策:
app.jsonのplugins配列から"react-native-purchases"を削除してください。react-native-purchasesはExpoのconfig pluginを提供していないため、CocoaPodsが自動的にリンクします。

警告: RevenueCat native module is not available

原因: ネイティブモジュールが利用できない環境で実行している

解決策:

• カスタム開発ビルドを使用していることを確認
• npx expo run:iosまたはnpx expo run:androidで再ビルド

サブスクリプションプランが表示されない

原因: Offeringが正しく設定されていない、またはAPI Keyが間違っている

解決策:

1. RevenueCat DashboardでOfferingが作成されているか確認
2. OfferingにPackageが追加されているか確認
3. .envファイルのAPI Keyが正しいか確認
4. アプリを再起動

購入が完了しない

原因: Sandbox環境のテストアカウントが設定されていない、または商品が正しく設定されていない

解決策:

1. App Store ConnectでSandbox環境のテストアカウントを作成
2. デバイスでSandbox環境のテストアカウントでサインイン
3. RevenueCat Dashboardで商品が正しく設定されているか確認

次のステップ

1. App Store Connectでの設定完了

• サブスクリプショングループの作成
• サブスクリプション商品の作成
• 価格設定

2. RevenueCat Dashboardでの設定完了

• Entitlement proの作成
• Productの登録（App Store Connectから）
• Offering defaultの作成
• Packageの追加

3. テスト

• Sandbox環境での購入テスト
• 購入の復元テスト
• Supabaseとの同期確認

4. 本番環境への移行

• 本番用API Keyの取得
• .envファイルの更新
• App Store Connectでの本番商品の設定
• RevenueCat Dashboardでの本番商品の登録

参考リンク

• RevenueCat公式ドキュメント
• react-native-purchases GitHub
• Expo Config Plugins

注意事項

• Sandbox環境: 開発中は「Sandbox data」トグルをONにしてテストします
• API Key: テスト用と本番用で異なるAPI Keyを使用します
• Entitlement ID: コード内で使用している'pro'と一致させる必要があります
• カスタム開発ビルド: react-native-purchasesを使用するには、必ずカスタム開発ビルドが必要です

📲 僕の作ったアプリ（宣伝）

Tanao – 家計簿いらずの資産トラッカーアプリ - App Store
https://apps.apple.com/jp/app/tanao-%E5%AE%B6%E8%A8%88%E7%B0%BF%E3%81%84%E3%82%89%E3%81%9A%E3%81%AE%E8%B3%87%E7%94%A3%E3%83%88%E3%83%A9%E3%83%83%E3%82%AB%E3%83%BC/id6753191685