【Bubble】SendGridプラグインを使った、メール配信の実装方法
概要
Bubbleでは作成したアプリからメールを配信できます。Workflowには最初から「Send email」というactionが存在しますが、こちらは送信数に上限が課せられています。この解消方法として、メール配信サービスのSendGridと連携することが挙げられます。
今回はプラグインを使用し、SendGridと連携したメール配信の実装方法を紹介します。
ℹ️ Send emailの送信数の上限については、公式ドキュメントをご参照ください。
ℹ️ Bubbleアプリにドメインを設定している方は、プラグインを使わずにSendGridでのメール配信を実装できます。 詳細は公式ドキュメントをご参照ください。
SendGridプラグインを使った、メール配信の実装方法
完成イメージ
送信先メールアドレスを入力し、送信ボタンを押します。
![](https://swooo.net/wp-content/uploads/2023/03/01スクリーンショット-2023-03-12-21.27.52.png)
入力したメールアドレス宛に、SendGridで設定したメールが送信されました。
![](https://swooo.net/wp-content/uploads/2023/03/02スクリーンショット-2023-03-12-21.50.37.png)
1. SendGridに登録する
まずSendGridに登録します。
新規登録へ進み、メールアドレスを入力します。
![](https://swooo.net/wp-content/uploads/2023/03/03スクリーンショット-2023-01-21-23.03.13.png)
確認メールから登録を続け、登録を完了します。
画面に記載の通り、登録情報の審査に通るとログインできるようになります。
![](https://swooo.net/wp-content/uploads/2023/03/04スクリーンショット-2023-01-22-1.03.07.png)
今回は、翌日にメールが届きました。
メールに記載の情報を使い、無事にマイページにログインできました。
ダッシュボードへ移動しておきます。
![](https://swooo.net/wp-content/uploads/2023/03/05スクリーンショット-2023-03-11-22.45.37.png)
2. テンプレートを作成する
メールの本文内容を含んだテンプレートを作成します。
Email API > Dynamic Templatesへ移動し「Create a Dynamic Template」をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/06スクリーンショット-2023-03-12-20.28.38.png)
任意のテンプレート名を入力し「Create」をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/07スクリーンショット-2023-03-12-20.30.28.png)
「Add Version」より、メールの内容を作成します。
![](https://swooo.net/wp-content/uploads/2023/03/08スクリーンショット-2023-03-12-20.31.57.png)
お好みのデザインを選択します。今回は空白のテンプレートを選択します。
![](https://swooo.net/wp-content/uploads/2023/03/09スクリーンショット-2023-03-12-20.36.41.png)
メールの構築方法は「Design Editor」を選択します。パーツのドラッグ&ドロップで直感的に構築できます。
![](https://swooo.net/wp-content/uploads/2023/03/10スクリーンショット-2023-03-12-20.40.56.png)
メール内容を構築します。今回はテキストのみを配置してみます。
Buildタブを選択し「Text」をドラッグ&ドロップします。
![](https://swooo.net/wp-content/uploads/2023/03/11スクリーンショット-2023-03-12-20.54.09.png)
本文の内容を入力します。フォントや色も指定できます。
編集を終えたらテキストエディタを閉じます。
![](https://swooo.net/wp-content/uploads/2023/03/12スクリーンショット-2023-03-12-21.01.24.png)
Subject(件名)に”{{subject}}”と入力します。こうするとBubble側で件名を入力できます。
最後に「Save」で保存し編集完了です。前画面へ戻ります。
![](https://swooo.net/wp-content/uploads/2023/03/13スクリーンショット-2023-03-12-21.27.28.png)
Template IDはBubbleでの設定で使うので、コピーしておいてください。
![](https://swooo.net/wp-content/uploads/2023/03/14スクリーンショット-2023-03-12-20.31.57-1.png)
3. APIキーを取得する
ダッシュボードにて、Settings > API Keysへ移動します。
![](https://swooo.net/wp-content/uploads/2023/03/15スクリーンショット-2023-03-11-22.46.45.png)
「Create API Key」を押し、APIキーを作成します。
![](https://swooo.net/wp-content/uploads/2023/03/16スクリーンショット-2023-03-11-22.46.55.png)
任意の名前を設定し、アクセス権限を選択します。今回は「Full Access」としました。
「Create & View」を押し、作成完了です。
![](https://swooo.net/wp-content/uploads/2023/03/17スクリーンショット-2023-03-11-22.48.38.png)
APIキーが表示されるので、コピーしておきます。
4. プラグインをインストールする
続いてBubbleにて、プラグイン「SendGrid」をインストールします。
![](https://swooo.net/wp-content/uploads/2023/03/18スクリーンショット-2023-03-11-23.23.13.png)
「API Key」項目に、先ほどコピーしたAPIキーを入力します。
![](https://swooo.net/wp-content/uploads/2023/03/19スクリーンショット-2023-03-10-9.02.05.png)
5. メール送信機能を実装する
Designタブにて、InputとButtonを配置します。
続けて送信ボタンのWorkflowを設定します。
![](https://swooo.net/wp-content/uploads/2023/03/20スクリーンショット-2023-03-12-21.57.00.png)
When | Step | 意味 |
---|---|---|
Button 送信 is clicked | Plugins > SendGrid – Send email | SendGridでEメールを送信する |
SendGrid – Send emailのプロパティを設定します。
「Template ID」には、SendGridのダッシュボードで取得したTemplate IDを設定します。
「Subject(件名)」「From Name(送信元の名前)」「From Email Address(送信元のメールアドレス)」に任意の値を入力します。
![](https://swooo.net/wp-content/uploads/2023/03/21スクリーンショット-2023-03-12-21.28.16.png)
「To Email Address(送信先のメールアドレス)」は「Input 送信先メールアドレス’s value」を設定します。
![](https://swooo.net/wp-content/uploads/2023/03/22スクリーンショット-2023-03-12-21.28.26.png)
以上で設定は完了です。
プレビューにてメールを送信してみると、SendGridからのメールが届きました。