ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

独自ドメイン Bubble で SendGrid API key と Template ID を設定する

f:id:earthmash:20210928201754p:plain

こんにちは!

Bubbleとクラウドメール配信サービスSendGridの連携方法について、プラグインを使った方法を過去にご紹介しましたが、Bubbleが独自ドメインの場合異なる方法での設定が便利です。

今回は、SendGridを独自ドメインのBubbleアプリと連携するためのSendGrid API KeyおよびTemplate ID設定方法を解説します。

本記事の設定でできるようになること

  • SendGridとBubbleアプリの連携

…メールをSendGrid経由で送信できるようになり、SendGridのメールテンプレートやマーケティング機能を利用することができるようになります。

  • テンプレートの一括適用

…独自ドメインのBubbleアプリとSendGridを連携のうえTemplate IDを設定すると、Bubbleから送信されるメールにテンプレートを一括で適用することができます。

※条件:独自ドメインを取得済みであること・いずれかの有料プランであること

SendGridの概要

SendGridはクラウドメール配信サービスです。目を引くデザインのテンプレートを用いたり、送信メールに対するユーザーのアクション分析などマーケティング機能を利用することで、より効果的にユーザーにアプローチできます。

SendGridの紹介・登録方法は以下の記事にまとめております。

blog.nocodelab.jp

まずはSendGridのAPI key設定方法から見ていきましょう。

SendGrid API keyの設定方法

事前準備

独自ドメインの設定

独自ドメインをお名前.com等で取得したら、BubbleのSettings > Domain/emailタブの「Domain settings」欄の「Domain name」から設定します。

f:id:earthmash:20210924173823p:plain
独自ドメインを設定

登録すると、下の「Email setteings」欄に「SendGrid API Key」の入力ボックスが出現します。ここに入力するAPI keyをこれからSendGridで取得していきます。

f:id:earthmash:20210927172111p:plain
SendGrid API入力欄

SendGridの登録

「SendGridの概要」でご紹介した記事を参考にアカウントを登録します(迷惑メールやフィッシング詐欺防止のため審査に数営業日かかるようです)。

SendGrid API keyの取得

SendGridの登録が完了したら、ログイン用ユーザー名でログインしてダッシュボードから「Settings」をクリックしてメニュー項目を表示し、「API Keys」を開きます。

f:id:earthmash:20210927172139p:plain
Settings → API Keysをクリック

「API Keys」ページで右上の「Create API Key」をクリックすると、画面右側からAPI keyの設定ページが表示されるので、「API Key Name」(Bubbleのアプリ名など)を入力し、「API Key Permissions」は「Full Access」を選択して右下の 「Create&View」をクリックします。

f:id:earthmash:20210927172221p:plain
API keyを作成
f:id:earthmash:20210927172426p:plain
API key設定画面

これでAPI keyが作成されました。API keyが表示されますのでコピーします。

作成したAPI keyの上部に記載されている通り、セキュリティ上の理由でAPI keyは二度と表示されないとのことですので、忘れずにどこかにメモしておいてください。

f:id:earthmash:20210927172454p:plain
API keyが作成されました

API keyのコピー・メモが完了したら、「Done」をクリックします。

すると、先ほどは何も表示されていなかった「API Keys」ページに今作成したAPI keyが表示されていますね。

f:id:earthmash:20210927172527p:plain
「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の接続の完了です。

f:id:earthmash:20210927172838p:plain
Connected!

これでAPI keyの設定は完了です。

Template IDの設定方法

さて、API keyの設定が完了しましたが、ここで「SendGrid API Key」の下に新たに「Template ID(optional)」と「Emails sent by your app come from…」という入力ボックスが出現したことにお気づきでしょうか。

f:id:earthmash:20210927172902p:plain
出現した2つの入力ボックス

こちらを設定することでさらに送信メールを一括カスタマイズすることができます。

  • 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」でもありません。こちらはマーケティングメールを作成するときに利用するテンプレートです。

f:id:earthmash:20210928174903p:plain
青字の「legacy dynamic templates」をクリック

「Legacy Transactional Templates」というページが表示されたら、メッセージ下部の白地の「Create a Legacy Transactional Template」ボタンをクリックします。

