AIアシスタントを使ってAdaptyをReact Nativeアプリに統合する
このガイドでは、AIコーディングツールを使いながら、AdaptyをReact Nativeアプリに順を追って統合していきます。必要なAdaptyのドキュメントを正しい順番でAIに渡してください。
始める前に:ダッシュボードの設定
AdaptyでSDKのコードを書く前に、ダッシュボードでいくつかの設定が必要です。インタラクティブなLLMスキルを使うか、ダッシュボードから手動で行うかを選べます。
スキルを使う方法(推奨)
Adapty CLIスキルを使うと、LLMがダッシュボードを開かずに、アプリ・プロダクト・アクセスレベル・ペイウォール・プレースメントを直接設定できます。必要なのは、ダッシュボードでストアを連携することだけです。
npx skills add adaptyteam/adapty-cli --skill adapty-cli
スキルを追加したら、エージェントで /adapty-cli を実行してください。ストアの連携でダッシュボードを開くタイミングも含め、各ステップをガイドしてくれます。
ダッシュボードを使う方法
手動で設定したい場合は、コードを書く前に以下の準備が必要です。LLMはダッシュボードの値を自動で取得できないため、自分で用意する必要があります。
-
ストアを連携する:Adapty ダッシュボードで App settings → General を開き、両プラットフォームを対象とする場合はApp StoreとGoogle Playの両方を連携してください。課金を機能させるために必須です。 ストアを連携する
-
Public SDKキーをコピーする:Adapty ダッシュボードで App settings → General を開き、API keys セクションを確認します。コード内では、
adapty.activate("YOUR_PUBLIC_SDK_KEY")に渡す文字列です。 -
プロダクトを1つ以上作成する:Adapty ダッシュボードで Products ページを開いてください。コード内でプロダクトを直接参照することはありません — Adaptはペイウォールを通じてプロダクトを提供します。 プロダクトを追加する
-
ペイウォールとプレースメントを作成する:Adapty ダッシュボードで Paywalls ページにペイウォールを作成し、Placements ページでプレースメントに割り当ててください。コード内では、
adapty.getPaywall("YOUR_PLACEMENT_ID")に渡すプレースメントIDを使います。 ペイウォールを作成する -
アクセスレベルを設定する:Adapty ダッシュボードで Products ページの各プロダクトに設定します。コード内では
profile.accessLevels['premium']?.isActiveで確認する文字列です。デフォルトのpremiumアクセスレベルはほとんどのアプリで問題ありません。プロダクトによって異なる機能(例:basicプランとproプラン)をユーザーに提供する場合は、コーディングを始める前に追加のアクセスレベルを作成してください。
5つの準備が整ったら、コードを書き始められます。「Public SDKキーはXで、プレースメントIDはY」とLLMに伝えると、正しい初期化コードとペイウォール取得コードを生成してもらえます。
準備ができたら設定するもの
コーディングを始める前に必須ではありませんが、統合が進むにつれて必要になります:
- A/B テスト:Placements ページで設定します。コードの変更は不要です。 A/B テスト
- 追加のペイウォールとプレースメント:異なるプレースメントIDで
getPaywallの呼び出しを追加します。 - アナリティクス連携:Integrations ページで設定します。設定方法は連携先によって異なります。アナリティクス連携とアトリビューション連携を参照してください。
LLMにAdaptyのドキュメントを渡す
Context7を使う方法(推奨)
Context7は、LLMが最新のAdaptyドキュメントに直接アクセスできるMCPサーバーです。質問内容に応じて適切なドキュメントを自動で取得するため、URLを手動で貼り付ける必要がありません。
Context7はCursor、Claude Code、Windsurf、その他のMCP対応ツールで動作します。セットアップするには以下を実行してください:
npx ctx7 setup
エディタを自動検出してContext7サーバーを設定します。手動セットアップの方法はContext7のGitHubリポジトリを参照してください。
設定が完了したら、プロンプト内でAdaptyライブラリを参照します:
Use the adaptyteam/adapty-docs library to look up how to install the React Native SDK
Context7を使えばドキュメントのURLを手動で貼り付ける必要はなくなりますが、実装の順序は重要です。すべてが正しく動作するよう、以下の実装ウォークスルーをステップごとに進めてください。
プレーンテキストのドキュメントを使う方法
AdaptyのドキュメントはプレーンテキストのMarkdownとして取得できます。URLの末尾に .md を追加するか、記事タイトルの下にある Copy for LLM をクリックしてください。例:adapty-cursor-react-native.md
以下の実装ウォークスルーの各ステップには、貼り付け用の .md リンクが入った「LLMに送るプロンプト」ブロックが含まれています。
より多くのドキュメントを一度に渡したい場合は、以下のインデックスファイルとプラットフォーム別サブセットを参照してください。
実装ウォークスルー
ここからは、Adaptyの統合を実装順に進めていきます。各ステップには、LLMに渡すドキュメント、完了時の確認事項、よくある問題が記載されています。
統合の計画を立てる
コードを書く前に、LLMにプロジェクトを分析させて実装計画を作成させてください。AIツールがプランニングモード(CursorやClaude Codeのプランモードなど)をサポートしている場合は、コードを書く前にLLMがプロジェクト構成とAdaptyのドキュメントの両方を読めるよう、そのモードを使用してください。
購入の処理方法をLLMに伝えてください — これによって参照すべきガイドが変わります:
- Adapty ペイウォールビルダー:Adaptyのノーコードビルダーでペイウォールを作成し、SDKが自動でレンダリングします。
- 手動で作成したペイウォール:コードで独自のペイウォールUIを構築しつつ、プロダクトの取得と購入処理にAdaptyを使います。
- オブザーバーモード:既存の購入インフラをそのまま使い、Adaptyはアナリティクスと連携にのみ使用します。
どれを選ぶか迷ったら、クイックスタートの比較表を参照してください。
SDKのインストールと設定
npm(またはyarn)でAdapty SDKの依存関係を追加し、Public SDKキーで有効化します。これが基盤となるため、ここが機能しないと他のすべてが動作しません。
ExpoとベアのReact Nativeプロジェクトでは別々のインストールガイドがあります — 自分のセットアップに合ったものを選んでください。
ガイド:
LLMに送るプロンプト(セットアップに合ったものを選ぶか、両方送ってください):
Read these Adapty docs before writing code:
- https://adapty.io/docs/ja/sdk-installation-react-native-expo.md
- https://adapty.io/docs/ja/sdk-installation-react-native-pure.md
チェックポイント
- 確認事項: アプリがiOSとAndroidの両方でビルドおよび実行できること。Metroバンドラーのログにアクティベーションログが表示されること。
- 注意点: 「Public API key is missing」が表示される場合 → プレースホルダーをApp settingsの実際のキーに置き換えたか確認してください。
ペイウォールの表示と購入処理
プレースメントIDでペイウォールを取得し、表示して、購入イベントを処理します。必要なガイドは購入の処理方法によって異なります。
進めながらサンドボックスで各購入をテストしてください — 最後まで待たずに行うことをお勧めします。設定方法はサンドボックスで購入をテストするを参照してください。
サブスクリプション状態を確認する
購入後、ユーザープロファイルのアクセスレベルがアクティブかどうかを確認してプレミアムコンテンツの表示を制限します。
ガイド: サブスクリプション状態を確認する
LLMに送るプロンプト:
Read these Adapty docs before writing code:
- https://adapty.io/docs/ja/react-native-check-subscription-status.md
チェックポイント
- 確認事項: サンドボックス購入後、
profile.accessLevels['premium']?.isActiveがtrueを返すこと。 - 注意点: 購入後に
accessLevelsが空の場合 → ダッシュボードでプロダクトにアクセスレベルが割り当てられているかを確認してください。
ユーザーを識別する
アプリのユーザーアカウントをAdaptyのプロファイルに紐づけて、複数のデバイスをまたいで購入を継続させます。
アプリに認証機能がない場合は、このステップをスキップしてください。
ガイド: ユーザーを識別する
LLMに送るプロンプト:
Read these Adapty docs before writing code:
- https://adapty.io/docs/ja/react-native-quickstart-identify.md
チェックポイント
- 確認事項:
adapty.identify("your-user-id")を呼び出した後、ダッシュボードの Profiles セクションにカスタムユーザーIDが表示されること。 - 注意点: 匿名プロファイルのアトリビューションを避けるため、アクティベーション後、ペイウォールの取得前に
identifyを呼び出してください。
リリース準備をする
サンドボックスでの統合が正常に動作したら、リリースチェックリストを確認して本番環境の準備が整っているか確認してください。
ガイド: リリースチェックリスト
LLMに送るプロンプト:
Read these Adapty docs before releasing:
- https://adapty.io/docs/ja/release-checklist.md
チェックポイント
- 確認事項: チェックリストの全項目が確認済みであること:ストアの連携、サーバー通知、購入フロー、アクセスレベルの確認、プライバシー要件。
- 注意点: サーバー通知が設定されていない場合 → App settings → iOS SDK でApp Store サーバー通知を設定し、App settings → Android SDK でGoogle Play リアルタイム デベロッパー通知を設定してください。
プレーンテキストのドキュメントインデックスファイル
個別ページを超えた広いコンテキストをLLMに提供したい場合、Adaptyの全ドキュメントをリスト化・統合したインデックスファイルを用意しています:
llms.txt:.mdリンク付きで全ページをリスト化。LLMがウェブサイトにアクセスしやすくするための新しいスタンダードです。一部のAIエージェント(例:ChatGPT)では、llms.txtをダウンロードしてチャットにファイルとしてアップロードする必要があります。llms-full.txt:Adaptyの全ドキュメントを1つのファイルにまとめたもの。非常に大きいファイルのため、全体像が必要な場合にのみ使用してください。- React Native専用の
react-native-llms.txtとreact-native-llms-full.txt:サイト全体と比べてトークン数を節約できるプラットフォーム別のサブセットです。