---
title: "Capacitor SDKでフローにデータを渡す"
description: "CapacitorアプリからフローにValueを渡し、テキスト要素に表示する方法を説明します。"
---
> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`
[カスタムタグ](flow-custom-tags)は、アプリの値を持つカスタム変数です。変数の設定で **Value comes from outside the app** を選択すると、アプリは Adapty SDK を通じてその値を設定できます。たとえば、テキスト要素に「Coins:」とカスタムタグが含まれている場合、アプリがタグに「120」を渡すと、ユーザーには「Coins: 120」と表示されます。
## 始める前に \{#before-you-start\}
Adapty SDK v4 以降が必要です。v4 より前のバージョンではフローが表示されません。
## フローにカスタムタグを追加する \{#add-custom-tags-to-the-flow\}
アプリの値をフローで表示するには、ビルダーでカスタムタグを設定します。
1. アプリが渡す各値に対して[カスタムタグを作成](flow-custom-tags#create-a-custom-tag)します。
2. [各タグをテキスト要素に挿入](flow-custom-tags#add-a-custom-tag-to-a-text-element)します。
3. グループ名を含む各タグのフルネームを確認してください。アプリのコードはこの名前で各値を渡します。たとえば、`user` グループに `streak` タグが含まれている場合、タグのフルネームは `user.streak` となります。
## カスタムタグの値を渡す \{#pass-custom-tag-values\}
アプリの値を `createFlowView` の `customTags` パラメータにオブジェクトとして渡します：
- 各キーは `user.streak` のように、カスタムタグのフル名です。
- 各値は、タグの代わりにユーザーが目にする文字列です。
- 各値は "1,250" のように人が読める形式にしてください（"1250.0" のような形式は不可）。Adapty はフォーマットや翻訳を行いません。
SDK はビューの作成時に値を一度だけ読み込むため、フローが開いている間は変更されません。
```typescript showLineNumbers title="Capacitor"
const customTags = {
'username': 'DragonSlayer42',
'coins': '1,250',
};
try {
const view = await createFlowView(flow, { customTags });
await view.present();
} catch (error) {
// handle the error
}
```
カスタムタグをテストするには、タグの値を設定するコードを追加した後、アプリでフローを開いてください。ビルダーのキャンバスおよび[デバイスでのプレビュー](paywall-device-compatibility-preview#preview-on-devices)には初期値のみが表示されます。Adapty モバイルアプリはカスタムタグの値を設定しません。
アプリがすでに旧ペイウォールビルダーのペイウォールにカスタムタグの値を設定している場合は、[フローにおけるカスタムタグの違い](migrate-to-flows#custom-tags-from-the-old-paywall-builder)を確認してください。
## 値がない場合にユーザーに表示されるもの \{#what-users-see-without-a-value\}
以下の場合、ユーザーにはカスタムタグの**初期値**がフォールバックとして表示されます。
- アプリがそのタグに値を渡していない場合。
- ユーザーがアプリを値を渡すバージョンにアップデートしていない場合。
- アプリのコード内の名前が、大文字・小文字を含めタグのフルネームと一致していない場合。
- 同じテキスト要素内の別のカスタムタグに値がない場合。その場合、そのテキスト要素内のすべてのカスタムタグが初期値を表示します。
タグの位置に何も表示しないようにするには、空の文字列を渡してください。Adapty は空の文字列を値として扱うため、フォールバックは表示されません。
## 例：オンボーディングの回答からBMIを表示する \{#example-show-a-bmi-from-onboarding-answers\}
フローはユーザーから回答を収集でき、カスタムタグはアプリの値を表示できます。この2つを組み合わせることで、スコア、おすすめプラン、健康指標など、回答からアプリが計算した結果をユーザーに表示できます：
1. フローが回答を収集し、アプリに送信します。
2. アプリが結果を計算します。
3. アプリが次のフローにカスタムタグの値として結果を渡します。
この例では、オンボーディングフローがユーザーの体重と身長を収集します。ユーザーがオンボーディングフローの最後の画面を閉じると、アプリがBMI（ボディマス指数）を計算します。そして、BMIを表示するペイウォールフローを開きます。
### フローを設定する \{#set-up-the-flows\}
1. [2つのフローを作成します](paywall-builder-templates): ユーザーの体重と身長を収集するオンボーディングフローと、BMIを表示するペイウォールフローです。
2. オンボーディングフローに2つの[**Number**入力](builder-inputs-and-forms)を追加します:
- 体重（キログラム）用。**Element ID**を`weight`に設定します。
- 身長（センチメートル）用。**Element ID**を`height`に設定します。
両方の入力で、**Format**を**Integer**に設定します。入力はユーザーが入力した通りのテキストとして値を送信するため、[サンプルコード](#pass-the-bmi-to-the-paywall)は"70.5"と"70,5"を同じように読み取りません。整数には小数点区切り文字がないため、すべてのロケールで同じように読み取られます。
3. アプリが両方の値を確実に受け取れるよう、オンボーディングフローを入力のない画面で終了させます。その画面に、[**Close flow**](onboarding-actions#close-flow)アクションを持つボタンを追加します。入力はフォーカスを失ったとき、またはユーザーが別の画面に移動したときに値を送信します。Close flowアクションは値を送信しません。サンプルコードは、ユーザーが最後の画面に到達した場合にのみペイウォールを開きます。
4. ペイウォールフローで、`bmi`という名前の[カスタムタグを作成します](flow-custom-tags#create-a-custom-tag)。**Initial value**フィールドにダッシュ（`—`）を入力します。アプリがBMIを渡さない場合、ユーザーにはダッシュが表示されます。
5. ペイウォールフローに「Your BMI:」という文字列を含むテキスト要素を追加します。この文字列の後に、[`bmi`カスタムタグを挿入します](flow-custom-tags#add-a-custom-tag-to-a-text-element)。
6. オンボーディングフローを`onboarding`などの[プレースメント](placements)に追加します。ペイウォールフローをID `bmi_paywall`のプレースメントに追加します。[BMIをペイウォールに渡す](#pass-the-bmi-to-the-paywall)のコードは、このIDでペイウォールを取得します。
### ペイウォールにBMIを渡す \{#pass-the-bmi-to-the-paywall\}
オンボーディングフローの `flow_user_input` イベントから体重と身長を収集します。詳細は [フローからデータを処理する](capacitor-flow-input) を参照してください。ユーザーが最後の画面に到達したことを確認するには、`is_last_screen` が `true` に設定された `flow_screen_showed` イベントを監視します。詳細は [フロー画面の表示を追跡する](capacitor-flow-screen-views) を参照してください。ユーザーがその画面を閉じてオンボーディングフローを終了したら、BMIを計算します。次に、ペイウォールのビューを作成し、`bmi` カスタムタグにBMIを渡します。
`onboardingView` に以下のハンドラーを登録してください。これはオンボーディングフロー用に作成するビューです：
```typescript showLineNumbers title="Capacitor"
const bodyAnswers: Record = {};
let reachedLastScreen = false;
await onboardingView.setEventHandlers({
onAnalytics(name, params) {
if (name === 'flow_screen_showed' && params.is_last_screen) {
reachedLastScreen = true;
}
if (name === 'flow_user_input' && typeof params.value === 'string') {
bodyAnswers[params.element_id as string] = params.value;
}
return false;
},
onDisappeared() {
// Number inputs send their values as strings.
const weight = Number(bodyAnswers.weight);
const height = Number(bodyAnswers.height);
const finished = reachedLastScreen;
delete bodyAnswers.weight;
delete bodyAnswers.height;
reachedLastScreen = false;
if (finished && weight > 0 && height > 0) {
const heightInMeters = height / 100;
const bmi = weight / (heightInMeters * heightInMeters);
showBmiPaywall(bmi.toLocaleString(undefined, { maximumFractionDigits: 1 }));
}
return false;
},
});
async function showBmiPaywall(bmi: string) {
try {
const flow = await adapty.getFlow({ placementId: 'bmi_paywall' });
const view = await createFlowView(flow, { customTags: { 'bmi': bmi } });
await view.present();
} catch (error) {
// handle the error
}
}
```
`toLocaleString` はユーザーのロケールの小数点区切り文字を使用します: 英語では "22.7"、ドイツ語では "22,7"。
### BMIをユーザーのプロファイルに保存する \{#save-the-bmi-to-the-users-profile\}
BMIに基づいてユーザーに異なるフローを表示するには、BMIをプロファイルの[カスタム属性](capacitor-setting-user-attributes#custom-user-attributes)として保存します。Adapty ダッシュボードで、キー `bmi` を使って[**Number** カスタム属性を作成](segments#custom-attributes)し、その属性から構築した[オーディエンス](audience)に各フローを表示します。
`onDisappeared`の`bmi`を計算した行の直後で`updateProfile`メソッドを呼び出します。セグメントがBMIをしきい値と比較できるように、フォーマットされた文字列ではなく数値を渡してください。`onDisappeared`は`async`にできないため、`await`の代わりに`.catch`で結果を処理します：
```typescript showLineNumbers title="Capacitor"
adapty
.updateProfile({ codableCustomAttributes: { bmi } })
.catch((error) => {
// handle the error
});
```