フローとペイウォールの取得 - React Native

フローのデザインが完了したら、モバイルアプリに表示できます。まず、プレースメントに紐付けられたフローまたはペイウォールとそのビュー設定を取得します。手順は以下のとおりです。

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

始める前に

以下が必要です：

• Adapty ダッシュボードのプロダクト: プロダクトを作成する。
• プロダクトを含むフロー: フロー＆ペイウォールビルダーで作成し、プロダクトを割り当てる。
• プレースメント: プレースメントを作成し、フローを割り当てる。
• Adapty SDK のインストール: React Native SDK インストールガイドを参照してください。

フロー/ペイウォールの取得

ビルダーでフローまたはペイウォールを設計した場合、モバイルアプリのコードでユーザーに表示するためのレンダリング処理を気にする必要はありません。フローやペイウォールには、表示する内容と表示方法の両方が含まれています。ただし、プレースメント経由でIDを取得し、ビュー設定を行った上で、モバイルアプリに表示する必要があります。

フローまたはペイウォールをできるだけ早い段階で取得し、そのビューを作成しておきましょう — 理想的には表示するよりもかなり前に行います。createFlowView メソッドはビューの設定を読み込み、画像のダウンロードとキャッシュをバックグラウンドで開始します。早めに呼び出すほど、ダウンロードが完了するまでの時間を確保できます。フローまたはペイウォールを表示する頃には、設定と画像がすでにキャッシュされた状態になっています。

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

try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(placementId);
  // the requested flow/paywall
} catch (error) {
    // handle the error
}

パラメーター:

パラメーター	必須/任意	説明
placementId	必須	取得したいプレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
fetchPolicy	デフォルト: .reloadRevalidatingCacheData	デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。この方式はユーザーが常に最新のデータを取得できるため、推奨します。 ただし、ユーザーのインターネット接続が不安定な場合は、.returnCacheDataElseLoad を使用することを検討してください。キャッシュが存在する場合はキャッシュデータを返します。この場合、ユーザーが最新のデータを取得できないことがありますが、接続状態にかかわらず読み込み時間が短縮されます。キャッシュは定期的に更新されるため、ネットワークリクエストを避けるためにセッション中に使用しても安全です。 キャッシュはアプリを再起動しても保持され、アプリの再インストール時または手動でクリーンアップした場合にのみ削除されます。 Adapty SDK はペイウォールをローカルに2層で保存します。1つは上記の定期更新キャッシュ、もう1つはフォールバックペイウォールです。また、CDN を使用してペイウォールをより速く取得し、CDN に接続できない場合に備えてスタンドアローンのフォールバックサーバーも利用しています。このシステムは、インターネット接続が不安定な状況でも信頼性を確保しながら、常に最新バージョンのペイウォールを取得できるよう設計されています。
loadTimeoutMs	デフォルト: 5秒	このメソッドのタイムアウト上限を設定します。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。 内部で複数のリクエストが実行される場合があるため、まれに loadTimeout で指定した時間よりわずかに遅れてタイムアウトすることがあります。 Android の場合: 拡張関数（例: 5.seconds、.seconds は import com.adapty.utils.seconds から）を使用するか、TimeInterval.seconds(5) で TimeInterval を作成できます。制限なしにするには TimeInterval.INFINITE を使用してください。

レスポンスパラメータ

パラメーター	説明
Flow	フローの識別子（id、variationId）、名前、プレースメント、ペイウォールのバリアント（paywalls）、リモートコンフィグ（remoteConfigs）、および SDK 4.1 以降では hasViewConfiguration フラグを含む AdaptyFlow オブジェクト。

ビュー設定を取得する

プレースメントが Flow & Paywall Builder または 旧ペイウォールビルダー でデザインされている場合、Adapty が UI をレンダリングします。createFlowView でビューを作成し、フローまたはペイウォールを表示します。プレースメントがビルダー UI を持たないカスタムペイウォールの場合は、代わりにリモートコンフィグペイウォールとして処理してください。

SDK 4.1 以降では、フローの hasViewConfiguration フラグを使用してビューを作成する前に両者を区別できます。

if (flow.hasViewConfiguration) {
  const view = await createFlowView(flow);
  await view.present();
} else {
  // Render your own screen from flow.remoteConfigs and flow.paywalls
}

4.0 では、このフラグは存在せず、ビュー設定のないフローに対して createFlowView は AdaptyError をスローします。

