[bubble] 再利用ができる要素の作成とworkflow

Bubbleの再利用ができる要素とは、複数のページで利用できる要素グループを作成する方法のことです。

例えば、Webページの共通ヘッダー・フッター、サイドメニュー、広告枠、お知らせ枠などを想像して貰えばわかると思います。

Bubbleはページをどんどん追加してアプリを構築していきますが、共通化できるものがあればできる限り再利用ができる要素を作った方が良いです。

ページが増えれば増えるほどメンテナンスが大変になっちゃいます

では実際に再利用ができる要素を作成し、ページに配置してみます。

再利用ができる要素の作成

BubbleアプリのDesignページを開き、New reusable element をクリックして作成していきます。

クリックするとポップアップが起動するので必要情報を入力します

Clone fromは、他の再利用ができる要素をベースにして作成するときに選択します。

作成できたら編集ページに移動するので、あとはページと同様に要素を作成する、workflowを定義するなどの操作を行います。

再利用ができる要素を配置

Reusable elementsの一覧に作成した要素があるので、それをページにドラッグアンドドロップで配置しましょう。

再利用ができる要素の中に再利用ができる要素を入れ込むこともできました。

テクニックの一つとして覚えておきたいですね。

再利用ができるworkflow

ページで共通な要素を表示させたいときに再利用ができる要素を使いますが、複数のページで再利用できるworkflowを作るときにも利用できます。 これを行うと、同じフローを複数の箇所で使用できるので設定ミスをなくしたりデバッグが捗るかと思います。

例えば、特定条件下でページリダイレクトを行う だったりに使えます。

再利用ができるworkflowを作る方法ですが、中に何も要素を含まない再利用ができる要素を作り、各ページに配置することによって可能です。

配置した後、必要に応じてThis element is visible on page loadのチェックを外して非表示にできます。

カスタムイベントを作成

中に何も要素を含まない再利用ができる要素 のworkflowでカスタムイベントを作成します。

作成後、アクションを追加します。

今回はとても単純なものにしました。indexページにナビゲートするというフローです。

再利用ができる要素のworkflowにアクセス

このworkflowを各ページのworkflowから呼び出します。

Custom eventsのTrigger a custom event from a reusable elementを使用します。

ログアウト状態なら 再利用ができる要素のworkflow を実行するという例です。

Reusable element には作成した再利用ができる要素を選択し、Custom eventも作成したものを選択します。

最後に

再利用ができる要素・workflowを作成して、アプリ内で共有する方法を試しました。

保守コストが大幅に下がるので是非使いこなしたい機能ですね。

本記事では紹介しませんでしたが、既存の要素を再利用ができる要素に変換することもできるのでアプリの作成途中でも一からやり直す必要がなくなるのは良いかと思います。

Converting existing elements to reusable elements