claude-skills/

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

last sync 22h ago
スキルOfficialdevelopment

💳revenuecat-paywall

プラグイン
revenuecat
ソース
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 と entitlement の違い。 ユーザーは Offering 内のパッケージを通じて商品を購入します。 アクセス権は entitlement（通常 "premium" または "pro"）によって付与されます。 プレミアム機能のアクセス制御は、Offering ではなく entitlement に基づいて行ってください。

  • 3 つの表示パターン:

    • (a) 初回起動時モーダル: entitlement を持たないユーザー向け。 entitlement をチェックし、未取得の場合のみペイウォールを表示する "present if needed" ヘルパーによって制御するのが一般的。
    • (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 / キャンセルコールバックが 発火すること。

テンプレートではなくデフォルトのフォールバックレイアウトが表示される場合、 該当の 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 による自動翻訳です。