ファンリピート社のブログFR note

Custom eventの機能まとめ!Workflowをリファクタリングしよう!

custom_eventのヘッダーイメージ

こんにちは、ファンリピートの鈴木です!

今回はノーコードツールの1つであるBubbleの機能にある「Custom event」についてまとめていきたいと思います。これを利用してできるだけ楽しましょう。

目次

\ ホワイトペーパー /
ローコード・ノーコード開発が理解できる資料集

【下記の4点の資料が無料でダウンロードできます】

  • 基礎知識の解説
  • 開発事例集
  • おすすめノーコードツール13選
  • ローコード・ノーコード開発会社比較

Bubbleとは?

URL:https://bubble.io/home/apps

プログラミングの知識がなくてもウェブアプリケーションやモバイルアプリケーションを開発できる、強力なノーコードプラットフォームです。このツールを使用することで、ユーザーはドラッグアンドドロップのインターフェースを通じて、データベースの設定、ユーザーインターフェースのデザイン、そしてロジックを作成できます。特に、複雑な機能を持つカスタムウェブアプリケーションの開発を可能にすることで知られています。

Custom eventとは?

ユーザーが定義した条件に基づいて特定のアクションを実行する強力なツールです。この機能は、アプリの再利用性を高め、複雑なロジックを簡単にし、将来的な拡張が容易になります。

簡単に説明すると、グループ化するイメージです。例えば飲食店で、ごはんと焼き魚と味噌汁の定食があったとします。この注文を受けるときに毎回、ごはんと焼き魚と味噌汁それぞれを入力する場合と、グループ化されている焼き魚定食を入力する場合どちらが楽でしょうか。もちろん後者かと思います。Custom eventとは、複数回行われる処理を定食にするようにグループにまとめることです。

Custom eventの作成方法

まず作成方法ですが、以下の手順で作成できます。

Custom event作成手順イメージ

左のサイドバー上から2番目のWorkflowタブをクリック

Click here to add an event…をクリック

Customにカーソルを合わせる

Create a custom event…をクリック

すると、以下のWorkflowが作成されます。

作成されたCustom eventのイメージ

設定できる値については以下でまとめていきます。

設定できる値について

Custom eventにはEvent name・Parameters・Return valuesを設定できます。それぞれまとめていきたいと思います。

Event name

作成するCustom eventに名前を付けるためのスペースです。この名前は、Custom eventを識別するために使用され、他のWorkflowからこのCustom eventを参照する際に使います。Custom eventの機能やトリガー条件を表す名前を設定し、参照しやすくしましょう。

Parameters

Custom eventに渡す情報やデータを定義するパラメータを指定できます。これらはイベントのトリガー時に値を受け取り、Custom event内で使用できます。

Custom eventのParametersのイメージ
  • Name
    • パラメータの識別名。この名前を使用してイベント内で参照します。
  • Type
    • パラメータのデータ型。

Return values

Custom Eventは、処理の結果として値を返すこともできます。この戻り値は、Custom event以降の他のアクションで利用できます。

Custom eventのReturn valuesのイメージ
  • Label
    • 戻り値の識別名。この名前を使用してイベント以降で参照します。
  • Type
    • 戻り値のデータ型。

トリガーの種類

WorkflowにCustom eventをトリガーさせようとすると以下4つのトリガー方法を設定できます。

Custom eventのトリガーの種類イメージ

それぞれの概要を以下にまとめます。

Trigger a custom event

Custom eventを直接トリガーするためのアクションです。Workflow内で特定のアクションが発生したときに、これを選択することで、事前に定義したCustom eventを実行できます。

Trigger a custom eventのイメージ

Schedule a custom event

将来の特定の時点でCustom eventを実行するようにスケジュールできます。Delay (seconds)に値を入れることで、その秒数分遅らせて実行できます。

Schedule a custom eventのイメージ

Trigger a custom event from a reusable element

reusable elementで設定しているCustom eventをトリガーする際にこのオプションを使います。これにより、複数のページで同じ処理のCustom eventを管理できるようになります。Custom event専用のreusable elementを作成するのも1つの方法かもしれません。

Trigger a custom event from a reusable elementのイメージ

Trigger a custom event when data changes

データベース内のデータが変更された時にCustom eventをトリガーするためのオプションです。データが更新されたことに基づいて特定の処理をしたい場合に便利です。

これを利用するには、以下のようにCustom eventのParametersに対象とするデータを設定する必要があります。

Trigger a custom event when data changesのイメージ

そして次に、トリガーするときの設定で以下のように、対象のデータとフィールドを設定します。そうすることでこの場合は、Current Userのnameフィールドの値が変更されたときにトリガーされます。

Trigger a custom event when data changesの設定例のイメージ

値の渡し方

最後に値の渡し方についてまとめていきます。例として、以下のようにParametersとReturn valuesを設定したとします。

  • Event name
    • schedule
  • Parameters
    • Name
      • 予約時間
    • Type
      • date
  • Return values
    • Label
      • リマインド時間
    • Type
      • date

Parametersの渡し方

まず、設定したCustom eventをボタンクリックでトリガーさせます。

その際に、Parametersの設定ができます。これは固定値でも、以下のようなWorkflow内の値を設定することも可能です。

Parametersの渡し方イメージ

Return valuesの渡し方

まず、Custom event内にReturn dataを設定します。以下の場所にあります。

Return values - Return dataの設定イメージ

すると以下が作成されますので、ここでReturn valuesに値を設定できます。こちらもParameters同様に固定値でも、以下のようなCustom event内の値を設定することも可能ですが、利用方法のほとんどが後者だと思います。

Return valuesの渡し方イメージ

今回は、Only whenに使っていますが以下のように設定することで、Return valuesを渡せます。

Return valuesの設定イメージ

まとめ

今回は、Custom eventについてまとめました。Workflowで同じ処理だなと思ったときはぜひCustom eventにまとめてみましょう。そうすることで、Workflowが簡潔になり、以降の実装の時間短縮にもなるので、この機会に挑戦してみましょう。

\ ホワイトペーパー /
ローコード・ノーコード開発が理解できる資料集

【下記の4点の資料が無料でダウンロードできます】

  • 基礎知識の解説
  • 開発事例集
  • おすすめノーコードツール13選
  • ローコード・ノーコード開発会社比較
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる