---
title: "フローbuilder内のボタン"
description: "フローbuilderでアクションボタンを追加・設定します。"
---

ボタンはフローbuilder内でユーザーのタップに反応するインタラクティブな要素です。次の用途に使用できます：
- プロダクトに紐付いてトランザクションを自動処理する購入用CTA
- ナビゲーション — ユーザーを画面間で移動させる（次へ、戻る、閉じる、スキップ）
- ユーティリティリンク — 購入の復元、利用規約、プライバシーポリシー

:::info
このセクションでは、Adapty SDK バージョン4.0以上で動作する新しいフローbuilderについて説明します。
:::

## ボタンを追加する \{#add-buttons\}

ボタンを追加するには：

1. **+** をクリックして **Button** を選択します。
2. ボタンの種類を選択します。

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

3. 購入ボタン、リンク、閉じるボタンにはあらかじめアクションが設定されています。リンクの場合は[ユーザーの遷移先URLを設定](#links)してください。その他のボタンタイプの場合は、**Interactions** パネルに移動し、**Button triggers** セクションでボタンが実行する[アクション](onboarding-actions)を設定します。

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

4. **Design** パネルで[ボタンのデザイン](manage-paywall-ui-elements)を設定します。

## ボタンの種類 \{#button-types\}

### 購入ボタン \{#purchase-buttons\}

:::link
購入ボタンを機能させるには、プロダクトを画面にバインドし、**Products** 要素を追加してください。[ガイド](paywall-product-block)をご覧ください。
:::

購入ボタンは、ユーザーが画面上で選択しているプロダクトのアプリ内課金を開始します。SDKがトランザクションを自動的に処理するため、アプリのコードで購入処理を実装する必要はありません。

購入ボタンを追加するには：

1. **+** をクリックして **Button** を選択し、ボタンのプリセットを選びます。
2. ボタンを選択した状態で、右パネルの **Interactions** タブを開きます。
3. **Add trigger** > **On tap** をクリックし、**Add action** をクリックします。
4. **Action** を **Purchase**、**Product** を `products.selectedProduct` に設定します。`products.selectedProduct` 変数は常に画面で現在選択されているプロダクトに解決されます。

:::tip
購入ボタンにアニメーションを付けて注目を集めることができます。ペイウォールビルダーでは現在 **Pulse** アニメーションタイプに対応しています。

アニメーションのスタイルは **Design** パネルで設定してください。
:::

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

### リンク \{#links\}

:::important
**Terms of Use** ボタンと **Privacy Policy** ボタンには **Open URL** アクションが組み込まれています。そこに遷移先URLを設定してください。Open URL が空の場合や[インラインリンク](onboarding-text#inline-link)が空の場合、プレビューおよび公開がブロックされます。
:::

一部のストア要件に準拠するため、以下のリンクを追加できます：
- 利用規約
- プライバシーポリシー
- 購入の復元

リンクを追加するには：
1. **+** をクリックして **Button > Links** を選択します。これにより、購入の復元またはURLを開くといったあらかじめ定義されたアクションを持つインラインボタンの行が追加されます。含まれているボタンがすべて必要でない場合は、レイヤーパネルで不要なものを削除してください。

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

2. 次に、ボタンのアクションを設定します：

   - **Restore purchases** ボタンはすでに購入の復元を処理します。
   - 残りの各リンクについて：
        1. ボタンをクリックして選択し、右側の **Interactions** タブに切り替えます。
        2. フィールドにURLを貼り付けます。
        3. デフォルトでは、シームレスなユーザー体験のためにURLはアプリ内ブラウザで開きます。外部ブラウザでユーザーを遷移させたい場合は、**Open in external browser** チェックボックスを選択してください。

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

### フローを閉じる \{#close-flow\}

**Close** ボタンはフローを自動的に閉じます。

閉じるボタンを追加するには、**+** をクリックして **Button > Close flow** を選択します。

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

:::tip
**Absolute** ポジションを使用すると、閉じるボタンを画面の角に配置できます。
:::

[アクション](onboarding-actions)を使用して、他のボタンもフローを閉じるように設定できます。

### カスタムボタン \{#custom-buttons\}

追加できるすべてのボタンは、タップ時に任意のアクションを実行するように設定できます：
- 次の画面へ移動する
- アラートを表示する
- [変数](onboarding-variables)を設定する
- [画面要素の表示・非表示を切り替える](onboarding-element-visibility)
- URLを開く
- 購入を復元する
- 条件付きアクションを実行する