AIアシスタンスを使ってAdaptyをReact Nativeアプリに統合する

このガイドでは、AIコーディングツールを使ってAdaptyをReact Nativeアプリに段階的に統合する手順を説明します。適切なAdaptyのドキュメントを正しい順序でAIに渡していきます。

Adapty SDK 連携スキルは、AI コーディングツールから 1 つのコマンドで連携全体を実行します。 スキルを使う

始める前に:ダッシュボードの設定

AdaptyでSDKのコードを書く前に、ダッシュボードでいくつかの設定が必要です。インタラクティブなLLMスキルを使うか、ダッシュボードから手動で行うかを選べます。

Adapty CLIスキルを使うと、LLMがダッシュボードを開かずに、アプリ・プロダクト・アクセスレベル・ペイウォール・プレースメントを直接設定できます。必要なのは、ダッシュボードでストアを連携することだけです。

npx skills add adaptyteam/adapty-cli --skill adapty-cli

スキルを追加したら、エージェントで /adapty-cli を実行してください。ストアの連携でダッシュボードを開くタイミングも含め、各ステップをガイドしてくれます。

ダッシュボードを使う方法

手動で設定したい場合は、コードを書く前に以下の準備が必要です。LLMはダッシュボードの値を自動で取得できないため、自分で用意する必要があります。

  1. ストアを連携する:Adapty ダッシュボードで App settings → General を開き、両プラットフォームを対象とする場合はApp StoreとGoogle Playの両方を連携してください。課金を機能させるために必須です。 ストアを連携する

  2. Public SDKキーをコピーする:Adapty ダッシュボードで App settings → General を開き、API keys セクションを確認します。コード内では、adapty.activate("YOUR_PUBLIC_SDK_KEY") に渡す文字列です。

  3. プロダクトを1つ以上作成する:Adapty ダッシュボードで Products ページを開いてください。コード内でプロダクトを直接参照することはありません — Adaptはペイウォールを通じてプロダクトを提供します。 プロダクトを追加する

  4. フローまたはペイウォールを作成し、プレースメントに割り当てる: Adapty ダッシュボードでフロー(またはUIを自分でビルドする場合はペイウォール)を作成し、Placements ページでプレースメントに割り当てます。コード内では、プレースメント ID は adapty.getFlow("YOUR_PLACEMENT_ID") に渡す文字列です。 ペイウォールを作成する

  5. アクセスレベルを設定する:Adapty ダッシュボードで Products ページの各プロダクトに設定します。コード内では profile.accessLevels['premium']?.isActive で確認する文字列です。デフォルトの premium アクセスレベルはほとんどのアプリで問題ありません。プロダクトによって異なる機能(例:basic プランと pro プラン)をユーザーに提供する場合は、コーディングを始める前に追加のアクセスレベルを作成してください。

Tip

5つの準備が整ったら、コードを書き始められます。「Public SDKキーはXで、プレースメントIDはY」とLLMに伝えると、正しい初期化コードとペイウォール取得コードを生成してもらえます。

準備ができたら設定する

コーディングを始めるのに必須ではありませんが、統合が成熟するにつれて必要になります:

  • A/B テスト: Placements ページで設定します。コードの変更は不要です。 A/B テスト
  • 追加のフローとプレースメント: 異なるプレースメント ID を持つ getFlow 呼び出しを追加します。
  • アナリティクス統合: Integrations ページで設定します。設定方法は統合によって異なります。アナリティクス統合アトリビューション統合を参照してください。

LLMにAdaptyのドキュメントを渡す

Context7は、LLMが最新のAdaptyドキュメントに直接アクセスできるMCPサーバーです。質問内容に応じて適切なドキュメントを自動で取得するため、URLを手動で貼り付ける必要がありません。

Context7はCursorClaude CodeWindsurf、その他のMCP対応ツールで動作します。セットアップするには以下を実行してください:

npx ctx7 setup

エディタを自動検出してContext7サーバーを設定します。手動セットアップの方法はContext7のGitHubリポジトリを参照してください。

設定が完了したら、プロンプト内でAdaptyライブラリを参照します:

Use the adaptyteam/adapty-docs library to look up how to install the React Native SDK
Warning

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に伝えてください — これによって参照すべきガイドが変わります:

どれを選べばよいか迷っていますか?クイックスタートの比較表をご覧ください。

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
Tip

チェックポイント

  • 確認事項: アプリが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
Tip

チェックポイント

  • 確認事項: サンドボックス購入後、profile.accessLevels['premium']?.isActivetrue を返すこと。
  • 注意点: 購入後に accessLevels が空の場合 → ダッシュボードでプロダクトにアクセスレベルが割り当てられているかを確認してください。

ユーザーを識別する

アプリのユーザーアカウントをAdaptyのプロファイルに紐づけて、複数のデバイスをまたいで購入を継続させます。

Important

アプリに認証機能がない場合は、このステップをスキップしてください。

ガイド: ユーザーを識別する

LLMに送るプロンプト:

Read these Adapty docs before writing code:
- https://adapty.io/docs/ja/react-native-quickstart-identify.md
Tip

チェックポイント

  • 確認事項: adapty.identify("your-user-id") を呼び出した後、ダッシュボードの Profiles セクションにカスタムユーザーIDが表示されること。
  • 注意点: 匿名プロファイルのアトリビューションを避けるため、アクティベーション後、ペイウォールの取得前に identify を呼び出してください。

リリース準備をする

サンドボックスでの統合が正常に動作したら、リリースチェックリストを確認して本番環境の準備が整っているか確認してください。

ガイド: リリースチェックリスト

LLMに送るプロンプト:

Read these Adapty docs before releasing:
- https://adapty.io/docs/ja/release-checklist.md
Tip

チェックポイント

  • 確認事項: チェックリストの全項目が確認済みであること:ストアの連携、サーバー通知、購入フロー、アクセスレベルの確認、プライバシー要件。
  • 注意点: サーバー通知が設定されていない場合 → 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.txtreact-native-llms-full.txt:サイト全体と比べてトークン数を節約できるプラットフォーム別のサブセットです。