Adapty ダッシュボードの新しいペイウォールビルダーでペイウォールのビジュアルデザインを作成したら、モバイルアプリに表示できます。最初のステップは、プレースメントに関連付けられたペイウォールとそのビュー設定を取得することです。詳細は以下をご覧ください。

このトピックはペイウォールビルダーでカスタマイズしたペイウォールに関するものです。ペイウォールを手動で実装する場合は、モバイルアプリのリモートコンフィグペイウォール向けにペイウォールとプロダクトを取得するをご参照ください。

モバイルアプリでペイウォールを表示する前に（クリックして展開）

1. Adapty ダッシュボードでプロダクトを作成します。
2. Adapty ダッシュボードでペイウォールを作成し、プロダクトを追加します。
3. Adapty ダッシュボードでプレースメントを作成し、ペイウォールを追加します。
4. モバイルアプリに Adapty SDK をインストールします。

ペイウォールビルダーで作成したペイウォールを取得する

ペイウォールビルダーでペイウォールをデザインした場合、ユーザーへの表示のためにモバイルアプリのコードでレンダリング処理を実装する必要はありません。このようなペイウォールにはペイウォール内に表示するコンテンツとその表示方法の両方が含まれています。ただし、プレースメントを通じて ID を取得し、ビュー設定を取得してからモバイルアプリに表示する必要があります。

パフォーマンスを最適化するために、ペイウォールとそのビュー設定はできるだけ早く取得し、ユーザーに表示する前に画像のダウンロードが完了するよう十分な時間を確保することが重要です。

ペイウォールを取得するには、getPaywall メソッドを使用します。

try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(placementId, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

パラメーター:

パラメーター	必須/任意	説明
placementId	必須	取得したいプレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale	任意 デフォルト: en	ペイウォールのローカライゼーションの識別子。このパラメーターは、マイナス（-）で区切られた1つまたは2つのサブタグで構成される言語コードです。最初のサブタグは言語、2番目は地域を表します。 例：en は英語、pt-br はブラジルポルトガル語を表します。 ロケールコードの詳細と推奨される使用方法については、ローカライゼーションとロケールコードをご覧ください。
fetchPolicy	デフォルト: .reloadRevalidatingCacheData	デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを取得できるため、このオプションを推奨します。 ただし、ユーザーが不安定なインターネット環境を使用していると考えられる場合は、.returnCacheDataElseLoad を使用してキャッシュデータが存在する場合に返すことを検討してください。この場合、ユーザーは最新のデータを取得できないことがありますが、インターネット接続の状況に関わらず読み込み時間が速くなります。キャッシュは定期的に更新されるため、セッション中はネットワークリクエストを避けるためにキャッシュを使用しても安全です。 キャッシュはアプリの再起動後も保持され、アプリの再インストールや手動でのクリアによってのみ削除されます。 Adapty SDK はペイウォールをローカルに2層で保存します：上記の定期更新キャッシュとフォールバックペイウォール。また、ペイウォールを高速に取得するために CDN を使用し、CDN に到達できない場合に備えてスタンドアロンのフォールバックサーバーも用意しています。このシステムは、インターネット接続が不安定な場合でも信頼性を確保しながら、常に最新バージョンのペイウォールを取得できるように設計されています。
loadTimeoutMs	デフォルト: 5秒	このメソッドのタイムアウトを制限する値です。タイムアウトに達した場合、キャッシュされたデータまたはローカルフォールバックが返されます。 内部的に複数のリクエストで構成される場合があるため、まれに loadTimeout で指定した時間よりも少し遅くタイムアウトすることがあります。 Android の場合：拡張関数（例：5.seconds、.seconds は import com.adapty.utils.seconds からインポート）または TimeInterval.seconds(5) を使用して TimeInterval を作成できます。制限なしにするには、TimeInterval.INFINITE を使用します。

レスポンスパラメーター:

パラメーター	説明
Paywall	プロダクト ID のリスト、ペイウォール識別子、リモートコンフィグ、その他いくつかのプロパティを含む AdaptyPaywall オブジェクト。

ペイウォールビルダーで作成したペイウォールのビュー設定を取得する

ペイウォールを取得したら、ViewConfiguration が含まれているか確認します。これはペイウォールビルダーで作成されたことを示します。この情報をもとにペイウォールの表示方法を判断してください。ViewConfiguration が存在する場合はペイウォールビルダーのペイウォールとして扱い、存在しない場合はリモートコンフィグペイウォールとして処理してください。

React Native SDK では、ビュー設定を手動で取得せずに createPaywallView メソッドを直接呼び出します。

// for the Adapty SDK < 3.14 – import {createPaywallView} from 'react-native-adapty/dist/ui';

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
    //use your custom logic
}