React Native SDK では、createFlowView を直接呼び出してください。事前にビュー設定を取得する必要はありません。

try {
  const view = await createFlowView(flow);
} catch (error) {
  // handle the error
}

パラメータ：

パラメータ	必須/任意	説明
flow	必須	目的のフロー/ペイウォールのコントローラーを取得するための AdaptyFlow オブジェクト。
locale	任意	ビューのレンダリングに使用するフローのローカライゼーションの識別子（例：en、pt-br）。省略するとビューは en でレンダリングされます。ただし、フローに en がない場合はフローのデフォルトローカライゼーションが使用されます。SDK 4.0.2 以降が必要です。詳細はローカライゼーションとロケールコードを参照してください。
customLayoutId	任意 デフォルト：undefined SDK 4.1+	まだリリースされていない Flow & ペイウォールビルダー機能のために予約されています。ビルダーがレイアウト ID を定義できるようになるまで、渡した値はどのレイアウトにも一致せず、createFlowView は AdaptyError をスローします。未設定のままにしてください。
customTags	任意	コンテンツ内のプレースホルダーとして使用するカスタムタグとその解決済みの値のディクショナリ。カスタムタグは旧ビルダーのペイウォールにのみ適用されます。フローでは代わりに変数を使用します。
prefetchProducts	任意	画面上のプロダクト表示タイミングを最適化するために有効にします。true の場合、AdaptyUI は必要なプロダクトを自動的に取得します。デフォルト：false。
android.enableSafeArea	任意	Android のみ（iOS では無視されます）。ネストされたオブジェクトとして渡します：android: { enableSafeArea: true }。true の場合、フロービューにセーフエリアのパディングが適用されます。モーダル表示（createFlowView + present()）ではデフォルトが true、埋め込みの AdaptyFlowView コンポーネントではデフォルトが false になります。ほとんどの場合、デフォルト値が適しています。

ビューを取得したら、フロー/ペイウォールを表示してください。

デフォルトオーディエンスのフローまたはペイウォールを取得して表示を高速化する

通常、フローやペイウォールはほぼ即座に取得されるため、高速化を意識する必要はありません。ただし、オーディエンスやプレースメントが多数あり、ユーザーの通信環境が不安定な場合は、取得に時間がかかることがあります。そのような状況では、何も表示しないよりも、デフォルトのフローまたはペイウォールを表示してスムーズなユーザー体験を提供したほうがよいでしょう。

これに対処するために、getFlowForDefaultAudience メソッドを使用できます。このメソッドは、指定したプレースメントの All Users オーディエンス向けのフローまたはペイウォールを取得します。ただし、推奨されるアプローチは フロー/ペイウォールの取得 セクションで詳しく説明されている getFlow メソッドを使用してフローまたはペイウォールを取得することである点を理解しておくことが重要です。

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow/paywall
} catch (error) {
    // handle the error
}

パラメータ	必須/任意	説明
placementId	必須	プレースメントの識別子です。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
fetchPolicy	デフォルト: .reloadRevalidatingCacheData	デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを受け取れるため、この設定を推奨します。 ただし、ユーザーのインターネット接続が不安定な場合は、.returnCacheDataElseLoad の使用を検討してください。この設定では、キャッシュが存在する場合にキャッシュデータを返します。最新データが得られないケースはありますが、接続状況に関わらず読み込みが速くなります。キャッシュはセッション中も定期的に更新されるため、ネットワークリクエストを減らす目的で安心して利用できます。 なお、キャッシュはアプリを再起動しても保持され、アプリのアンインストール時または手動でクリアした場合のみ削除されます。

アセットのカスタマイズ

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

ヒーロー画像と動画には、あらかじめ 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 createFlowView(flow, { customAssets })

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 の場合: TimeInterval は拡張関数（例: 5.seconds、.seconds は import com.adapty.utils.seconds から）や TimeInterval.seconds(5) を使用して作成できます。制限を設けない場合は 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 を使用してキャッシュが存在すればそれを返す方法も検討してください。この場合、最新データが届かないことがありますが、接続状態に関わらず読み込み時間が短縮されます。キャッシュはセッション中に定期的に更新されるため、ネットワークリクエストを減らす目的で安全に使用できます。 なお、キャッシュはアプリを再起動しても保持され、アプリの再インストールまたは手動クリアを行った場合にのみ削除されます。

アセットのカスタマイズ

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

ヒーロー画像とヒーロー動画には、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 })