.bubble x SendGrid メールをもっと効率的に
こんにちは！NoCode学生会会長のRyoです！
今回はメールサーバーのSendGridをbubbleと連携させてbubbleサービスのメールをさらにカスタマイズする方法をお教えします！
それでは早速行ってみましょう！
SendGridとは？
SendGridとはbubbleでデフォルトで使われているメールサーバーです。
SendGrid(https://sendgrid.kke.co.jp/)のサービスでしっかりとメールテンプレートを作成することでbubbleでのメールシステムをさらに効率的にカスタマイズすることができます。
ここではbubbleとSendGridの接続方法だけでなくSendGrid側のメールテンプレートの作り方も説明していきます。動的値にも対応可能ですのでご安心ください！
SendGridプラグインをインストールしよう！
まずはbubbleエディタにSendGridプラグインをインストールしていきましょう！
bubbleエディタ左側のPluginタブより右上の[+ Add plugins]をクリックしてプラグイン追加画面に行きましょう
フィルタに[SendGrid]と入力するとこのような画面が出てきます。
今回は制作者欄に[By Coplit]と書かれたSendGridプラグインを使用していきます。
右下の[Install]ボタンをクリックしてDONEして先程のプラグイン管理画面に戻りましょう
プラグイン管理画面にこのようにSendGridプラグインの設定画面が登録されていれば成功です。
bubbleエディタでお問い合わせフォームを作成する
プラグインが無事にインストールできたら続いてデザインエディタの設定です。
今回は簡単なお問い合わせフォームを使って説明をしたいと思います。
今回はこんな感じのシンプルなお問い合わせフォームを作ってみました。
メールアドレスのContent formatをTextからEmailに変更するのを忘れずに…
そうしましたら下の送信ボタンのワークフローを設定していきましょう。
ワークフロー設定画面に移ったら送信ボタンのワークフローをPluginsタブの[SendGrid - Send email]をクリックして追加します。
これでワークフロー追加は一旦終わりです。
実際のサービスで使用する際はSend emailの後にもう一つ[Reset inputs]のワークフローをつけておくとより良いと思います。
SendGridでAPI Keyを生成する
いよいよSendGridの出番です。
下記リンクからSendGridページに行ってまずは新規登録を済ませましょう。
※SendGridは新規登録の際アカウントの審査があるので、登録許可が降りて実際に使用できるまで数日かかります
NoCode学生会のアカウントは残念ながらSendGridのアカウントを持っていないので今回は会長のRyoのアカウントを使用していきます！
SendGridにログインできたらまずはAPI Keyを生成していきましょう。
左側のメニューバーのSettingsタブのAPI KeysをクリックしAPI Keyの管理画面に行ったら、右上の[Create API Key]でAPI Keyを生成していきます。
プラグイン生成画面はこんな感じです
API Key Nameにわかりやすい名前を設定し、API Key Permissionsを[Full Access]にしておきましょう
入力が済んだら右下の[Create & View]をクリックしてAPI Keyを生成します
API Keyが生成できたらこんな感じの画面にとび、灰色で囲っている部分にAPI Keyが表示されます。
※注意書きにも書かれていますが、API Keyが全文表示されるのはこの画面でのみですので絶対に忘れずにメモしておくようにしましょう
API KeyのコピーができたらDoneをクリックして続いて動的テンプレートの作成に移ります。
SendGridで動的テンプレートを作成する
API Keyが生成できたらいよいよメール本文となる動的テンプレートの作成です。
動的テンプレートはサイトのフォームなどでユーザーが入力した値によって送信するメールの内容が変わるものです。
SendGridで動的テンプレートを作成するにはまず、左側のメニューバーのEmail APIタブのDynamic Templatesをクリックして動的テンプレート管理画面に行き、右上の[Create a Dynamic Template]をクリックしましょう
Dynamic Template Nameが入力できたら右下のCreateをクリックして動的テンプレートを作成しましょう
先程のテンプレート管理画面にプラグインりょうさんのテンプレートが追加されました。
まだテンプレートの中身を作っていないので展開するとこんな感じで空っぽです。
左上のTemplate IDは後ほどbubbleに入力するのでメモっておきましょう
ではテンプレートの中身を作っていくので真ん中下の[Add Version]ボタンをクリックします
Select a Designの画面に行ったらYour Email DesignのBlank Templateを選択
Select EditorはDesign Editorを選択しましょう
この画面になったら成功です。これがテンプレート作成画面です
さてここまで行って思ったでしょう
『どうやって作るん？』
SendGridのテンプレート構築はどことなくNoCode臭があって独特です
まずは左上のVersion Nameをわかりやすい名前に変えて、Subjectに{{subject}}と入力しましょう
これでbubbleのワークフローでこの後設定するSubjectがメール送信時自動で適用されます。
さていよいよ本文の作成です。
左側のBuildタブに移り[ADD MODULES]からエレメントを選んで右側の[Drag Module Here]にドラッグ＆ドロップします。
今回はTextのみのメールテンプレートを作成しますが、実際にサービスで使用するときは、bubbleで送っているとは思えないハイクオリティなメールテンプレートを作っても面白いと思います
Text Moduleはこんな感じです。フォントや色など自由にカスタマイズができます。
今回のメールテンプレートはこんな感じにしてみました。
※SendGridはオートセーブ機能がついていません。なので毎回忘れずに左上の[Save]ボタンでセーブするようにしてください。
動的値をつけたい箇所には何かしらの固有名を自分で決めて、{{固有名}}とすると動的値の設定ができます。
メールのコンテナサイズを変更するときはBuildタブのGlobal StylesのCONTENT CONTAINERにて設定ができます。
リンクの設定などもできますのでもっと突き詰めたい方はSendGridのドキュメントなどを読んでみてください。
bubbleのワークフロー メール設定
さていよいよ大詰めです。先程作った動的テンプレートをbubbleに設定してワークフローを完成させましょう。
前のセクションでワークフローに追加したSendGridのSend emailワークフローの設定画面です。
まずはTypeが[Dynamic]になっていることを確認してください。
つづいてTemplate IDに先程作成した動的テンプレートのTemplate IDを入力してください
※テンプレートIDを入力するとき、IDの前後にハイフンが入ってしまってないかよく確認してください。エラーの元となります
Subject,From Name,From Email Address,To Email Addressをそれぞれ入力しましょう。
僕は今回こんな感じで設定しました。
続いては動的値の設定です。
設定項目を下の方へスクロールすると[Substitution Tags]という項目があります。ここで動的値の設定をすることができます。
下の[Set another key / value]をクリックするとインプットフォームが追加されると思います。
こんな感じでSendGrid側で設定した固有名に合わせて動的値を設定します。
これでワークフローの設定は完了です。
続いてAPI Keyを設定しましょう。
bubbleエディタのPluginタブに移動し、SendGridの設定画面を開きます。
SendGridプラグインのAPI KeyにSendGridで生成したAPI Keyを入力してください
※この時もTemplate ID同様に前後にハイフンなどがないことを確認してください
※Authorization についてはSendGridプラグインはなくても機能するので特に入れなくて大丈夫です。versionによっては元々ないものも存在します。
これでSendGridでのメール作成は終了です
メール送信テスト
実際にメールを送信してテストしてみましょう。
こんな感じでメールを送信してみようと思います
無事メールが届きました！
こんな感じでbubbleのメールをSendGridを使って自由度高くカスタマイズすることができます。
ぜひみなさんも試してみてください！！
あとがき
【お知らせ】学生限定NoCodeオンラインサロン「NoCode学生会」をローンチしました！
12月は1ヶ月間の会費無料キャンペーン中で、1月からさらに機能を充実させた有料プランも始まります。
プログラミングに触れたことのない学生さんでも初心者から実際に案件に携わるまで徹底サポートいたします。申し込みは下記リンクにて！！
今回のプラグインりょうさんはいかがだったでしょうか
もしこんなプラグインレビューしてほしいとかbubbleのここが気になるなんてことがありましたらどしどし質問やコメントいただけますと取り上げますのでご連絡ください！
では次回のプラグインりょうさんでまた会いましょう！