《Bubble》Backend Workflowを使ったバッチ処理の実装方法

Backend Workflowを使ったバッチ処理の実装方法

今回は複数のメールアドレス宛に一斉にメールを送るバッジ処理の実装方法を紹介します。

1. エレメントを配置

はじめに簡単なUIを作成していきます。

Inputを1つ、Multiline Inputを1つ、Buttonを2つ配置します。

Inputにはメールアドレス、Multiline Inputにはメールの本文内容を入力します。

続いてRepeating Groupを配置し、その中にTextを配置していきます。

このRepeating Groupは送信先のメールアドレス一覧を表示するために必要です。

2. Custome stateを設定

メールアドレス一覧を保存するために、今回はCustom Stateを使います。

Custom Stateはデータを一時的に保存したい時に便利ですがページが更新されると保存したデータは消えてしまうので注意してください。

Custom Stateを設定するためにはRepeating Groupのプロパティ上部のインフォメーションマークをクリックし、「Add a new custom state」を選択することで追加できます。

今回は「addressList」という名前で、typeはtext型にします。またメールアドレスは複数追加できるようにしたいのでリストにチェックをしてstateを作成します。

Repeating Groupのプロパティにて、Type of contentはcustom stateの値と同一である必要があるため「text」、Data sourceも先ほど作成したCustome Stateに保存された値を表示したいのでRepeatingGroup text’s addressList」とします。

Repeating Group内のTextには「Current cell’s text」を表示します。

これでaddressListのメールアドレス一覧をRepeating groupで表示できるようになりました

3. API workflowを作成する

続いてBackend workflowsのページにて、バッチ処理の内容であるAPI Workflowを作成します。

まずSettingsタブのAPIへ移動し「Enable Workflow API and backend workflows」にチェックが入っていることを確認してください。

次にBackend workflowから「New API workflow…」を選択し、API workflowを作成します

次にAPI workflowのプロパティを設定していきます

API workflow nameには任意の名前を設定します。ここでは「send email」としました。

更にParameter definitionを設定します。「Add a new parameter」から新しく2つ追加します。

これを設定することによってworkflowを実行する際に必要なデータ(この場合だとメールアドレスとメール本文）を受け取ることが可能になります

具体的にはプレビューで送信ボタンをクリックした際に、このAPI workflowを呼び出し、addressとcontentのパラメータを渡せるようになります。

続いて、用意した情報をもとに何をして欲しいか（action)の設定をしていきます。

メールを送る、というactionを実行して欲しいのでSend emailというactionを選択して送り先(To)に上で用意したメールアドレスを、body(本文)にcontent(メール本文)を入れます。

これでバッチ処理の内容であるAPI workflowを作成が完了しました。

あとはこのAPI workflowを発動させるトリガーを設定するだけです。

4. Workflowを設定する

Frontendに戻り、2つのButtonのWorkflowを設定します。

メールアドレスを一覧へ追加

まずは「追加」ボタンを押すと記入したメールアドレスが一覧へ追加される、という機能を実装していきます。

追加ボタンのプロパティから「Start/Edit workflow」を押し、Workflowを作成します。

Set stateを利用してinput メールアドレスの値をcustom state “adress list”に追加していきます。

先ほども説明した通り、Set stateを利用するとデータをエレメントやページ内に一時的に保存でき、set stateはそれを実行するactionになります。

Custom stateの中には既に複数のメールアドレスが仮保存されている可能性があるので、それらに入力したメールアドレスの値を追加する、ということになります。

続いて引き続きメールアドレスをスムーズに入力できるようにしたいのでinputメールアドレスの値を空にするということを行うためにReset relevant inputsを選択します。

以上でメールアドレスを追加する実装は完了です。

API Workflowをトリガー

続いて「送信」ボタンです。これを押すと、メールを登録したメールアドレスに送信する処理が実行されるようにしていきます。

エレメントを配置したページに戻り、送信ボタンのプロパティから「Start/Edit workflow」を押し、Workflowを作成します。

Step1にて、先ほど作成したAPI Workflowを呼び出します。

Type of thingsはCustom Stateの型と合わせる必要があるので「text」に、List to run on（メールを送る対象のリスト）は「RepeatingGroup text’s addressList」です、これによってメールが一覧に登録したメールアドレスに送信されます。

呼び出すAPI Workflowは「send email」（先ほど設定した、API Workflowの名前）です。

Scheduled dateは、今回はボタンを押した5分後とするので「Current date/time + (minutes):5」とします。

Intervalは、処理(この場合はメール送信）と処理との間隔です。今回は0秒としますが、1処理に時間がかかる場合は調整が必要です。

また、各パラメータに値を渡します。

登録されたメールアドレスの情報を送るためにaddressには「This text」を選択します、これはすなわち「RepeatingGroup text's List of texts」を意味します。またメール本文の情報を送るためにcontentには「MultilineInput 本文内容’s value」を設定します。

Step2では次回のメール入力をスムーズにするために、また視覚的に送信が完了したということをわかりやすくするために入力したメール本文を空にします。

Step3では、同じ理由でメールアドレス一覧を空にします。

対象のCustom stateはRepeating Group textの持つaddressListを選択し、Valueを空のままにしておくことで値を削除できます。Custom stateを使うときはSet stateで値を空にしておけばそれ以前に持っていた値を削除できる、ということを覚えておくと良いでしょう。

以上で実装が完了したので、プレビューで確認しましょう。

メールアドレスと本文内容を入力し、送信ボタンを押してください。5分後にメールが届いたら成功です。メールを一斉送信するというバッチ処理を動作できました。

注意すべき点

ここまでバッチ処理を利用してメールを複数の宛先に送る、という実装を紹介してきましたが注意すべき点としてこれはメールの一斉送信と同じなのでメールの受信者それぞれが他の受信者のメールアドレスを確認できてしまう、というプライバシーの観点での問題があります。

これを避ける方法としては一斉にメール送信をするのではなく繰り返し処理を使用してメールを個別に送信する、という方法があります。

この方法を用いるとバッチ処理と比較して時間はかかるものの、ユーザーのプライバシーを守れるという利点があります。

繰り返し処理の方法については別で説明している記事があるのでそちらをご確認ください。