ノーコード PR

【完全解説】BubbleとSendGridの連携によるメール送信

sendgrid-bubble
記事内に商品プロモーションを含む場合があります

Bubbleの「Send email」を使用していますか?使っている人の中にはメールが受信箱に到達せず迷惑メールに入ったりしてしまう点に悩まれている方が多いと推察します。

本記事ではBubbleで開発したアプリからのメール到達率を高めてくれるSendGridとの連携方法について解説していきたいと思います。

ノーコードの副業におすすめ!

エンジニア、デザイナー向けの週2、3日のお仕事紹介【ITプロパートナーズ】【公式HP】https://itpropartners.com/

  • 週3日〜の案件を数多く扱っている
  • エンド直ゆえに高単価案件が多い
  • フルリモート案件など、柔軟な働き方に対応した案件が多い
  • トレンド技術を取り入れた魅力的な案件が豊富にある
  • 専属エージェントが希望に沿った案件を紹介してくれる

\ 最短60秒で登録可能! /
無料会員登録
案件を探す

nocode-sidejob
【ノーコードWeb制作】副業の始め方とおすすめの案件獲得サイト20選「ノーコードのスキルを活かして副業収入を得たい」「ノーコードの案件を獲得するのにおすすめのサイトがあれば教えて欲しい」このような方向けに本記事ではノーコードツールを使った副業の始め方と土日で稼ぐのにおすすめの案件獲得サイトを紹介します。...

SendGridとは?メリットと料金プランについて

freelance-engineer-agent

SendGridは世界中で利用されているクラウドベースのメール配信サービスになります。

月間で1,000億通以上の配信実績もあり、確実なメール配信のためのインフラを支えるエキスパートが数多く在籍している点、導入事例が豊富な点からSendGridは世界的に見ても信頼できるサービスと言えるでしょう。

SendGridのメリット

Bubbleで開発したアプリでSendGridを利用するメリットは大きく以下となります。

  • メールの到達率が高い
  • 大量のメールを捌ける
  • メールデザインを変更できる
  • 送信したメールのステータスを追える

Bubbleのデフォルト設定での仕様上限については公式サイトに記載があるので、気になる方は併せて確認してみてください。

SendGridの料金プラン

SendGridの料金プラン出典:SendGrid料金プラン

Freeプランでも月間で12,000通のメールを送信することができるので、開発時はもちろん、サービスが軌道に乗るまでは無料プランでも十分対応可能と言えるでしょう。

サービスの成長に合わせてSendGridの料金プランをアップグレードしていけばOKです。有料版の料金体系もかなり良心的なので正直利用しない手はないかと個人的には思います。

SendGridの登録

programming-people

まずはじめにSendGridのユーザー登録を行いましょう。https://sendgrid.kke.co.jp/に移動して「無料ではじめる」ボタンをクリックします。

すると以下の画像のような新規会員登録画面に遷移するかと思うので、メールアドレスを入力し、規約とポリシーに同意した上で「確認メールを送付する」ボタンを押下します。

SendGridの登録

入力したメールアドレス宛に以下の画像のような本登録用のメールが届くので「ユーザ情報を登録」ボタンをクリックしましょう。

SendGrid

個人情報の入力を行ったら「登録」ボタンを押下します。すると以下の画像のように登録完了画面に遷移するかと思うので、審査結果のメールが届くまで待ちましょう。翌営業日中には連絡が来るはずです。

新規会員登録

以上でSendGridへの登録作業は完了です。

SendGridでの作業

users

以降の手順は前章で解説したSendGridのアカウント登録(仮登録ではなく本登録まで)が済んでいることを前提としております。

SendGrid API Keyの取得

SendGridにログインします。左側メニュー「Settings>API Keys」を押下すると以下の画像のような画面に遷移するので、「Create API Key」ボタンをクリックしましょう。

Create API Key

「API Key Name」に任意の値を入力し、「API Key Permissions」をFull Accessとして「Create&View」ボタンをクリックします。

SendGrid

ボタンをクリックするとAPI Keyが発行されます。表示されたAPI Keyの値は画面を閉じた後は確認することができないため、画面を閉じる前に必ず値をコピーし、メモ帳か何かにペーストしておきましょう。※後ほどBubbleのプラグインにAPI Keyの値を入力します。

