[bubble] カスタムイベントでワークフローを最適化する

bubbleのカスタムイベントとは、複数回再利用することができるワークフローを定義することです。

プログラミングでも同じような命令、ワークフロー、プログラミングコードなどがあれば、できるだけ制限することでアプリケーションをスリムにし、メンテナンスをより簡単にするとされています。

それはbubbleでも同じで、一連のアクションを繰り返している場合はカスタムイベントを使って最適化することが大事とされています。

やってみる

カスタムイベントの作成

実際に作ってみましょう。

bubbleアプリのworkflow画面で、Click here to add an eventをクリックし、Custom->Create a custom event を選択します。

Event nameに何か名前をつけます。

Type of thingsには型を定義できます。　ここを定義すると、イベントのアクション内で定義された情報にアクセスすることが可能です。

textだったら、アクション内でCurrent Workflow text といったようにしてアクセスします。

イベントを追加したら、何かアクションを選択していきます。

本記事では適当なものを選択していますが、このアクションの部分が共通化できる内容となります。

カスタムイベントの呼び出し

では、作ったカスタムイベントを呼び出してみましょう。

呼び出すには、ワークフローにアクションを追加します。

Custom Events -> Trriger a custom eventを選択します。

Custom eventに作成したイベントが一覧で出てくるので呼び出したいものを選択します。

Workflow thingsは、カスタムイベントにType of thingsを設定している場合に設定する必要があります。

これでカスタムイベントの呼び出しも完了です。 Previewで動作を確認してみてください。

複数のページで同じカスタムイベントを呼び出したい場合

先ほどは特定のページのワークフローにカスタムイベントを追加しました。

別のページでそのカスタムイベントを呼び出そうとしても、選択肢に現れないので使えません。

そういった場合は再利用ができる要素のワークフロー内にカスタムイベントを追加することで全てのページからアクセスできるようになります

Headerという名前の再利用ができる要素にカスタムイベントを作成した例です。

呼び出すには、ワークフローにアクションを追加します。

Custom Events -> Trigger a custom event from a reusable elementを選択します。

上記のように、カスタムイベントを設定した要素を選択すると、カスタムイベントを選択できるようになります。

最後に

カスタムイベントの作成と呼び出しをやってみました。

同じアクションをイベントごとに追加していると時間もかかるし面倒です。　　カスタムイベントにしてしまうことでアプリの作成時間が結構削減されますし、何かエラーがあった時のデバッグも捗ると思われます。

こういう便利な機能はbubbleを使う上で覚えておいて損はしないですね。