Bubbleで宛先リストを作ってメールを送ってみた

はじめに

SendGridチームの金と中田です。
前回のブログでは、ノーコード開発ツール「Bubble」とTwillio SendGridを連携させたメール送信アプリを紹介しました。決まったテンプレートを1件の宛先に送るだけのシンプルなものでしたが、今回は、画面上で複数の宛先を追加し、好きなテンプレートを選択して一斉送信できる機能を追加してみました！その作成方法をご紹介します。

Bubbleとは？

Bubbleは、コードを書かずにWebアプリケーション開発ができるツールです。詳しい特徴は前回のブログをご覧ください。

アプリケーションの構成

今回は、画面上で宛先リストを作成し、SendGridのDynamic Transactional Templateを利用してメールを一斉送信するアプリケーションを作ります。アプリケーションの構成と機能は以下のとおりです。

• 宛先追加機能
  フォームにメールアドレスと名前を入力して追加ボタンをクリックすると、アプリケーション上にこれらの情報が登録され、宛先リストとして表示させることができます。
• テンプレート選択機能
  SendGridに保存されているテンプレートの名称をドロップダウンメニューで表示し、どのテンプレートを送信に利用するかを選択できます。
• 送信機能
  宛先リストに対し、選択したテンプレートを使ってメールを送信します。

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

手順

1. SendGridの設定

前回と同様に、APIキーとDynamic Transactional Templateを作成します。詳しい方法は各ドキュメントをご確認ください。

2. プラグインのインストール

以下の2つのプラグインをインストールします。

SendGrid

メール送信APIを使うために利用します。前回のブログと同じ手順でインストールとAPIキーの設定をしてください。

API Connector

テンプレートの情報を取得するAPIを呼び出すために利用します（このAPIは上記SendGridプラグインには含まれていません）。プラグインの追加画面で「API Connector」と検索してインストールしてください。

次の手順でAPI呼び出しの設定を行いましょう。

3. API Connectorの設定

API Connectorの設定画面で、API Nameのブロック右端にある「expand」をクリックし、詳細な設定を行います。任意のAPI名（API Name）として、今回は「SendGrid API」と入力します。

次に、利用するAPIの情報を設定します。「Add another call」をクリックします。

下記画像のようにリクエスト内容を入力します。

APIのメソッドはGET、URLはhttps://api.sendgrid.com/v3/templates?generations=dynamic を指定してください。
SendGridのAPIでは、HeaderにAuthorizationとContent-Typeの2つを設定する必要があります。AuthorizationにはBearer <APIキー>, Content-Typeには application/jsonを指定します（詳細はこちら）。

すべての情報を入力し「Initialize call」をクリックすると、以下のようなポップアップ画面が表示されます。ここでは、レスポンスに含まれるデータのうち、取得する情報とそのデータ型を指定します。今回は、テンプレートID（id）とテンプレート名（name）のみを text型で取得します。画像のように設定し、「SAVE」ボタンをクリックして保存します。

次はアプリのデザインとワークフローの作成に取り掛かりましょう。

4. アプリ画面のデザイン

まずはアプリの操作画面を設計します。Bubbleの左メニューにある「Design」画面で、以下の要素を画面に配置していきましょう。具体的な操作方法は、BubbleのLessonsをご確認ください。

1. 宛先入力用テキストボックス（名前、メールアドレス）
2. 宛先追加ボタン
3. 宛先リスト表示欄
4. テンプレート選択用ドロップダウン
5. メール送信ボタン
6. 任意のテキスト（以下の画像では「宛先リスト」という文言）

5. アプリの動作設定

宛先追加ボタンのワークフローの指定

宛先追加ボタンのクリックを契機に、入力された宛先情報をデータベースに追加する処理（ワークフロー）を作成します。

先ほど設置した宛先追加ボタンをクリックし、編集メニューにある「Start/Edit workflow」を選択します。
Workflowページに遷移したら、以下の画像の手順で「Create a new thing…」を選択します。

Create a new thingの編集メニューが表示されたら、Type > 「Create a new type…」を選択し、New typeに「Contacts」と入力しましょう。これで、宛先情報の格納先が作られました。

宛先情報は名前とメールアドレスからなります。これらを格納するフィールドを作ります。
編集メニューの「Set another field」をクリックし、「Create a new field」を選んでください。

まずは名前を格納する場所を作りましょう。以下のポップアップが表示されるので、Field nameを「Name」、Field typeに「text」を指定します。

Emailの情報を格納する場所も、同様の手順で追加しましょう。Field nameを「Email」、Field typeに「text」を指定します。

「Name」、「Email」にはそれぞれのフォームに入力された情報を格納しましょう。以下の画像のように設定してください。

これで、入力した情報を宛先リストに追加できるようになりました。

最後に、Click here to add an action… > Element Actions > 「Reset inputs」を選択し、宛先追加後に入力フォームをクリアする処理を追加します。

これでWorkflowでの設定は完了です。次に、宛先リストを一覧表示する仕組みを作成します。

宛先リストの表示

Designページに戻り、先程追加したRepeating Groupの要素をクリックして編集メニューを表示します。
以下の画像のオレンジ枠の箇所を設定します。

次に、画面左のVisual elementsから「Text」をRepeating Groupの最上部枠内にドラッグアンドドロップします。配置すると、すべての行に同じものが反映されます。

配置した「Text」をクリックすると、編集メニューが表示されます。
…edit me… >「Insert dynamic data」をクリックします。Contactsの「Name」に保存された情報を表示するよう指定します（下図参照）。

右隣にもう一つ「Text」の要素を配置し、同様の手順でContactsの「Email」を指定します。これで、一つの行に名前とそれに対応するメールアドレスが表示されるようになりました。

テンプレート情報の表示

API connectorで取得したSendGridのテンプレート名をドロップダウンで選択できるようにします。
配置したDropdownの要素をクリックし、編集メニューで以下のように各項目を設定してください。
「Choice Source」の項目は、「Get data from an external API」を選択し、API providerを「SendGrid API – GetTempID」と指定してください。

これで、ドロップダウンからテンプレートを選択できるようになりました。

送信ボタンのワークフローの指定

最後に、送信ボタンを押下すると宛先リストに対してメールが一斉送信される処理を作成します。
送信ボタンの編集メニューにある「Start/Edit workflow」をクリックしてください。
Workflow画面に遷移したら、以下の画像の手順で「SendGrid – Send email」を選択します。

「Send email」の編集メニューが表示されるので、以下のように情報を入力します。

これでアプリが完成しました！
それでは、実際に宛先を追加し、テンプレートを選択して一斉送信をしてみましょう。

6. 動作確認

画面右上の「Preview」をクリックしてください。
宛先追加からメール送信までの一連の流れを試してみましょう。実際の操作は以下の動画のようになります。

無事、リストに登録した宛先全てに、指定したテンプレートのメールが届いてることが確認できました！

まとめ

今回はBubbleとSendGridを使って一斉送信するアプリを作成しました。宛先リストの作成からテンプレートの選択、メールの送信までを1つの画面上で操作できます。このように自由にカスタマイズしてメール送信アプリケーションを作成できるので、作業効率化にも役立ちます。ぜひお試しください。