こんにちは！
EPICs株式会社です。
今回は、Bubbleの「Workflow」の中にある、「Elements」メニューの使い方について解説します。
※こちらの記事は、これからBubble開発を勉強し始める方に向けた、初学者向けの記事となります。
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
Workflow – Elementsメニューとは？
BubbleのWorkflow – Elementsメニューは、ページ内の特定のエレメント（ボタン、入力フォーム、アップローダーなど）が特定のアクションを実行したときに、対応するワークフローを発動するためのメニューです。
このメニューを活用すると、ボタンがクリックされたときや、フォームの値が変更されたとき、エラーが発生したときなどに、自動で処理を実行できます。
今回は、基本的な3つのWorkflowについて、具体的な設定方法と活用例を解説していきます。
各Workflowの詳細な使い方
An element is clicked
※写真1枚
概要：
- 特定のエレメントがクリックされたタイミングでワークフローを実行します。
具体的な設定方法：
- Workflowメニューで「An element is clicked」を選択。
- 対象のボタンやリンクを選択。
- 例えば、ログインボタンをクリックした際に「Log the user in」のアクションを設定。
活用例：
- ログインボタンを押したときに、ユーザー認証を実行する。
- フォーム送信ボタンを押したときに、データベースに情報を保存する。
An input’s value is changed
概要：
- インプットエレメントの値が変更されたタイミングでワークフローを実行します。
具体的な設定方法：
- An input’s value is changed」を選択。
- 対象のインプットフィールドやアップローダーを選択。
- 例えば、ピクチャーアップローダーの値が変わったときに、その画像をカスタムステートに保存するワークフローを設定。
活用例：
- 入力フォームの値が変更された際に、入力チェックを行う。
- インプット内の値が変更された時に、その画像をページ上に表示する。
An element has an error running a workflow
概要：
- 特定のエレメントのワークフローでエラーが発生した際に、対応する処理を実行します。
具体的な設定方法：
- Workflowメニューで「When an element has an error running a workflow」を選択。
- 対象となるエレメント（ボタン、フォームなど）を指定。
- 例えば、ログインボタンでエラーが発生した場合に、アラートを表示する設定を行う。
ログインボタンでエラーが発生した場合にアラートを表示させるWorkflow
活用例：
- ログイン認証でエラーが発生した際に、ユーザーにエラーメッセージを表示する。
- 入力フォームの必須項目が未入力の場合に、エラーメッセージを表示する。
まとめ
Bubbleの「Workflow」 の中にある「 Elements」メニューを活用することで、ユーザーのアクションに応じた柔軟な処理を実装できます。
初心者の方は、まず「An element is clicked」や「An input’s value is changed」などの基本的なワークフローを試しながら、Bubbleの操作に慣れていきましょう。
