こんにちは！
Bubbleとクラウドメール配信サービスSendGridの連携方法について、プラグインを使った方法を過去にご紹介しましたが、Bubbleが独自ドメインの場合異なる方法での設定が便利です。
今回は、SendGridを独自ドメインのBubbleアプリと連携するためのSendGrid API KeyおよびTemplate ID設定方法を解説します。
本記事の設定でできるようになること
- SendGridとBubbleアプリの連携
…メールをSendGrid経由で送信できるようになり、SendGridのメールテンプレートやマーケティング機能を利用することができるようになります。
- テンプレートの一括適用
…独自ドメインのBubbleアプリとSendGridを連携のうえTemplate IDを設定すると、Bubbleから送信されるメールにテンプレートを一括で適用することができます。
※条件：独自ドメインを取得済みであること・いずれかの有料プランであること
SendGridの概要
SendGridはクラウドメール配信サービスです。目を引くデザインのテンプレートを用いたり、送信メールに対するユーザーのアクション分析などマーケティング機能を利用することで、より効果的にユーザーにアプローチできます。
SendGridの紹介・登録方法は以下の記事にまとめております。
まずはSendGridのAPI key設定方法から見ていきましょう。
SendGrid API keyの設定方法
事前準備
独自ドメインの設定
独自ドメインをお名前.com等で取得したら、BubbleのSettings > Domain/emailタブの「Domain settings」欄の「Domain name」から設定します。
登録すると、下の「Email setteings」欄に「SendGrid API Key」の入力ボックスが出現します。ここに入力するAPI keyをこれからSendGridで取得していきます。
SendGridの登録
「SendGridの概要」でご紹介した記事を参考にアカウントを登録します（迷惑メールやフィッシング詐欺防止のため審査に数営業日かかるようです）。
SendGrid API keyの取得
SendGridの登録が完了したら、ログイン用ユーザー名でログインしてダッシュボードから「Settings」をクリックしてメニュー項目を表示し、「API Keys」を開きます。
「API Keys」ページで右上の「Create API Key」をクリックすると、画面右側からAPI keyの設定ページが表示されるので、「API Key Name」（Bubbleのアプリ名など）を入力し、「API Key Permissions」は「Full Access」を選択して右下の 「Create&View」をクリックします。
これでAPI keyが作成されました。API keyが表示されますのでコピーします。
作成したAPI keyの上部に記載されている通り、セキュリティ上の理由でAPI keyは二度と表示されないとのことですので、忘れずにどこかにメモしておいてください。
API keyのコピー・メモが完了したら、「Done」をクリックします。
すると、先ほどは何も表示されていなかった「API Keys」ページに今作成したAPI keyが表示されていますね。
これでBubble用SendGrid API keyの取得は完了です。 続いて、Bubble側で設定を行います。
Bubbleで設定
API keyを取得したので、Bubbleに戻って keyを入力します。
「独自ドメインの設定」で確認した通り、BubbleのSettings > Domain/email タブ、「Email setteings」欄の「SendGrid API Key」に先ほどコピーしたAPI keyを貼り付けます。
貼り付けたら、「SendGrid API Key」入力ボックス右横の「Verify Sendgrid key」をクリックしてください。「Connected!」と表示されたら、BubbleとSendGridの接続の完了です。
これでAPI keyの設定は完了です。
Template IDの設定方法
さて、API keyの設定が完了しましたが、ここで「SendGrid API Key」の下に新たに「Template ID(optional)」と「Emails sent by your app come from…」という入力ボックスが出現したことにお気づきでしょうか。
こちらを設定することでさらに送信メールを一括カスタマイズすることができます。
- Template ID
…BubbleからSendGrid経由で送信するメールのテンプレートID。以降の段落で設定方法を解説します。
- Emails sent by your app come from…
…メールの送信元アドレス。Bubbleドメインの場合、送信元メールアドレスは「BUBBLENAME-no-reply@bubbleapps.io」となりますが、独自ドメインの場合、ここで送信元メールアドレスを独自ドメインを用いて@以前を設定することができます。デフォルトでは「admin@独自ドメイン」になっています。
※Sender name…メール差出人の表示名。今回は「ノーコードサポート」としました。
では、Template IDの設定方法を解説します。
Template IDの取得
SendGridの「Legacy Transactional Template」を使用します。まずは新たにTemplateを作成する必要があります。
SendGridのダッシュボードに戻って左のサイドメニューから「Email API」をクリックし、表示されたメニュー項目から「Dynamic Templates」をクリックします。すると「Dynamic Templates」ページに表示される「Create your first dynamic template」というメッセージ内に、青字の「legacy dynamic templates」部分がありますのでこちらをクリックします。
※「Create a Dynamic Template」という青地のボタンではありませんのでご注意を！また、「Marketing（LEGACY）」>「Template」でもありません。こちらはマーケティングメールを作成するときに利用するテンプレートです。
「Legacy Transactional Templates」というページが表示されたら、メッセージ下部の白地の「Create a Legacy Transactional Template」ボタンをクリックします。
※こちらも、青字の「Transactional Template」というボタンではないのでご注意を！
以下のようなTemplateの作成ページが表示されたら、「Name」欄にテンプレートの名前を入力してください。今回は「Bubble Send Email Template v1」とつけました。
名前を入力したら、右側の「Save」ボタンをクリックして保存します。
「Legacy Transactional Templates」というページに、今作成したテンプレートが保存されていますね。 テンプレート名の下に記載されているIDが今回使用するTemplate IDになります。
※ちなみに、こちらのページは左側メニューの「Email API」>「Legacy Templates」から表示することができます。
さて、今のままではテンプレートの中身がありませんので、Template ID以下にある「Add Version」をクリックして作成します。
編集方法の選択画面が出てきたら、Design Editorを選択して右上の「Continue」をクリックし、編集ページに進みます。
さて、Bubbleの「Domain/email」の「Template ID」に設定するテンプレートには、「<%body%>」（カッコ除く）が含まれている必要があります（Bubble公式ドキュメント「Domain/email」より）。
テンプレートには「<%body%>」がデフォルトで含まれているようですので、そのまま残しておきます。
なお、デフォルトの「<%body%>」（メール本文）と「<%subject%>」（メールタイトル）にはBubbleのWorkflow等で設定する動的値が代入されます。
今回はテスト用のため、デザインや細かい設定は行いません。「Template Name」に適当な名前を入力し、上部の「Save Template」をクリックして保存したら左上端の「←」をクリックして戻ります。
戻ってきた「Legacy Transactional Templates」ページに先ほど作成したTemplate Versionが追加されているはずです。
これでSendGridの設定は完了です。Template IDをコピーします。
Bubbleで設定
BubbleのSettings > Domain/email タブに戻ります。 先ほどコピーしたTemplate IDを「Template ID」の入力ボックスに貼り付け、SendGrid API key入力ボックス横の「Verify Sendgrid key」をクリックします。
「Verify Sendgrid key」の代わりに「Connected!」と表示されたらTemplate IDの設定も完了です。
SendGrid経由で設定したテンプレートでメールが送信されるはずです。
メールを確認
Send Emailの設定
設定が反映されているか実際にメールを送信して確認してみましょう。
テスト用ページにメール送信ボタンを配置し、Workflowでボタンクリックのactionとして「Send Email」を選択します。
アクションの設定として、「Subject」に「テストメール」、「Body」に「テストメールです。」を設定します。sender nameは、「Domain/email」で設定したSender nameが適用されるのでここでの入力は不要です。
※actionで「Domain/email」の設定と異なるSender nameを設定した場合、actionの設定が優先されます。
Previewで「メール送信ボタン」をクリックしてメールを実際に送信します。
送信されたメールを確認
送信されたメールを確認すると、「Domain/email」およびactionでの設定がきちんと反映されていることがわかります。
ちなみに、「Send Email」のアクションの設定で「Do not apply a Sendgrid template」をチェックすると、そのactionに限ってテンプレートが適用されなくなります。
念のため、「Do not apply a Sendgrid template」のチェックなし（テンプレート適用）とチェックあり（テンプレート適用なし）のメールを比較すると、ちょっと分かりにくいですがBodyの位置と文字の大きさが異なるのが分かります。
ここでもやはりテンプレートがきちんと適用されていることが確認できました。
終わりに
SendGridはマーケティングにとても便利なツールです。うまく使いこなしてBubbleのサービスをどんどんアップデートしていきましょう！
参考情報
- Bubble Forum より
- 【無料プラン・Bubbleドメインユーザー向け】SendGridプラグインの使い方