パラメーター:

パラメーター	必須/任意	説明
paywall	必須	目的のペイウォールのコントローラーを取得するための AdaptyPaywall オブジェクト。
customTags	任意	カスタムタグとその解決済み値の辞書を定義します。カスタムタグはペイウォールコンテンツ内のプレースホルダーとして機能し、ペイウォール内のパーソナライズされたコンテンツとして特定の文字列に動的に置き換えられます。詳しくはペイウォールビルダーのカスタムタグのトピックをご参照ください。
prefetchProducts	任意	画面上のプロダクト表示タイミングを最適化するために有効にします。true の場合、AdaptyUI は必要なプロダクトを自動的に取得します。デフォルト: false。

ビューを取得したら、ペイウォールを表示します。

デフォルトオーディエンス向けのペイウォールを取得してより高速に表示する

通常、ペイウォールはほぼ瞬時に取得されるため、このプロセスを高速化することを心配する必要はありません。ただし、オーディエンスやペイウォールが多数あり、ユーザーのインターネット接続が遅い場合、ペイウォールの取得に時間がかかることがあります。そのような状況では、ペイウォールを表示しないよりもスムーズなユーザー体験を提供するために、デフォルトのペイウォールを表示したい場合があります。

この問題に対処するために、getPaywallForDefaultAudience メソッドを使用できます。このメソッドは、All Users オーディエンス向けに指定されたプレースメントのペイウォールを取得します。ただし、推奨されるアプローチは、上記のペイウォール情報の取得セクションで説明したように getPaywall メソッドでペイウォールを取得することを理解しておくことが重要です。

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

パラメーター	必須/任意	説明
placementId	必須	プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale	任意 デフォルト: en	ペイウォールのローカライゼーションの識別子。このパラメーターは、マイナス（-）で区切られた1つ以上のサブタグで構成される言語コードです。最初のサブタグは言語、2番目は地域を表します。 例：en は英語、pt-br はブラジルポルトガル語を表します。 ロケールコードの詳細と推奨される使用方法については、ローカライゼーションとロケールコードをご覧ください。
fetchPolicy	デフォルト: .reloadRevalidatingCacheData	デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを取得できるため、このオプションを推奨します。 ただし、ユーザーが不安定なインターネット環境を使用していると考えられる場合は、.returnCacheDataElseLoad を使用してキャッシュデータが存在する場合に返すことを検討してください。この場合、ユーザーは最新のデータを取得できないことがありますが、インターネット接続の状況に関わらず読み込み時間が速くなります。キャッシュは定期的に更新されるため、セッション中はネットワークリクエストを避けるためにキャッシュを使用しても安全です。 キャッシュはアプリの再起動後も保持され、アプリの再インストールや手動でのクリアによってのみ削除されます。

アセットのカスタマイズ

ペイウォール内の画像や動画をカスタマイズするには、カスタムアセットを実装します。

ヒーロー画像とヒーロー動画には定義済みのID（hero_image と hero_video）があります。カスタムアセットバンドルでは、これらの ID でエレメントをターゲットにしてその動作をカスタマイズします。

その他の画像や動画については、Adapty ダッシュボードでカスタム ID を設定する必要があります。

例えば、次のようなことができます：

• 特定のユーザーに異なる画像や動画を表示する。
• リモートのメイン画像を読み込む間、ローカルのプレビュー画像を表示する。
• 動画の再生前にプレビュー画像を表示する。

カスタムアセットをシンプルな辞書で提供する方法の例を示します：

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets })