おすすめ記事

おすすめ記事一覧

Bubble・カスタムイベントの使用とプログラミング時のヒント

ノーコードでWebアプリ作成 ~Bubble編~|濱口 まさみつ|note

ごきげんよう。いかがお過ごしでしょうか。オフィス勤務・リモートワークどちらのみなさんもお疲れ様です。学生は学期末の試験期間で多忙でしょうか。今日は、ノーコードツールbubble内でカスタムイベントの使い方とプログラミングをする際のヒントの2点について紹介します。別の記事でちらっと触れましたが、カスタムイベントはbubbleの3つのイベントのうちの一つで、繰り返し使うワークフローに有効なイベントです。記事の後半ではプログラミング時のヒントについて解説します。それでは張り切ってLet’s Go!

カスタムイベントの使用

カスタムイベントは、複数回再利用可能なワークフローをページ内に定義する方法です(より専門的な用語では「関数」と表現されます)。

使用事例

プログラミングの一般的なルールとして、bubbleであろうと伝統的なコード駆動型言語であろうと、余剰な命令やワークフロー、コードの行はできるだけ制限されていており、これは、アプリケーションのスリム化に役立ち、デバッグ、修正、メンテナンスをはるかに容易にしています。

 複数のワークフローで同じロジック、つまり同じアクションを繰り返している場合、複数のワークフローでトリガーする「カスタムイベント」を使用することで、デザインを最適化することができます。 例えば、ユーザーがサービスにサインアップする方法が2つあり、サインアップフローでは、単にユーザーにサインアップするだけでなく、電子メールの送信や分析なども行う場合、カスタムイベントの最適な候補となります。カスタムイベントの中で繰り返される一連のアクションを移動させ、ユーザーがサインアップする両方のワークフローでTriggerカスタムイベントアクションを使用します。

カスタムイベントを定義する

カスタムイベントの定義は、通常のワークフローの定義に似ています。イベントを選択し、アクションを追加します。ここでのイベントタイプは「カスタムイベント」で、他のイベントと同様に、条件を適用することができます。1 つの特定のフィールドは、このワークフローのためにモノのタイプを定義する機能です。モノとデータ型については、「データを扱う」で詳しく説明します。従来のプログラミング言語に慣れている人にとっては、カスタムイベントは関数であり、送信するデータはパラメータと比較することができます。カスタム イベントのモノのタイプは、アプリで定義したデータベース タイプ、またはテキスト、数値などの単純なタイプがあります。

カスタム・イベントのモノのタイプを定義するとすぐに、次のアクションで表現コンポーザーでこのモノにアクセスできるようになります。例えば、カスタムイベントがユーザーを取る場合、「このワークフローのユーザーのメール」にメールを送信できるようになります。この式は、トリガーアクションで実際に送信されたユーザーで評価されます (以下を参照してください)。同じカスタムイベントを複数のページで再利用したい場合は、カスタムイベントを再利用可能な要素に追加できます。複数のページで同じカスタムイベントを再利用したい場合は、再利用可能な要素にカスタムイベントを追加することができます。

カスタムイベントをトリガーする

カスタムイベントを定義したら、このワークフローを使用するためにいくつかのアクションをワークフローに追加することができます。トリガーカスタムイベントアクションを選択するだけです。

モノのタイプが定義されている場合、各アクションに送信するモノを選択する必要があります。そのタイプは、ワークフローレベルとして定義されたタイプと一致している必要があり、タイプの不一致は問題としてフラグが立てられます。また、この項目はオプションではなく、埋めなければならないことに注意してください(カスタムイベントが「現在のワークフロー項目」にアクセスする可能性があるため)。

カスタムイベントをスケジューリングする

また、カスタムイベントをスケジュールして後から発生させることもできます。カスタムイベントをトリガーすることと、遅延0でカスタムイベントをスケジューリングして後から発生させることに何か違いがあるのかと疑問に思うかもしれませんが、 これには、はっきりとした違いがあります。  親ワークフローにいくつかのアクション、「カスタムイベントのトリガー」アクション、さらにいくつかのアクションがあるとします。親が「トリガー」アクションを実行すると、親は一時停止してカスタムイベントが完了するのを待ってから後続のアクションを実行します。これは、カスタムイベントがその前のアクションで何が起こったかのコンテキストを親のワークフローで見ることができるという点で便利です。対照的に、カスタムイベントの発生を遅延 0 でスケジュールした場合、カスタムイベントは親ワークフローの残りの部分と並行して実行されます。 つまり似たようなこの2つは、実行の順で差を生み出しているということです。  

実行

ワークフローが実行モードでトリガーされ、カスタムイベントアクションをトリガーすると、最初のワークフローが一時停止し、カスタムイベントが完了するまで実行され、最初のワークフローが再開されます。デバッガを使用することで、設定に苦労している場合に、アクションの流れを理解するのに非常に役立ちます。

以上ここまでがbubble内でカスタムイベントの使い方についての説明でした。ここからはプログラミング時のヒントの説明になります。

プログラミングをする際のヒント

アプリがより複雑になるにつれて、いくつかのページでは多くのワークフローを持つようになるかもしれません。ワークフローを整理するのに役立つツールが bubble のワークフロータブに追加されました。

ワークフローの整理整頓

ナビゲーションのワークフロー、データ操作のワークフローなど、ワークフローをフォルダで整理するのに便利です。タブバーの横にある矢印をクリックすると、フォルダビューが表示されます。作成したさまざまなフォルダを確認したり、新しいフォルダを作成したり、削除したりすることができます。フォルダを作成したら、各ワークフローにフォルダを割り当てることができます。フォルダをクリックすると、そのフォルダ内のワークフローが表示されます。ワークフローに色を割り当てることもできます。ワークフローの色は純粋に視覚的なものであり、ワークフローの実行には影響しません。ページの整理に役立つ特定の色をワークフローに割り当てると便利です。

bubbleは、イベントやアクションの名前を自動的に生成しますが、プロパティエディタのタイトルバーをクリックすることで、これらの名前を変更することができます。 要素(エレメント)と同様に、ワークフローに名前を付けることは、長期的には有用である ことがわかります。

ショートカット

ワークフローがページ要素に依存するようになると、デザインタブとワークフロータブを行ったり来たりすることになります。コンテクストメニュー(要素やイベント、アクションを右クリック)を使用して、「ワークフローの表示」または「要素の表示」のいずれかを選択することができます。これにより、ワークフローまたは編集中の要素(エレメント)にリンクされている要素(エレメント)がエディタでハイライトされます。いくつかの要素(エレメント)のプロパティエディタの「ワークフローの開始/編集」ボタンは、ワークフロータブに移動して、ユーザーが現在の要素と対話したときに実行されているワークフローを見るためのもう一つのショートカットです。

まとめ

今回はbubble内でカスタムイベントを使う際のポイントとプログラミングをする際のいくつかのヒントをまとめて記事にしました。ワークフローにおいて、何か繰り返して行う場合には、このカスタムイベントを使えるようになっておくと仕事が短時間で効率的に行えるようになると思います。それではまた別の記事でお会いしましょう。Good Bye!

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. 記事作成

    Bubble・データを保存する&データタブ

  2. 記事作成

    Bubbleのテンプレートの使い方&(ベータ版)Figmaからのインポート(取り込み)

  3. Adalo Resource・Google Admobとカレンダー(スクリーンとコンポーネントセクシ…

  4. 記事作成

    【ブログ運営者必見】サイトにCTAを設置できる「HelloBar」をご紹介!

  5. Adalo Resource・Google Playストアへの公開

  6. Adalo Resource・マジックテキスト(スクリーンとコンポーネントセクション)について

  7. 記事作成

    ノーコードツールBubbleの一般的な原則

  8. Adalo Resource・Adaloで何ができる?

  9. Adalo Resource・支払いのオプション

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. タスク
  2. 勤怠管理
  3. Bubble
  4. Productivity
  5. 記事画像
PAGE TOP