こんにちは。ファンリピートの鳴海です。
今回はbubbleで再帰的にスケジュールされたワークフローを用いて1000件以上の更新処理を実施する方法について解説いたします。
bubbleとは?

URL:https://bubble.io/blog/content/images/2020/09/Logo-with-clearspace.png
コードを書かずにアプリを作れる
一般的なWebサービスやWebアプリの開発では、プログラミングコードを書くといったイメージがありますが、ノーコードツールBubbleでは名前の通り、ノーコードで開発できるサービスとなっています。
また、クラウドプラットフォームというサイト上でアプリケーションを構築できるので、インターネットがあればいつでもどこでもアクセスができるため、チームで連携してアプリを作れます。
bubbleについての詳細は「ノーコードツール「Bubble」って?特徴・料金・使い方を解説」という記事でも解説しておりますので、気になる方は一度ご覧になってみてください。
Bubble APIとは?
API (Application Programming Interface)は、ソフトウェアシステム同士を接続するための仕組みです。
APIは、あるソフトウェアの「鍵」を提供し、他のソフトウェアがその「鍵」を使って機能を呼び出すことができるようにします。例えば、Twitter APIを使用すると、他のアプリケーションからTwitterの機能を呼び出すことができます。
APIを使用することで、開発者はWebサイトやアプリケーションの機能を拡張したり、外部サービスと連携したりすることができます。
Backend workflowとは?
APIのエンドポイント、スケジュールされた処理、バッチ処理など行うシステムです。
通常のworkflowではリダイレクト処理、ページ読み込み時の処理、データ操作などができます。
backend workflowの特徴としては、全ページに対して処理ができます。
詳しくはこちらの記事をご覧ください。
再帰的な処理とは?
繰り返し処理をするという意味です。
Bubbleを使った再帰的な更新処理のメリット
Bubbleを使った再帰的な更新処理は、非常に効率的でスムーズな更新処理を実現することができます。
この方法は、大量のデータを一度に更新することができるため、より多くの業務効率を向上させることができます。
また、再帰的な処理を行うことで、データベース内のデータを更新することができます。これにより、データの一貫性と信頼性が向上し、より正確な情報を手に入れることができます。
Bubbleを使った再帰的な更新処理の使用例
例えば下記のような例となります。
顧客からのメールや電話などの情報を取得し、顧客レコードを自動的に更新することができたり、販売ステータスの自動更新: 顧客からの問い合わせや受注状況などの情報を元に、顧客の販売ステータスを自動的に更新することができます。
銀行口座からの自動取引データの取り込みや収入と支出の自動トラッキング、資産ポートフォリオの自動更新など、ファイナンスアプリで再帰的に行われる更新処理には、定期的な収益の自動計算、自動的なバランスシートの更新、複数の収益ソースからの自動的な収入の計算などを自動的に更新することができます。
人事管理システムでは、従業員のステータスや給与情報を自動更新することができます。具体的な例としては以下のようなものがあります。
・従業員のステータスの自動更新(正社員、契約社員、アルバイトなど)
・従業員の給与情報の自動更新(基本給、賞与、ボーナスなど)
・従業員の評価履歴の自動更新(パフォーマンス評価、スキルアップなど)
これらの情報は定期的に更新され、人事管理システムを通じて確認することができます。
Bubbleで再帰的な更新処理の設定方法
では具体的にどのようにBubbleで行っていくのか?
解説していきます。
Bubbleでは1000件までの標準搭載されているRecursive eventの処理と再帰的な処理を行うためのカラムを追加して、1000件以上の更新処理を行うという2つの方法があります。
1つ目は、Backend workflowのreccuing eventという処理。
こちらは対象のリストを指定の更新処理を行うことができます。
ですが、1000件までしか行うことが出来ません。

2つ目は、処理を行うためにカラムを追加して、再帰的な処理を行う方法です。
対象のカラムが空である場合、そこにデータを追加していき、空ではなくなるまで処理を行うといった内容になります。
Backend workflowにAPI workflowで、ボタンを押したとき、下記の画像のように処理を行います。

