Adapty ダッシュボードの新しいペイウォールビルダーでペイウォールのビジュアルデザインを作成したら、モバイルアプリに表示できます。まず、プレースメントに紐づくペイウォールとそのビュー設定を取得する必要があります。

このトピックはペイウォールビルダーでカスタマイズされたペイウォールについて説明しています。リモートコンフィグペイウォールの取得については、モバイルアプリでリモートコンフィグペイウォールのペイウォールとプロダクトを取得するトピックをご参照ください。

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

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

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

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

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

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

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

パラメーター：

パラメーター	必須	説明
placementId	必須	取得したいプレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale	任意 デフォルト: en	ペイウォールのローカライゼーションの識別子。このパラメーターはマイナス（-）文字で区切られた1つまたは2つのサブタグで構成される言語コードを指定します。最初のサブタグは言語、2番目はリージョンを表します。 例：en は英語、pt-br はブラジルポルトガル語を表します。 ロケールコードとその推奨使用方法についてはローカライゼーションとロケールコードをご参照ください。
params	任意	ペイウォール取得のための追加パラメーター。

プロダクトIDをハードコードしないでください。 ハードコードすべき唯一のIDはプレースメントIDです。ペイウォールはリモートで設定されるため、プロダクト数や利用可能なオファーはいつでも変更される可能性があります。アプリはこれらの変更を動的に処理する必要があります。今日2つのプロダクトを返すペイウォールが明日3つを返しても、コードを変更せずにすべてを表示できるようにしてください。

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

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

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

ペイウォールを取得したら、ViewConfiguration が含まれているかどうかを確認します。これはペイウォールビルダーで作成されたことを示します。ViewConfiguration がある場合はペイウォールビルダーのペイウォールとして扱い、ない場合はリモートコンフィグペイウォールとして処理します。

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

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 paywall = await adapty.getPaywallForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // the requested paywall
} catch (error) {
  // handle the error
}

パラメーター	必須	説明
placementId	必須	プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale	任意 デフォルト: en	ペイウォールのローカライゼーションの識別子。このパラメーターはマイナス（-）文字で区切られた1つ以上のサブタグで構成される言語コードを指定します。最初のサブタグは言語、2番目はリージョンを表します。 例：en は英語、pt-br はブラジルポルトガル語を表します。 ロケールコードとその推奨使用方法についてはローカライゼーションとロケールコードをご参照ください。
params	任意	ペイウォール取得のための追加パラメーター。

アセットをカスタマイズする

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

ヒーロー画像と動画には hero_image と hero_video という事前定義されたIDがあります。カスタムアセットバンドルでは、これらの要素を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 });