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

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

こちらの記事では、Bubble開発における大事な基礎部分となるworkflowの「General」の使い方についてまとめています。

下記にて、「General」の各要素ごとに解説しておりますので、是非ご参考ください。

※今回の記事は、Bubble開発の超基礎編であり、これからBubble開発を始める方向けの記事となります。

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

1. Workflowとは？

BubbleのWorkflowは、ボタンがクリックされたり、ページが読み込まれたりといった特定の「イベント」が発生したときに、アクション（処理）を自動で実行する仕組みです。

Workflowを理解することで、フォームの送信、ページ遷移、データの保存・更新といったさまざまな動作をノーコードで実装できるようになります。

今回は、Workflowの中でも「General」に含まれる基本機能について、実例を交えながら詳しく解説します。

2. Workflow – Generalメニューの概要

WorkflowのGeneralメニューには、アプリ全体で頻繁に使用する基本的なアクションが含まれています。

項目	概要
User is Logged In / Logged Out	ユーザーのログイン状態に応じた処理を実行
Page is Loaded	ページが読み込まれたタイミングで処理を実行
Do Every X Seconds	指定した間隔で処理を繰り返し実行
Do When Condition is True	指定した条件が満たされた時に処理を実行
An Unhandled Error Occurs	エラーが発生した際に処理を実行

3. 各Workflowの詳細な使い方

User is Logged In / Logged Out

ユーザーが、ログイン状態・ログアウト状態のときに実行する Workflow を設定し、画面を動かします。

• User is Logged In：ユーザーがログインしている場合にWorkflowを実行
• User is Logged Out：ユーザーがログアウトしている場合にWorkflowを実行

具体的な設定方法：

1. Workflowメニューで「User is Logged In」を選択。
2. 「ナビゲーション」アクションを追加し、ログイン時にダッシュボードページへ遷移する設定を行う。
3. 「User is Logged Out」の場合も同様に、ログインページに遷移する設定を行う。

活用例：

• ログイン状態に応じたページ遷移の制御。
• ユーザーのステータスに応じた表示内容の変更。

「User is Logged Out」のWorkflowで遷移先をログイン画面にすることで、ログアウトユーザーがアプリを開いた際に上記のサインイン画面が表示される。

「User is Logged In」のWorkflowで上記画面へ遷移するように設定すると、ログインユーザーがアプリを開いた際に上記画面が表示される。

Page is Loaded

ページがロードされたタイミングで実行するWorkflowを指します。

具体的な設定方法：

1. Workflowメニューで「Page is Loaded」を選択。
2. 「データ変更アクション」（make chang to thing）を追加し、カウントデータを+1する処理を設定。
3. 「表示の更新」アクションを追加し、最新データを表示するよう設定。

活用例：

• ユーザーの訪問回数をカウントする。
• チャットページで最新メッセージの日付を表示。

Do When 5 Seconds

指定した時間（デフォルトは5秒）ごとにアクションを実行するWorkflowの設定です。

具体的な設定方法：

1. Workflowメニューで「Do When 5 Seconds」を選択。
2. 秒数を設定し、例えば5秒ごとにポップアップが表示されるようにする。
3. 「データの更新」や「ページリフレッシュ」アクションを設定し、最新情報を取得できるようにする。

活用例：

• チャットアプリの自動更新。
• 定期的に通知を表示する。

Do When Condition is True

該当のページを開いたさいに、指定した条件が満たされるとアクションを実行するWorkflowです。

具体的な設定方法：

1. Workflowメニューで「Do When Condition is True」を選択。
2. 条件を指定（例：ユーザーのアカウントステータスが”有効”の時にWorkflowが実行される など）。
3. 「アクションを実行」設定で、条件が満たされた時にポップアップを表示。

An Unhandled Error Occurs

エラーが発生したときに実行するWorkflowです。

具体的な設定方法：

1. Workflowメニューで「An Unhandled Error Occurs」を選択。
2. 「アラート表示」アクションを設定し、エラーメッセージを出す。
3. Workflow内でエラーが起きたときに、上記のアラート表示させるWorkflowを実行るよう設定。（Catch→Any Workflow error など）
4. 未登録のユーザーがログインボタンを押したときのログインができないというエラーに対して、アラートが表示される

BubbleのWorkflow「General」メニューは、アプリの基本的な動作を制御する重要な機能です。

Workflowの動作を理解していき、Bubble開発に慣れていきましょう！