Bubbleでアプリ開発をする際、デザイン（見た目）と同じくらい重要なのが「Workflow（ワークフロー）」の設定です。
Designタブで作ったボタンや入力フォームは、そのままでは何も動きません。
Workflowタブで「いつ（When）、何をするか（Do）」を定義することで初めて、アプリとして機能するようになります。
この記事では、BubbleのWorkflowタブの基本的な考え方と、よく使う具体的な設定パターンを画像付きで解説します。
Workflow（ワークフロー）とは？アプリの「脳」を作る場所
Workflowタブは、アプリケーションのロジック（処理の流れ）を制御する場所です。
基本的な考え方は非常にシンプルで、以下の2つの要素で成り立っています。
- Event（イベント）： トリガーとなる出来事（例：ボタンがクリックされた時）
- Action（アクション）： 実行する処理（例：ページを移動する、メールを送る、データを保存する）
つまり、「送信ボタンが押されたら（Event）」→「メールを送る（Action）」という命令を組み立てていく作業になります。
実践1：ボタンを押してページ移動させる
最も基本的なアクションである「画面遷移（ページ移動）」の設定方法を見ていきましょう。
手順1：エレメントからワークフローを開始する
Designタブで配置したボタンなどのエレメントをダブルクリックし、設定パネルを開きます。
「Add workflow」ボタンをクリックすると、自動的にWorkflowタブへ移動し、新しい処理が作成されます。
手順2：アクションを選択する
「Click here to add an action」をクリックし、メニューから実行したい処理を選びます。
ページ移動の場合は、「Navigation」の中にある「Go to page…」を選択します。
手順3：移動先を指定する
設定パネルの「Destination」プルダウンから、遷移先のページ名を選択します。
これで設定は完了です。プレビュー画面でボタンをクリックし、指定したページへ移動することを確認しましょう。
実践2：自動送信メールの内容を変更する
次に、すでに設定されているワークフロー（例：お問い合わせフォームの送信処理など）の内容を修正する方法を解説します。
手順1：対象のワークフローを探す
修正したいボタン（例：「送信」ボタン）をDesignタブでダブルクリックし、「Edit workflow」をクリックします。
※Workflowタブから直接該当の四角いボックス（Event）を探してクリックしてもOKです。
手順2：アクションの内容を修正する
一連のアクションの中から、メール送信を行っている「Send email」のアクションをクリックします。
設定パネルが表示されるので、以下の項目を修正します。
- Subject： メールの件名
- Body： メールの本文
ここで「Insert dynamic data」を使うと、「ユーザーの名前」や「入力された問い合わせ内容」などを動的に本文に埋め込むことも可能です。
まとめ：Workflowを制する者はBubbleを制す
BubbleのWorkflowタブは、アプリの「動き」を作る司令塔です。
- ページを移動する
- データを保存・変更する
- メールを送る
- 外部サービス（API）と連携する
これらはすべてWorkflowタブで設定します。
まずは「ボタンを押したらページが変わる」というシンプルな動きからマスターして、徐々に複雑な処理に挑戦していきましょう。
コメント