---
title: "ステップ1. ペイウォールデータを表示するフローを作成する"
description: "Adaptyでフィーチャーフラグのアクションフローを設定し、ユーザーのサブスクリプション体験をパーソナライズする方法を解説します。"
---

:::important
FlutterFlowプラグインを使用する場合、Adaptyのペイウォールビルダーで作成したペイウォールは使用できません。FlutterFlowで独自のペイウォールページを実装し、Adaptyと連携させる必要があります。
:::

AdaptyライブラリをFlutterFlowプロジェクトの依存関係として追加したら、次は**AdaptyのペイウォールとプロダクトデータをFlutterFlowで設計したペイウォールに取得して表示する**フローを構築します。

まずAdaptyからペイウォールデータを受け取る必要があります。最初にAdaptyのペイウォールをリクエストし、次にそれに関連するプロダクトをリクエストし、最後にデータが正常に受信されたかどうかを確認します。成功した場合はペイウォールページにプロダクトのタイトルと価格を表示し、失敗した場合はエラーメッセージを表示します。

先に進む前に、以下の作業が完了していることを確認してください。

1. Adapty ダッシュボードで[ペイウォールを少なくとも1つ作成し、プロダクトを少なくとも1つ追加している](create-paywall)こと。
2. Adapty ダッシュボードで[プレースメントを少なくとも1つ作成](create-placement)し、[そのペイウォールを追加している](add-audience-paywall-ab-test)こと。

それでは始めましょう！

## ステップ1.1. Adaptyペイウォールをリクエストする \{#step-11-request-adapty-paywall\}
前述の通り、FlutterFlowのペイウォールにデータを表示するには、まずAdaptyからデータを取得する必要があります。最初のステップはAdaptyのペイウォール自体を取得することです。手順は以下の通りです。

1. ペイウォール画面を開き、右ペインの **Actions** セクションに切り替えます。そこから **Action Flow Editor** を開きます。

  
    <img src="/assets/shared/img/ff_action_flow.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

2. **Select Action Trigger** ウィンドウで **On Page Load** を選択します。
  
    <img src="/assets/shared/img/ff_action_trigger.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. **Add Action** をクリックします。次に、`getPaywall` カスタムアクションを検索して選択します。

  
    <img src="/assets/shared/img/ff_getpaywall.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

4. **Set Actions Arguments** セクションで、ペイウォールを含むAdapity ダッシュボードで[作成したプレースメント](create-placement)の実際のIDを入力します。この例では `monthly` です。必ず実際のプレースメントIDを使用してください！

  
    <img src="/assets/shared/img/ff_placementid.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

5. Adapty ダッシュボードでペイウォールを[ローカライズ](localizations-and-locale-codes)している場合は、**locale** 引数も設定できます。

6. **Action Output Variable Name** で新しい変数を作成し、`getPaywallResult` という名前を付けます。次のステップでAdaptyのペイウォールを参照してプロダクトをリクエストする際に使用します。

  
    <img src="/assets/shared/img/ff_getpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## ステップ1.2. Adaptyペイウォールプロダクトをリクエストする \{#step-12-request-adapty-paywall-products\}

Adaptyのペイウォールを取得しました。次は、このペイウォールに関連するプロダクトを取得しましょう。

1. 作成したアクションの下にある **+** をクリックし、**Add Action** を選択します。このアクションでAdaptyペイウォールのプロダクトを受け取ります。`getPaywallProducts` を検索して選択します。

2. **Set Actions Arguments** セクションで、先ほど作成した `getPaywallResult` 変数を選択します。

  
    <img src="/assets/shared/img/ff_getpaywallproduct.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. 残りのフィールドを以下のように入力します。
  - **Available Options**: Data Structured Field
  - **Select Field**: value
  - **Available Options**: No further changes

  
    <img src="/assets/shared/img/ff_getpaywallresult2.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

4. **Confirm** をクリックします。
5. **Action Output Variable Name** で新しい変数を作成し、`getPaywallProductsResult` という名前を付けます。FlutterFlowで設計したペイウォールとAdaptyのペイウォールデータをマッピングする際に使用します。

  
    <img src="/assets/shared/img/ff_getpaywallproductsresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## ステップ1.3. ペイウォールが正常にアップロードされたか確認する \{#step-13-add-check-if-the-paywall-uploaded-successfully\}

次に進む前に、Adaptyのペイウォールが正常に受信されたかどうかを確認しましょう。成功した場合はプロダクトデータでペイウォールを更新し、失敗した場合はエラーを処理します。確認を追加する手順は以下の通りです。

1. **+** をクリックし、**Add Conditional** をクリックします。

  
    <img src="/assets/shared/img/ff-add-conditional.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

2. **Action Output** セクションで、先ほど作成したアクション出力変数（この例では `getPaywallResult`）を選択します。

  
    <img src="/assets/shared/img/ff-getpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Adaptyのペイウォールが受信されたことを確認するため、値を持つフィールドの存在を確認します。フィールドを以下のように入力します。
 - **Available Options**: Has Field
 - **Field (AdaptyGetPaywallResult)**: value

4. **Confirm** をクリックして条件を確定します。

## ステップ1.4. ペイウォールの表示をログに記録する \{#step-14-log-the-paywall-review\}

Adaptyのアナリティクスがペイウォールの表示を追跡できるよう、このイベントをログに記録する必要があります。この手順を省略すると、表示がアナリティクスでカウントされません。手順は以下の通りです。

1. **TRUE** ラベルの下にある **+** をクリックし、**Add Action** をクリックします。
2. **Select Action** フィールドで **logShowPaywall** を検索して選択します。

  
    <img src="/assets/shared/img/ff-logshowpaywall.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. **Set Action Arguments** エリアで **Value** をクリックし、作成した `getPaywallResult` 変数を選択します。この変数にはペイウォールデータが含まれています。
4. フィールドを以下のように入力します。
  - **Available Options**: Data Structured Field
  - **Select Field**: value

5. **Confirm** をクリックします。

  
    <img src="/assets/shared/img/ff-lohsgowpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## ステップ1.5. ペイウォールが受信されなかった場合にエラーを表示する \{#step-15-show-error-if-paywall-not-received\}

Adaptyのペイウォールが受信されなかった場合は、[エラーを処理する](error-handling-on-flutter-react-native-unity#system-storekit-codes)必要があります。この例では、アラートメッセージを表示するだけにします。

1. **FALSE** ラベルに **Informational Dialog** アクションを追加します。
2. **Title** フィールドに、ダイアログのタイトルとして表示したいテキストを入力します。この例では **Error** です。
3. **Message** ボックスで **Value** をクリックします。

4. フィールドを以下のように入力します。
  - **Set Variable**: 作成した `getPaywallProductResult` 変数
  - **Available Options**: Data Structure Field
  - **Select Field**: error
  - **Available Options**: Data Structure Field
  - **Select Field**: errorMessage

  
    <img src="/assets/shared/img/ff-error.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

5. **Confirm** をクリックします。
6. **FALSE** フローに **Terminate action** を追加します。

  
    <img src="/assets/shared/img/ff-terminate.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

7. 右上隅の **Close** をクリックします。

  おめでとうございます！プロダクトデータの取得に成功しました。次は[FlutterFlowで設計したペイウォールにデータをマッピング](ff-add-variables-to-paywalls)しましょう。