claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

💳revenuecat-paywall

プラグイン
rc
ソース
GitHub で見る ↗

説明

RevenueCatUI SDK を使用して、アプリ内に RevenueCat のペイウォールを表示します。 次のような場合に使用: - ペイウォールを追加したい - RevenueCat のペイウォールを表示したい - `PaywallView` を表示したい - RevenueCatUI を統合したい - プレミアム画面をペイウォールで制限したい - `PaywallActivity` を起動したい - `presentPaywall` または `presentPaywallIfNeeded` を呼び出したい - iOS、Android、Kotlin Multiplatform、Flutter、または React Native で、ダッシュボードに設定されたペイウォール UI を表示したい

原文を表示

Display a RevenueCat paywall inside an app using the RevenueCatUI SDK. Use when the user asks to add a paywall, show a RevenueCat paywall, present PaywallView, integrate RevenueCatUI, gate a premium screen with a paywall, launch PaywallActivity, call presentPaywall or presentPaywallIfNeeded, or show the dashboard configured paywall UI on iOS, Android, Kotlin Multiplatform, Flutter, or React Native.

ユースケース

  • ✓ペイウォールをアプリ内に表示したい
  • ✓プレミアム機能へのアクセスを制限したい
  • ✓RevenueCatのUI機能を統合したい
  • ✓ダッシュボード設定のペイウォールを使いたい

本文（日本語訳）

revenuecat-paywall: RevenueCat ペイウォールの表示

次のような場合に使用: ユーザーが RevenueCat ダッシュボードで構築・設定されたペイウォールを、ネイティブの RevenueCatUI コンポーネントを使って表示したい場合。 このスキルはカスタムペイウォールをゼロから構築することはカバーしていません。 その場合は revenuecat-purchase-flow（利用可能な場合）と Purchases.getOfferings(…) を直接使用してください。

前提条件: integrate-revenuecat が既に実行済みであること。 ペイウォールをロードする前に Purchases.configure(…) が正常に完了している必要があります。

1. プラットフォームの検出

作業ディレクトリを確認し、上から順に最初に一致したものを選択してください:

  1. React Native: package.json に react-native-purchases のエントリがあるか、react-native が依存関係に含まれている。ペイウォールパッケージは react-native-purchases-ui。platforms/react-native.md を参照。expo も依存関係にある場合は、Expo プロジェクトとして記録してください。
  2. Flutter: プロジェクトルートに pubspec.yaml が存在する。ペイウォールパッケージは purchases_ui_flutter。platforms/flutter.md を参照。
  3. Kotlin Multiplatform: build.gradle.kts に kotlin { … } マルチプラットフォームソースセットブロックが含まれているか、com.revenuecat.purchases:purchases-kmp* に依存している。ペイウォールモジュールは purchases-kmp-ui。platforms/kmp.md を参照。
  4. Android（ネイティブ）: build.gradle(.kts) が com.android.application を適用している（かつ KMP ではない）。ペイウォールの依存関係は com.revenuecat.purchases:purchases-ui。platforms/android.md を参照。
  5. iOS（ネイティブ）: プロジェクトルートに Package.swift、*.xcodeproj、*.xcworkspace、または Podfile が存在する。ペイウォールのプロダクトは RevenueCatUI。platforms/ios.md を参照。

複数が一致する場合（例: Flutter プロジェクト内の ios/ フォルダ）は、ビルドを管理している最も外側のプロジェクトを選択してください。 それでも判断できない場合は、どのプラットフォームを設定するかユーザーに確認してください。

2. 共通の概念（全プラットフォーム共通）

  • ペイウォールを表示するには、RevenueCat ダッシュボードでペイウォールが紐づけられた Offering が必要です。 SDK は getOfferings() を通じて Offering を取得します。 ペイウォールが設定されていない Offering しか存在しない場合、RevenueCatUI はデフォルトのペイウォールレイアウトにフォールバックしますが、これは本番環境では望ましくありません。

  • Offering とエンタイトルメントの違い。 ユーザーは Offering 内のパッケージを通じてプロダクトを購入します。 アクセス権はエンタイトルメント（通常は "premium" または "pro"）によって付与されます。 プレミアム機能のゲートはエンタイトルメントに基づいて行い、Offering には基づかないでください。

  • 3 つの表示パターン:

    • (a) 初回起動時のモーダル表示: エンタイトルメントを持っていないユーザーに対して表示。エンタイトルメントの有無を確認し、未取得の場合のみペイウォールを表示する「必要に応じて表示」ヘルパーによって制御するのが一般的。
    • (b) プレミアム画面のゲート処理: ユーザーがプレミアム機能をタップした際、画面がロードされる前にペイウォールを開く。
    • (c) CTA タップ時の条件付き表示: 設定画面の「アップグレード」ボタンなど。

  • RevenueCatUI が購入フローを管理します。 RevenueCatUI のペイウォールと並行して Purchases.purchase(…) を手動で呼び出さないでください。 ペイウォールが内部で呼び出します。 アプリコード側では、dismissコールバックまたは購入完了コールバックを待ち受けて処理を行ってください。

  • 閉じるボタンはほとんどのプラットフォームでオプトイン方式です。 ペイウォールをモーダルで表示し、ユーザーが閉じられるようにする場合は、 displayCloseButton = true（iOS / Flutter / RN）または setShouldDisplayDismissButton(true)（Android / KMP）を渡してください。 シートのグラバーが別途ある場合や、ナビゲーションコントローラーでペイウォールをラップしている場合は省略してください。

  • アプリが完全なカスタム UI を必要とする場合は、このスキルを使用しないでください。 Purchases.getOfferings() を呼び出し、独自のコンポーネントをレンダリングしてください。 RevenueCatUI はダッシュボードのテンプレートを使用したペイウォール専用です。

