【Bubble】SendGridプラグインを使った、メール配信の実装方法
概要
Bubbleでは作成したアプリからメールを配信できます。Workflowには最初から「Send email」というactionが存在しますが、こちらは送信数に上限が課せられています。この解消方法として、メール配信サービスのSendGridと連携することが挙げられます。
今回はプラグインを使用し、SendGridと連携したメール配信の実装方法を紹介します。
ℹ️ Send emailの送信数の上限については、公式ドキュメントをご参照ください。
ℹ️ Bubbleアプリにドメインを設定している方は、プラグインを使わずにSendGridでのメール配信を実装できます。 詳細は公式ドキュメントをご参照ください。
SendGridプラグインを使った、メール配信の実装方法
完成イメージ
送信先メールアドレスを入力し、送信ボタンを押します。
入力したメールアドレス宛に、SendGridで設定したメールが送信されました。
1. SendGridに登録する
まずSendGridに登録します。
新規登録へ進み、メールアドレスを入力します。
確認メールから登録を続け、登録を完了します。
画面に記載の通り、登録情報の審査に通るとログインできるようになります。
今回は、翌日にメールが届きました。
メールに記載の情報を使い、無事にマイページにログインできました。
ダッシュボードへ移動しておきます。
2. テンプレートを作成する
メールの本文内容を含んだテンプレートを作成します。
Email API > Dynamic Templatesへ移動し「Create a Dynamic Template」をクリックします。
任意のテンプレート名を入力し「Create」をクリックします。
「Add Version」より、メールの内容を作成します。
お好みのデザインを選択します。今回は空白のテンプレートを選択します。
メールの構築方法は「Design Editor」を選択します。パーツのドラッグ&ドロップで直感的に構築できます。
メール内容を構築します。今回はテキストのみを配置してみます。
Buildタブを選択し「Text」をドラッグ&ドロップします。
本文の内容を入力します。フォントや色も指定できます。
編集を終えたらテキストエディタを閉じます。
Subject(件名)に”{{subject}}”と入力します。こうするとBubble側で件名を入力できます。
最後に「Save」で保存し編集完了です。前画面へ戻ります。
Template IDはBubbleでの設定で使うので、コピーしておいてください。
3. APIキーを取得する
ダッシュボードにて、Settings > API Keysへ移動します。
「Create API Key」を押し、APIキーを作成します。
任意の名前を設定し、アクセス権限を選択します。今回は「Full Access」としました。
「Create & View」を押し、作成完了です。
APIキーが表示されるので、コピーしておきます。
4. プラグインをインストールする
続いてBubbleにて、プラグイン「SendGrid」をインストールします。
「API Key」項目に、先ほどコピーしたAPIキーを入力します。
5. メール送信機能を実装する
Designタブにて、InputとButtonを配置します。
続けて送信ボタンのWorkflowを設定します。
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(送信元のメールアドレス)」に任意の値を入力します。
「To Email Address(送信先のメールアドレス)」は「Input 送信先メールアドレス’s value」を設定します。
以上で設定は完了です。
プレビューにてメールを送信してみると、SendGridからのメールが届きました。