※こちらも、青字の「Transactional Template」というボタンではないのでご注意を!

f:id:earthmash:20210928175018p:plain
白地の「Create a Legacy Transactional Template」をクリック

以下のようなTemplateの作成ページが表示されたら、「Name」欄にテンプレートの名前を入力してください。今回は「Bubble Send Email Template v1」とつけました。

名前を入力したら、右側の「Save」ボタンをクリックして保存します。

f:id:earthmash:20210928175121p:plain
テンプレートに名前をつけて保存

「Legacy Transactional Templates」というページに、今作成したテンプレートが保存されていますね。 テンプレート名の下に記載されているIDが今回使用するTemplate IDになります。

※ちなみに、こちらのページは左側メニューの「Email API」>「Legacy Templates」から表示することができます。

f:id:earthmash:20210928175329p:plain
Legacy Templateは「Email API」>「Legacy Templates」から確認できます。

さて、今のままではテンプレートの中身がありませんので、Template ID以下にある「Add Version」をクリックして作成します。

f:id:earthmash:20210928175208p:plain
Template IDが発行。Add Versionをクリック

編集方法の選択画面が出てきたら、Design Editorを選択して右上の「Continue」をクリックし、編集ページに進みます。

f:id:earthmash:20210928175303p:plain
編集方法の選択

さて、Bubbleの「Domain/email」の「Template ID」に設定するテンプレートには、「<%body%>」(カッコ除く)が含まれている必要がありますBubble公式ドキュメント「Domain/email」より)。

テンプレートには「<%body%>」がデフォルトで含まれているようですので、そのまま残しておきます。

なお、デフォルトの「<%body%>」(メール本文)と「<%subject%>」(メールタイトル)にはBubbleのWorkflow等で設定する動的値が代入されます。

今回はテスト用のため、デザインや細かい設定は行いません。「Template Name」に適当な名前を入力し、上部の「Save Template」をクリックして保存したら左上端の「←」をクリックして戻ります。

f:id:earthmash:20210928175458p:plain
Templateを作成

戻ってきた「Legacy Transactional Templates」ページに先ほど作成したTemplate Versionが追加されているはずです。

これでSendGridの設定は完了です。Template IDをコピーします。

f:id:earthmash:20210928175526p:plain
Template IDをコピー

Bubbleで設定

BubbleのSettings > Domain/email タブに戻ります。 先ほどコピーしたTemplate IDを「Template ID」の入力ボックスに貼り付け、SendGrid API key入力ボックス横の「Verify Sendgrid key」をクリックします。

f:id:earthmash:20210928184522p:plain
Template IDを貼り付け

「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の設定が優先されます。

f:id:earthmash:20210928193252p:plain
テスト用ページにメール送信ボタンを配置

f:id:earthmash:20210928193347p:plain
「Send Email」の設定

Previewで「メール送信ボタン」をクリックしてメールを実際に送信します。

送信されたメールを確認

送信されたメールを確認すると、「Domain/email」およびactionでの設定がきちんと反映されていることがわかります。

f:id:earthmash:20210928193447p:plain
送信されたメールを確認!

ちなみに、「Send Email」のアクションの設定で「Do not apply a Sendgrid template」をチェックすると、そのactionに限ってテンプレートが適用されなくなります。

f:id:earthmash:20210928193515p:plain
Do not apply a Sendgrid template

念のため、「Do not apply a Sendgrid template」のチェックなし(テンプレート適用)とチェックあり(テンプレート適用なし)のメールを比較すると、ちょっと分かりにくいですがBodyの位置と文字の大きさが異なるのが分かります。

f:id:earthmash:20210928193554p:plain
メールの比較

ここでもやはりテンプレートがきちんと適用されていることが確認できました。

終わりに

SendGridはマーケティングにとても便利なツールです。うまく使いこなしてBubbleのサービスをどんどんアップデートしていきましょう!

参考情報

  • Bubble Forum より

forum.bubble.io

  • 【無料プラン・Bubbleドメインユーザー向け】SendGridプラグインの使い方

blog.nocodelab.jp