3. 実装

検出結果に対応するプラットフォームファイルを参照してください:

  • platforms/ios.md
  • platforms/android.md
  • platforms/kmp.md
  • platforms/flutter.md
  • platforms/react-native.md

各プラットフォームファイルは自己完結しています: インストールコマンド、ペイウォールを表示するための正確なスニペット、および待ち受けるコールバックの形式が記載されています。

4. 検証

以下がすべて確認できるまで、インテグレーションが完了したと宣言しないでください:

  1. プロジェクトがターゲットプラットフォームでビルドできること。
  2. アプリが起動し、ペイウォールを表示するコードパスが実行され、ダッシュボードで設定したテンプレートでペイウォール UI がレンダリングされること（デフォルトのフォールバックレイアウトではないこと）。
  3. パッケージをタップしてサンドボックス購入を完了すると、ペイウォールが閉じられ、購入完了コールバックが発火すること（または命令型 API の場合は PURCHASED 結果で解決されること）。
  4. 購入せずにペイウォールを閉じると、dismiss / cancelled コールバックが発火すること。

テンプレートではなくデフォルトのフォールバックレイアウトが表示された場合、その Offering にはダッシュボードでペイウォールが紐づけられていません。 ダッシュボードで修正してから再試行してください。

原文（English）を表示

revenuecat-paywall: display a RevenueCat paywall

Use this skill when the user wants to show a paywall that is built and configured in the RevenueCat dashboard, using the native RevenueCatUI components. This skill does not cover building a custom paywall from scratch. For that, use revenuecat-purchase-flow (when available) and Purchases.getOfferings(…) directly.

Prerequisite: integrate-revenuecat has already run. Purchases.configure(…) must succeed before a paywall can load.

1. Detect the platform

Inspect the working directory and pick the first match, from top to bottom:

  1. React Native: package.json has a react-native-purchases entry, or react-native as a dependency. react-native-purchases-ui is the paywall package. Read platforms/react-native.md. If expo is also a dependency, note it as an Expo project.
  2. Flutter: pubspec.yaml exists at the project root. The paywall package is purchases_ui_flutter. Read platforms/flutter.md.
  3. Kotlin Multiplatform: build.gradle.kts contains a kotlin { … } multiplatform source sets block, or depends on com.revenuecat.purchases:purchases-kmp*. The paywall module is purchases-kmp-ui. Read platforms/kmp.md.
  4. Android (native): build.gradle(.kts) applies com.android.application (and is not KMP). The paywall dependency is com.revenuecat.purchases:purchases-ui. Read platforms/android.md.
  5. iOS (native): Package.swift, *.xcodeproj, *.xcworkspace, or Podfile at the project root. The paywall product is RevenueCatUI. Read platforms/ios.md.

If several match (e.g. an ios/ folder inside a Flutter project), pick the outermost project, the one that owns the build. If still ambiguous, ask the user which platform they want to configure.

2. Shared concepts (all platforms)

  • Paywalls require an Offering with a paywall attached in the RevenueCat dashboard. The SDK pulls offerings via getOfferings(). If no offering has a paywall configured, RevenueCatUI falls back to a default paywall layout, which is not what you want in production.
  • Offering vs. entitlement. Users purchase a product through a package in an offering. Access is granted via an entitlement (typically "premium" or "pro"). Gate premium features on the entitlement, not on the offering.
  • Three presentation patterns:
    • (a) First launch modal for users without the entitlement, typically driven by a "present if needed" helper that checks the entitlement and only shows the paywall when missing.
    • (b) Gated premium screen. The user taps a premium feature and the paywall opens before the screen loads.
    • (c) Conditional present on a CTA tap, such as an "Upgrade" button in settings.
  • RevenueCatUI owns the purchase flow. Do not call Purchases.purchase(…) manually alongside a RevenueCatUI paywall. The paywall calls it internally. Listen for the dismiss or purchase completed callback to react in app code.
  • Close button is opt in on most platforms. Pass displayCloseButton = true (iOS / Flutter / RN) or setShouldDisplayDismissButton(true) (Android / KMP) when the paywall is presented modally and the user needs a way out. Skip it when presenting behind a sheet with its own grabber, or when wrapping the paywall in a navigation controller.
  • If the app needs a fully custom UI, do not use this skill. Call Purchases.getOfferings() and render your own components. RevenueCatUI is only for dashboard templated paywalls.

3. Implementation

Read the platform file that matches detection:

  • platforms/ios.md
  • platforms/android.md
  • platforms/kmp.md
  • platforms/flutter.md
  • platforms/react-native.md

Each platform file is self contained: install command, exact snippet to present the paywall, and the callback shape you listen to.

4. Verify

Do not claim the integration is complete until:

  1. The project builds on the target platform.
  2. The app launches, the code path that presents the paywall runs, and the paywall UI renders with the template configured in the dashboard (not the default fallback layout).
  3. Tapping a package and completing a sandbox purchase dismisses the paywall and fires the purchase completed callback (or, for imperative APIs, resolves with a PURCHASED result).
  4. Closing the paywall without purchasing fires the dismiss / cancelled callback.

If the paywall shows the default fallback layout instead of your template, the offering does not have a paywall attached in the dashboard. Fix this in the dashboard, then retry.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。