---
title: "変数"
description: "フローで動的データを表示するために変数を使用します。"
---

変数を使うと、フロー内に動的なコンテンツを表示できます。プロダクトの価格、オファーの詳細など、ユーザーのコンテキストに応じて更新されるデータが対象です。要素の表示/非表示の制御や、画面コンテンツのパーソナライズに活用してください。

変数パネルを開くには、左パネルの **{ }** アイコンをクリックします。パネルには3つのタブがあります。

- **[カスタム](#custom-variables)**: 自分で作成・管理する変数。
- **[プロダクト](#product-variables)**: ストアからローカライズされたプロダクト・オファーデータを取得する組み込み変数。
- **[要素](#element-variables)**: キャンバス上の要素の状態にバインドされた変数。

## カスタム変数 \{#custom-variables\}

### カスタム変数の作成 \{#create-a-custom-variable\}

1. 変数パネルで **+** をクリックします。
2. 変数の名前を入力します。
3. 型を選択します: String、Number、または Boolean。
4. 初期値を設定します。これはフロー開始時に変数が保持する値です。
5. **Create variable** をクリックします。

:::tip
名前にドットを使うと関連する変数をグループ化できます。例: `user.score`、`user.goal`。
:::

### インタラクションによる変数の更新 \{#update-a-variable-via-an-interaction\}

:::link
詳細については、[アクション](onboarding-actions)の記事を参照してください。
:::

任意の要素に **Set up variables** アクションを追加することで、実行時に変数の値を更新できます。

1. キャンバス上で要素を選択します。
2. **Interactions** タブで **Add trigger** をクリックします。
3. **On tap** を選択し、**Add action** をクリックします。**Action type** ドロップダウンから **Set up variables** を選択します。
4. **Add variable** をクリックします。変数を選択して新しい値を設定します。

:::tip
たとえば、ユーザーが選択したクイズの回答に応じて `user.goal` に異なる値を設定し、その変数を使って別の画面に誘導できます。
:::

## プロダクト変数 \{#product-variables\}

プロダクト変数は、アプリストアからローカライズされたデータを直接取得します。テキストフィールドで使用してローカライズされた価格やタイトル、オファーの詳細を表示したり、条件として使用してオファーの対象資格に基づいてコンテンツの表示/非表示を切り替えたりできます。

| 変数 | 説明 | 例 |
| :--- | :--- | :--- |
| `prod_title` | プロダクトのローカライズされたタイトル | Premium Subscription |
| `prod_price` | 1請求期間のローカライズされた価格 | $9.99 |
| `prod_price_per_day` | サブスクリプション価格を請求期間の日数で割った値。サブスクリプション以外は空。 | $0.33 |
| `prod_price_per_week` | サブスクリプション価格を請求期間の週数で割った値。サブスクリプション以外は空。 | $2.33 |
| `prod_price_per_month` | サブスクリプション価格を1ヶ月換算した値。サブスクリプション以外は空。 | $9.99 |
| `prod_price_per_year` | サブスクリプション価格を1年換算した値。サブスクリプション以外は空。 | $119.88 |
| `offer_price` | 初回オファーまたはプロモーションオファーのローカライズされた価格。対象オファーがない場合は空。 | $0.99 |
| `offer_billing_period` | オファーのローカライズされた請求期間。トライアルおよび前払いオファーでは `offer_full_duration` と同じ値。対象外の場合は空。 | 1 week |
| `offer_full_duration` | オファーのローカライズされた全期間。対象外の場合は空。 | 1 month |
| `is_free_trial` | 無料トライアル付きオファーの対象ユーザーの場合に `true` を返す。 | true |
| `is_pay_up_front` | 前払いオファーの対象ユーザーの場合に `true` を返す。 | true |
| `is_pay_as_you_go` | 従量払いオファーの対象ユーザーの場合に `true` を返す。 | true |

:::tip
`is_free_trial`、`is_pay_up_front`、`is_pay_as_you_go` を条件付き表示と組み合わせて、ユーザーが対象となるオファーに基づいて要素の表示/非表示を切り替えられます。たとえば、`is_free_trial` が `true` の場合にのみ無料トライアルのタイムラインを表示するといった使い方ができます。
:::

オファー変数の値は、ユーザーが対象となるオファーの種類によって異なります。例として、$5 の週次サブスクリプション「Premium Subscription」に3種類のオファーがある場合を考えます。

- **Pay As You Go**: 最初の3週間は週$3（週次請求）、その後は週$5。
- **Pay Up Front**: 最初の3週間は$8（即時一括請求）、その後は週$5。
- **Free Trial**: 最初の1週間無料、その後は週$5。

この例では、`prod_title` は "Premium Subscription"、`prod_price` は $5 を返します。オファー変数の値は、ユーザーが対象となるオファーによって異なります。

| 変数 | Pay As You Go | Pay Upfront | Free Trial |
| :--- | :--- | :--- | :--- |
| `offer_price` | $3 | $8 | $0 |
| `offer_billing_period` | 1 week | 3 weeks | 1 week |
| `offer_full_duration` | 3 weeks | 3 weeks | 1 week |

Pay Upfront と Free Trial では、`offer_billing_period` と `offer_full_duration` は同じ値を返します。Pay As You Go では、請求期間が1週間で全期間が3週間となるため、値が異なります。

:::note
オファーの詳細や設定方法については、[オファー](offers)を参照してください。
:::

## 要素変数 \{#element-variables\}

要素変数は、ユーザーの選択内容（クイズで選んだ項目、現在表示しているタブ、トライアルトグルのオン/オフなど）を取得します。

要素変数の型はグループによって異なります。
- **Single choice**: 単一選択クイズとタブ:
    - `selected_id`: 条件で使用する要素 ID
    - `selected_title`: 動的テキストで使用する要素タイトル
- **Multi-choice**: 複数選択クイズ:
    - `selected_ids`: 条件で使用する要素 ID
    - `selected_titles`: 動的テキストで使用する要素タイトル
- **Toggle**: トライアルトグル:
    - `is_selected`: Boolean 値

主な使用例:
- トライアルトグルの有効/無効に応じて異なるコンテンツを表示する。
- クイズの回答に基づいて[ユーザーを別の画面に誘導する](onboarding-navigation-branching)。

## テキストで変数を使用する \{#use-variables-in-text\}

テキスト要素に変数を挿入するには:

1. キャンバス上でテキスト要素を選択します。
2. **Design** タブで **Content** フィールドを見つけ、テキストを入力します。
3. フィールド内の **{ }** アイコンをクリックします。
4. リストから変数を選択します。

:::tip
変数は他の要素でも使用できます。
- リンクやアラートで変数を使って動的にする
- 変数に基づいた動的な条件を作成する。例: `if experience.current > experience.target, navigate to...`
:::

### 画面間でコンテンツを再利用する \{#reuse-content-across-screens\}

フロー内で繰り返し使われるコンテンツがあります。「Continue」などのボタンラベル、繰り返し使われる行動喚起のテキスト、複数の画面に表示される注意書きなどです。同様に、複数の画面で再利用される機能説明のような長いテキストも対象となります。各要素に同じテキストを入力する代わりに、カスタム変数に保存しておきましょう。異なるユーザーを異なる画面に誘導しつつ、一貫した文言を維持したい場合に特に役立ちます。

1. String 型の[カスタム変数を作成し](#create-a-custom-variable)、再利用したいテキストを初期値として設定します。例: 変数名を `button.navigation`、値を `Continue` に設定します。
   
2. テキストを表示したい各要素の **Content** フィールドにこの変数を挿入します。

テキストを一括で変更するには、変数の初期値を一度更新するだけです。その変数を使用しているすべての要素が自動的に更新されるため、各画面を手動で編集する必要はありません。