その次に繰り返し行うよう、同じAPI workflowを行うようにschedule API workflowで指定するという方法となります。

Reccruing event、1000件以上の処理のそれぞれについて解説していこうと思います。
Reccruing eventについて詳しく解説!
Reccuing eventは対象のリストをscheduleし、処理を行うという内容です。
但しBubbleのReccuing eventは、productionプラン以上ではないと毎日処理行ったりなど、日程を指定ができなかったり、1件のみ処理を行うことができないので、注意してください!
私は今回、personalプランで検証しております。
デモ動画
こちらの動画は、Todoのタスクで期日が過ぎたタスクのステータス未完了、期日をリセットするという内容になります。
786件のタスクがありますが、ボタンを押すことで、未完了かつ期日がリセットされ、1件減っていることが確認できると思います。
データ設計
データ設計としては、Taskというテーブルを追加して、下記の通りになります。
カラム名 | データ型 |
id | number型 |
title | text型 |
status | Option sets(status) |
deadline_date | date型 |
Option setsは画像のように、statusを追加して、未完了、進行中、完了という3つを追加しています。
※Colorは一覧で標準する時に、それぞれのステータスごとに色を変更するために表示するために設定しているので、無視してもOKです。

データのセット
下記の1500件ほどあるCSVをダウンロードして、Dataタブからアップロードします。
※件数を減らしたい場合、下記のCSVファイルの行を減らせばOKです。
ダウンロードが終わったら、データタブに行き、Uploadをクリックします。

Pick a file uploadをクリックして、ファイルをアップロードしたら、Typeをtaskにして、Map fieldsを押します。

間違っていなければ、Validate dataをクリックします。

Uploadを教えて、少し待てばOKです。

フロント側の設定
Repeating groupを設置して、Data sourceをDo search forで期限が今日より前、ステータスが完了以外を条件にして、リスト化します。

次にスケジューリングするためのボタンを設置します。

Backendの設定
New API workflowを選択します。

プライバシールールを無視する欄にチェックを入れて、KeyにはTaskとしていれて、Typeも同じようにします。

未完了に変更し、期日を空欄にするように設定します。

New recurring eventを選択します。

適当にAPIの名前を決めて、Type of thingはUserで問題ありません。

Schedule API workflow on a listを選択します。

List to run onに一覧で表示したRepeating groupのデータソース、Scheduled dateは任意の日付、API workflowには先ほど作成した処理を設定します。

最後にボタンをクリックした時の処理を追加すればOKです。

1000件以上の処理について詳しく解説!
こちらはTaskにchange_dataとchanged_dateというカラムを追加して、同様にAPIのworkflowの設定をすればOKです。
デモ動画
こちらの動画は、change_dataがない100件ほどあるTaskのデータがchaged_dataにデータ入れる更新処理によって、数が減っているような動画となります。
動画のため、100件にしております。1000件でも可能でした。
データ設計
データ設計としては、Taskに下記の通りにカラムを追加します。
カラム名 | データ型 |
changed_data | text型 |
title | text型 |
change_date | date型 |
データ設計と実装方法
データ設計としては、テキストエレメントとボタンを配置します。

空の件数を取得するためにDo search forでTaskのchage_dataが空のものを取得します。

Backend workflowで、新しくAPI workflowを作成し、データ更新で、それぞれ現在の日時を挿入するようにします。

次にその処理を繰り返すように、Schedule API workflowで同じものを指定して、Schedule dateは現在日時を指定します。

only whenには空ではなくなるまで、処理を繰り返すようにdo search forで設定します。

最後にボタンをクリックした時に、API workflowが実行されるように設定します。

まとめ
今回は再帰的に1000件以上の更新処理を行う方法について解説致しました。
backendはAPIでの処理となるため、やや動作が重くなってしまうところが弱点かと思いますが、毎晩更新処理を行わせるといった方法であれば問題ないのかなと思います。