《Bubble》メール配信の実装方法（プラグイン）
概要
Bubbleでのメール送信について
Bubbleでは、Workflowの「Send email」というactionでメールを配信できます。
配信には以下の２つの種類があります。
・共有メールアドレス
→送信元がadmin-no-reply@bubble.ioと決まっている
→SendGrid によるレート制限により、電子メールごとに最大 50 人という制限がある
・カスタムドメイン
→送信元を変えることができる
→自分の SendGrid アカウントを設定すると使える
📌SendGrid アカウントを設定する前に、使用するドメインを所有し、それを Bubble アプリに接続する必要があります。ドメインの登録について詳しくは、こちらの記事をご参照ください。
📌メール配信についてより詳しく知りたい方は、公式ドキュメントをご参照ください。
今回はプラグインを使用し、SendGridと連携したメール配信の実装方法を紹介します。
📌Bubbleアプリにドメインを設定している方は、プラグインを使わずにSendGridでのメール配信を実装できます。 詳細は公式ドキュメントをご参照ください。
メール配信の実装方法（プラグイン）
プラグインを使う実装方法
完成イメージ
送信先メールアドレスを入力し、送信ボタンを押します。
入力したメールアドレス宛に、SendGridで設定したメールが送信されました。
１．Sendgridに登録
まずSendGridに登録します。
新規登録へ進み、メールアドレスを入力します。
※会社ですでに無料プランを登録している場合は無料プランは登録できないので確認してください。
確認メールから登録を続け、登録を完了します。登録情報の審査に通るとログインできるようになります。
6時間後くらいに審査結果のメールが届きました。マイページにログインしましょう。
２．テンプレート作成
メールの本文内容を含んだテンプレートを作成します。
ダッシュボード＞Email API > Dynamic Templatesへ移動し「Create a Dynamic Template」をクリックします。
任意のテンプレート名を入力し「Create」をクリックします。
「Add Version」より、メールの内容を作成します。
お好みのデザインを選択します。今回は空白のテンプレートを選択します。
メールの構築方法は「Design Editor」を選択します。パーツのドラッグ&ドロップで直感的に構築できます。
メール内容を構築します 。今回はテキストのみを配置してみます。
Buildタブを選択し「Text」をドラッグ&ドロップします。
本文の内容を入力します。フォントや色も指定できます。
編集を終えたらテキストエディタを閉じます。
Subject（件名）に”{{subject}}”と入力します。こうするとBubble側で件名を入力できます。
最後に「Save」で保存し編集完了です。前画面へ戻ります。
Template IDはBubbleでの設定で使うので、コピーしておいてください。
３．APIキーを取得
ダッシュボードにて、Settings > API Keysへ移動します。「Create API Key」を押し、APIキーを作成します。
任意の名前を設定し、アクセス権限を選択します。今回は「Full Access」としました。
「Create & View」を押し、作成完了です。
APIキーが表示されるので、コピーしておきます。
４．プラグインをインストールする
続いてBubbleにて、プラグイン「SendGrid」をインストールします。
「API Key」項目に、先ほどコピーしたAPIキーを入力します。
５．メール送信機能を実装
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からのメールが届きました。