API Keyの値は画面を閉じると二度と確認することができない。

Template IDの取得

次にメール本文となるテンプレートをSendGridにて作成していきましょう。※なお、テンプレートの細かな作成方法については本記事では紹介しないので、気になる方は公式ドキュメントを参照するようお願いいたします。

SendGridにログインした状態で「Email API>Dynamic Templates」を開きます。すると以下の画面に遷移するかと思うので「Create a Dynamic Template」を押下します。

Dynamic Templates

「Dynamic Template Name」に任意の値を入力して「Create」ボタンをクリックしましょう。※本記事では「bubble mail template」という名前で作成しました。

以下の画面に遷移するかと思うので、作成したテンプレートを開き「Add Version」からメール画面の作成を行いましょう。

Dynamic Templates

今回はテスト用に以下の画像ようなテンプレートとしました。{{subject}}{{name}}はBubbleから値を動的に入れるための設定になります。※今は見よう見まねでOKです。

テンプレート

テンプレートを作成したら画面上にある「Save」をクリックします。以上で、SendGrid側での作業は完了です。お疲れ様でした!

Bubbleでの作業

nocode

SendGridプラグインをインストール

Bubbleのエディタに移動したらPlugins>Add Pluginsを開き、「SendGrid」と検索しましょう。以下の画像の通りプラグインが表示されるはずなのでInstallをクリックします。

SendGridプラグイン

SendGrid API Keyの入力

Pluginsの管理画面で「SendGrid」をクリックします。すると以下の画像の通りAPI Keyを入力する欄があるので、SendGrid側の作業(前章)で取得したキーの値を入力します。

SendGridプラグイン

メール送信Workflowを組む

準備が整ったところで、Bubbleのエディタ画面より実際にワークフローを組んでいきましょう。プラグインをインストールした状態であれば以下の画像のようにワークフローとして「Plugins>SendGird – Send email」が表示されているはずなのでクリックします。

SendGridワークフロー

以下の画像の通り、各パラメータを入力していきます。Template IDにはSendGridで作成したテンプレートのIDを入力します。SendGrid側のテンプレート設定でSubjectを{{subject}}としている場合はピンクの枠で囲ったところの文字列が動的にメールに表示されることとなります。

Send Mailのワークフロー

他の必須項目である「From Name」「From Email Address」「To Email Address」に値を入力したら、Previewからワークフローを実際に動かしてみましょう。

「From Email Address」に入力したメールアドレスからSendGridで作成したテンプレートに則った形でメールが送信されていれば動作確認完了となります。お疲れ様でした!

BubbleとSendGridの連携によるメール送信|まとめ

bubble-sendgrid

ここまでBubbleで開発したアプリにSendGridを連携させて、実際にメール送信機能を実装するまでの手順について解説してきました。

メールを利用するサービスは多いはずなので、是非本記事で紹介した手順に則りSendGridとの連携をしていただければと思います。

たろう
たろう
ここまで記事を読んでいただきありがとうございました♪

当ブログでは他にもBubbleによるWebアプリ開発のTipsについて解説しているので、気になる記事がないか確認いただけると幸いです。

bubble-box
【完全解説】Boxプラグインを用いてBubbleのストレージ容量を拡張する方法ノーコードツール「Bubble」のストレージ容量はFreeプランで0.5GB、Personalプランで10GBと、お世辞にも多くないので...
stripe
【Bubble】Stripeプラグインを用いたクレカ決済の実装手順Bubbleで開発したWebアプリにStripeによる決済処理を導入するには?本記事ではStripeを活用した通常課金・返金処理、仮売上と請求確定、サブスクリプション処理とその解約処理の実装方法について解説しております。...
addtoany-share-buttons
【Bubble】AddtoAny Share Buttonsの使い方を徹底解説Bubbleで開発したWebアプリにSNS共有ボタンを設置するなら「AddtoAny Share Buttons」プラグインが便利でおすすめです。本記事ではそんなAddtoAny Share Buttonsの使い方について解説しております。...
こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です