ノーコード ラボ

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

Bubble で SendGrid を使ってみる

f:id:yksmt:20200427135121p:plain

SendGrid を bubble で使いたい

前回に引き続き、SendGrid 関連の記事となります。

当 nocodelab でお馴染みの bubble ですが、こちらの Plugin 機能を使って SendGrid 経由で bubble からメールを送信することができます。

今回は、そのやり方についてご説明いたしますね。

まずは下準備

  1. SendGrid でアカウントを作成します。こちらは、前回のブログ記事をご参照ください。

  2. SendGrid の Settings メニューを選択します。API Keys をクリックし、Create an API Key のボタンをさらにクリック。生成された API Key をコピーします。

  3. Bubble の Plugins にて、Sendgrid をインストールします。 f:id:mariechen:20191228113120p:plain

  4. インストールしたプラグイン一覧より、SendGrid を選択します。API Key を入力する箇所があるので、SendGrid にて生成したAPI Key を貼り付けます。 f:id:mariechen:20191228113732p:plain

ここまでで下準備完了です。 では、次は送信するメールのテンプレートを作成してみましょう。

SendGridでメールテンプレートを作成する

メールテンプレートは SendGrid 側にて作成しますので、SendGrid に戻ってください。 左側のメニューより Templates/Legacy を選択します。 f:id:mariechen:20191224223314p:plain

右上の[Create Template]ボタンをクリックし、テンプレートに名前を付けます。 保存[Save]すると ID が表示されます。

次に、テンプレートの中身を作成します。 [Add Version]をクリックすると、画面右側から新しいウィンドウが出てきますので、デザインエディターを選択して[Continue]をクリックします。

f:id:mariechen:20191224224056p:plain

今回は Bubble で SendGrid を使用するテストですので、メールのテンプレートに関しては割愛いたします。 適宜、好みのメールを作成してみてください。 画面の左側に、テンプレート名をいれる欄がありますので[ Template Name ]、こちらに適当なテンプレート名を入力します。

f:id:mariechen:20191226061215p:plain

[Save]ボタンを押し、左上の[<-]ボタンを押して元の画面に戻ります。

元の画面は Legacy Transactional Templates というページになりますが、こちらに今作成したテンプレート名がリストに表示されているはずです。 ID keyも表示されていますので、こちらのIDをコピーしておきます。

f:id:mariechen:20191226061710p:plain

Bubble側での作業

では、Bubbleに戻っていよいよ作業の仕上げです。

ボタンを押すとメールを送信するという、簡単なワークフローでテストしてみましょう。

Workflowにて、Plugins を選択すると、SendGrid のアクションが表示されるようになっています。

今回は、[SendGrid - Send email]を選択してみます。

f:id:mariechen:20191228114332p:plain

テンプレートの Type は Legacy を選択します。

TemplateID欄には、SendGrid で取得した TemplateID を入力しましょう。

Contentには適当な Subject, From Name, From Email Address, To Email Address を入力します。

以上で準備は完了です!

Bubble の Preview 画面より、メールを送信するボタンをクリックしてみると、メールが送信できることが確認できます。

どうでしょう、思ったより簡単に送信できると思いませんか?

Bubble から SendGrid 経由でメールを送信することにより、SendGrid の様々な機能を利用できることになります。

メールは、ユーザーとの重要なコミュニケーションツールです。

SendGrid の機能を使って、良好なコミュニケーションをユーザーと行う。この記事がその一助になれば幸いです。

おすすめ記事

以下の記事では、Bubble と他のサービスを連携させる方法をご紹介しています!

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp