Bubbleで繰り返し処理を実装！プラグインを使わない実装方法を紹介

こんにちは、ファンリピートの徳丸です。

今回は、Bubbleでプラグインを使わずに繰り返し処理を実装する方法や、そのメリットについて紹介していきます。

はじめに

本記事は、bubble.ioの有料プランでのみ使用可能な、バックエンドワークフローでの処理を採用しています。

こちらは2週間のトライアル期間でも利用可能な為、是非こちらを利用して試してください。

bubbleとは？

URL:https://bubble.io/blog/content/images/2020/09/Logo-with-clearspace.png

・コードを書かずにアプリを作ることができる

一般的なWebサービスやWebアプリの開発では、プログラミングコードを書くといったイメージがありますが、ノーコードツールBubbleでは名前の通り、ノーコードで開発できるサービスとなっています。また、クラウドプラットフォームというサイト上でアプリケーションを構築することができるので、インターネットがあればいつでもどこでもアクセスすることができるため、チームで連携してアプリを作ることができます。

繰り返し処理とは？

繰り返し処理とは、プログラミングにおいて「for文」や「while文」といった命令を繰り返し実行することを指します。

この記事では、これらの処理を疑似的にbubble内で実装する方法を紹介していきます。

バックエンドワークフローで実装を行う理由

bubbleでは、数多くの優秀なプラグインが開発されており、繰り返し処理を実行するためのプラグインも存在します。

そんな中で、今回バックエンドワークフローでの実装を採用する理由をご紹介します。

• より柔軟な実装が可能で、拡張性も高い
• プラグインへの依存性が無い為、プラグインがアップデートやサポート終了した際でも問題無く動作ができる
• 繰り返し処理が可能なプラグインは有料のものになる為、コストを削減することができる

繰り返し処理の実装方法

今回は、繰り返し処理を使って同じ単語を持つ文章をリスト化します。

それぞれのデータを格納するために、下記のようなテーブルを作成しておきましょう。

text_dataのOriginal_textには文章が格納されます。

separate_dataのwordには単語が格納され、text_data_listにはその単語を含んでいるtext_dataが紐づけられます。

API workflowの設定

まず、bubbleで繰り返し処理を行う為に、API workflowを使用していきます。

Backend workflowで「new API workflow」を作成後、「add a new parameter」で取得するパラメータを追加します。

今回はword（単語のリスト）とoriginal_text_data（text_data）をそれぞれ設定します。

アクションの設定

次にワークフロー内のアクションを作成していきます。

wordに同じtextが格納されているseparate_dataにtext_dataを格納するアクションを作成します。

ただ、この状態ではseparate_dataが無い場合には格納されない為、格納する為のseparate_dataを作成します。

これでseparate_dataにwordを格納するためのワークフローの作成は完了です。

しかし、このままでは最初の単語のデータには紐づけられても、2つ目以降の単語は紐づけられません。

繰り返し処理の設定

2つ目以降の単語も紐づける為に、単語の数だけ今までで作成したフローを繰り返して実行したいです。

なので、Step3で今まで作成したAPI workflowを呼び出します。

original_text_dataには同じoriginal_text_dataを入れます。

wordの方は、今度は二番目の単語を参照したい為、現在のリストから一番目のwordを削除したリストを入れます。

こうすることで、常にリストの一番目を参照し続けても、毎回新しい単語を参照することになります。

このままでは、リストが空になっても繰り返し処理が行われてしまう為、workflowの条件に「wordのリスト数が0より多い時」と入力しておきましょう。

以上で、繰り返し処理の完成です。

動作確認

正常に動作するか確認するために、フロント側のフローを作成していきます。

DesignにMultilineInputとButtonをそれぞれ配置し、ボタンを押下したら入力した内容を含んだtext_dataを作成します。

次に、先程作成した繰り返し処理を呼び出すアクションを設定していきます。

originai_text_dataにはStep1で作成したtext_dataを、wordにはtext_dataのoriginal_textを空白で区切った単語のリストをそれぞれ定義します。

下図のような正規表現を使うことで、簡単に文章を空白で区切った単語のリストにすることができます。

今回は確認用で、適当に作成した英文を10個、入力しました。

text_dataは下図のようになっています。

作成した英文のうち5個には「Tokyo」が含まれているため、wordが「Tokyo」のseparate_dataに文章が5個格納されていれば、上手く動作できている、と言えます。

出力された結果を見ると、英文が4個しか格納されていません。

これは、格納されていない「My favorite restaurant is located in Tokyo.」の「Tokyo.」がピリオドを含んで別のSeparate_dataに格納されてしまったのが原因だと考えられます。これらは、「find & replace」等を組み込むことで解決することができるでしょう。

改善の余地はありますが、繰り返し処理自体は正常に動いていることが分かります。

まとめ

今回は、bubble.ioで繰り返し処理をバックエンドワークフローで実装する理由から、その実装方法まで紹介しました。

バックエンドワークフローを活用することで、より高度な処理が可能となり、開発の幅が広がります。

今後も、このような便利機能やTipsを紹介していきます。