---
title: "Capacitor SDKでリモートコンフィグによるペイウォールをレンダリングする"
description: "Adapty Capacitor SDKでリモートコンフィグペイウォールを表示し、ユーザー体験をパーソナライズする方法を解説します。"
---

リモートコンフィグを使ってペイウォールをカスタマイズした場合、ユーザーに表示するためのレンダリングをアプリのコードに実装する必要があります。リモートコンフィグはニーズに合わせた柔軟な設定が可能なため、ペイウォールの内容と見た目はすべて自分でコントロールできます。リモート設定を取得するメソッドを用意しているので、リモートコンフィグで設定したカスタムペイウォールを自由に表示できます。

## ペイウォールのリモートコンフィグを取得して表示する \{#get-paywall-remote-config-and-present-it\}

ペイウォールのリモートコンフィグを取得するには、`remoteConfig` プロパティにアクセスして必要な値を抽出します。

```typescript showLineNumbers

try {
  const paywall = await adapty.getPaywall({ 
    placementId: 'YOUR_PLACEMENT_ID',
    params: {
      fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
      loadTimeoutMs: 5000 // 5 second timeout
    }
  });
  const headerText = paywall.remoteConfig?.data?.['header_text'];
} catch (error) {
  console.error('Failed to fetch paywall:', error);
}
```

必要な値をすべて取得したら、それらをまとめて見栄えのよいページとしてレンダリングします。さまざまな画面サイズや向きに対応したデザインにすることで、どのデバイスでも快適に使えるユーザー体験を提供しましょう。

:::warning
Adapty アナリティクスがファネルや A/B テストの情報を正しく収集できるよう、必ず以下の手順で[ペイウォール表示イベントを記録](present-remote-config-paywalls-capacitor#track-paywall-view-events)してください。
:::

ペイウォールの表示が完了したら、購入フローの設定に進みます。ユーザーが購入する際は、ペイウォールのプロダクトを使って `.makePurchase()` を呼び出すだけです。`.makePurchase()` メソッドの詳細は[購入の実行](capacitor-making-purchases)をご覧ください。

インターネット接続がない場合やキャッシュが利用できない場合でもスムーズな体験を提供できるよう、[フォールバックペイウォールの作成](capacitor-use-fallback-paywalls)をおすすめします。

## ペイウォール表示イベントを記録する \{#track-paywall-view-events\}

Adapty はペイウォールのパフォーマンス測定をサポートしています。購入データは自動的に収集されますが、ペイウォールの表示ログはユーザーがいつペイウォールを見たかを把握しているのは開発者だけなので、手動で記録する必要があります。

ペイウォール表示イベントをログに記録するには、`.logShowPaywall(paywall)` を呼び出すだけです。ファネルや A/B テストのペイウォール指標に反映されます。

:::important
[ペイウォールビルダー](adapty-paywall-builder)で作成したペイウォールを表示している場合は、`.logShowPaywall(paywall)` を呼び出す必要はありません。
:::

```typescript showLineNumbers

try {
  await adapty.logShowPaywall({ paywall });
} catch (error) {
  console.error('Failed to log paywall view:', error);
}
```

リクエストパラメーター:

| パラメーター | 必須 | 説明 |
| :---------- | :------- | :--------------------------------------------------------- |
| **paywall** | 必須 | [`AdaptyPaywall`](https://capacitor.adapty.io/interfaces/adaptypaywall) オブジェクト。 |