【Bubble開発超基礎編！】workflowの使用方法総まとめ！～Elements編～

こんにちは！
EPICs株式会社です。

今回は、Bubbleの「Workflow」の中にある、「Elements」メニューの使い方について解説します。

※こちらの記事は、これからBubble開発を勉強し始める方に向けた、初学者向けの記事となります。

動画解説バージョンはこちら！

Workflow – Elementsメニューとは？

BubbleのWorkflow – Elementsメニューは、ページ内の特定のエレメント（ボタン、入力フォーム、アップローダーなど）が特定のアクションを実行したときに、対応するワークフローを発動するためのメニューです。

このメニューを活用すると、ボタンがクリックされたときや、フォームの値が変更されたとき、エラーが発生したときなどに、自動で処理を実行できます。

今回は、基本的な3つのWorkflowについて、具体的な設定方法と活用例を解説していきます。

各Workflowの詳細な使い方

An element is clicked

※写真1枚

概要：

• 特定のエレメントがクリックされたタイミングでワークフローを実行します。

具体的な設定方法：

1. Workflowメニューで「An element is clicked」を選択。
2. 対象のボタンやリンクを選択。
3. 例えば、ログインボタンをクリックした際に「Log the user in」のアクションを設定。

活用例：

• ログインボタンを押したときに、ユーザー認証を実行する。
• フォーム送信ボタンを押したときに、データベースに情報を保存する。

An input’s value is changed

概要：

• インプットエレメントの値が変更されたタイミングでワークフローを実行します。

具体的な設定方法：

1. An input’s value is changed」を選択。
2. 対象のインプットフィールドやアップローダーを選択。
   
3. 例えば、ピクチャーアップローダーの値が変わったときに、その画像をカスタムステートに保存するワークフローを設定。
   

活用例：

• 入力フォームの値が変更された際に、入力チェックを行う。
• インプット内の値が変更された時に、その画像をページ上に表示する。

An element has an error running a workflow

概要：

• 特定のエレメントのワークフローでエラーが発生した際に、対応する処理を実行します。

具体的な設定方法：

1. Workflowメニューで「When an element has an error running a workflow」を選択。
2. 対象となるエレメント（ボタン、フォームなど）を指定。
3. 例えば、ログインボタンでエラーが発生した場合に、アラートを表示する設定を行う。

ログインボタンでエラーが発生した場合にアラートを表示させるWorkflow

活用例：

• ログイン認証でエラーが発生した際に、ユーザーにエラーメッセージを表示する。
• 入力フォームの必須項目が未入力の場合に、エラーメッセージを表示する。

まとめ

Bubbleの「Workflow」 の中にある「 Elements」メニューを活用することで、ユーザーのアクションに応じた柔軟な処理を実装できます。

初心者の方は、まず「An element is clicked」や「An input’s value is changed」などの基本的なワークフローを試しながら、Bubbleの操作に慣れていきましょう。