ノーコードを使って独自ドメイン宛のメール内容をメールクライアントで確認する

前回の記事でSendGrid経由でメールを送信する方法をご紹介しましたが、SendGridでは受信に相当する機能を利用して、送信されたメールの内容をメールクライアントで確認することもできます。

今回は、BubbleやIntegromat（現 Make）などのノーコードツールを使って、独自ドメイン宛のメールをSendGridで受信し、内容をメールクライアントで確認する方法をご紹介します。

※ 2022年2月に「Integromat」は「Make」へとリブランドされました。

※前回の記事

blog.nocodelab.jp

シーンと仕組みの解説
Domain Authentication設定
方法①：BubbleをPOST受信先として利用する
方法②：IntegromatをPOST受信先として利用する方法
おまけ：ZapierをPOST受信先として利用する方法
参考記事

シーンと仕組みの解説

SendGridが提供する「受信に相当する機能」とは、Parse Webhookという特定のドメイン宛のメールをSendGrid経由で受信し、さらに指定したURLにPOSTするものです。

POSTを受信するには受信アプリケーションが必要なので技術的なハードルが高くなってしまうのですが、BubbleやiPaaSを使えばノーコードでPOST先の仕組みを実現することができます。

今回の記事では、前半でBubbleを使う方法を、後半でIntegromatを使う方法をご紹介していきます。

それでは、早速見ていきましょう！

Domain Authentication設定

Parse Webhookを利用するにはまず該当ドメインのDomain Authentication設定が必要になります。

おまけですが、この設定を行うことで、SendGrid経由で送信されるメールの送信元アドレス横の「SendGrid経由」が表示されなくなります。

なお、この設定はBubbleを使う方法・Integromatを使う方法の両方に共通する設定となりますので必ず行ってください。

SendGridでの設定

SendGridにログインしたら、ダッシュボードの左側のメニューバーから「Settings」→「Sender Authentication」を選択します。

Sender Authenticationページが表示されたら、上段の「Domain Authentication」右の「Authenticate Your Domain」メッセージの下にある「Get Started」ボタンをクリックします。

はじめに、2つの質問が表示されますので回答します。

1. Which Domain Name Server (DNS) host do you use?

→DNSレジストラを選択（一覧にない／分からない場合は空欄）

2. Would you also like to brand the links for this domain?

→Link Branding(トラッキングドメイン設定)は今回の設定には関係ないので「No」を選択

2つの質問に回答したら、右下の「Next」をクリックします。

ページが変わって、「Domain You Send From」の入力欄が表示されます。ここでは、内容を確認したいメールの宛先のドメインを入力します。例えば、★★★@exampledomain.comというアドレス宛のメール内容を確認したい場合は、「@exampledomain.com」を入力します。

ドメインを入力したら、ページ右側にメールクライアントでの表示例に反映されますので確認し、問題なければ下の「Next」ボタンをクリックします。

すると、DNSレコードが表示されました。

今度は、これらのDSレコードを、ドメインレジストラの管理ページで登録します。

ドメインレジストラでの設定（DNSレコードの設定）

以下はドメインを取得したレジストラによって異なるので詳細な説明は省略します。各レジストラでの詳細な設定方法は各自ご確認ください。

お名前.comでの設定ページはこのようになります。すべてのDNSレコードを追加してください。

SendGridでの設定

DNSレコードの登録が反映されたら、SendGridのDNSレコードが表示されているページに戻ってきます（ダッシュボードから「Settings」→「Sender Authentication」→ドメインをクリック）。

※DNSレコードの反映には最大48時間かかる場合があります。

元の表示のままのページなら「I’ve added these records」をチェックしページ下部の「Verufy」をクリック、新しく表示し直したページなら右上の「Verify」をクリックします。

「It worked!」とメッセージが表示されたら、Domain Authenticationの設定は完了です。

方法①：BubbleをPOST受信先として利用する

Bubble Backend workflowの準備1

SendGridからのPOSTを受け、メールを送信するBackend workflowをBubbleで準備します。

Backend workflowの有効化

まずはBackend workflowを使える状態にします。

「Settings」→「API」タブで、「Enable Workflow API and backend workflows」をチェックします。すると、「Workflow API root URL」が表示されます。

このURLは「https://YOURDOMAIN/version-test/api/1.1/wf」の形式をとっており、末尾に「/workflow-name」をつけたものがSendGridからのPOST先URLになります。

なお、本番バージョンでは「/version-test」がないURLに変わりますので本番公開後に変更忘れのないようにしてくださいね！

※詳しくはこちら

Bubble Docsmanual.bubble.io

Backend workflowをつくる

実際にBackend workflowを作っていきます。

左上のページ選択欄で「Backend workflow」をクリックします。 Backend workflowの編集タブが表示されたら、「Click here to add a backend workflow」をクリックして「General」→「New API workflow…」を選択します。

New API workflowの編集で、 API workflow nameから任意の名前を設定します。この名前が先ほどのPOST先URLの末尾にくるので、英数小文字で設定します。今回は「sendgrid」と設定しました。

さらに、「Expose as a public API workflow」と「This workflow can be run without authentication」にチェックを入れ、「Parameter definition」は「Detect request data」を選択します。

ここまででworkflowの基本的な設定ができました。次はサンプルデータをPOST先URLに送信し、パラメータを取得します。

「sendgrid」workflowの編集ポップアップなかほどの、「Detect data」をクリックします。すると「Detecting Request Data」というポップアップの中央に「https://........../initialize」というURLが表示されていますね。先ほど「Settings」→「API」タブで確認したPOST先URLの末尾に「/initialaize」をつけたものですね。こちらがサンプルデータの送信先になりますので、このURLをコピーします。

SendGridでの設定（Inbound Parse）

「Detecting Request Data」というポップアップは開いたままでSendGridに戻ります。

画面左のメニューバーから「Settings」→「Inbound Parse」をクリックします。「Inbound Parse」のページが表示されたら右上の「Add Host & URL」をクリックします。

ここでは、あるドメイン宛に送信されたデータを変換して指定のURLにPOSTする設定ができます。以下を参考に設定してください。

Receiving Domain：メールを受信するドメイン。Domain Authenticationを設定したものから選択できます。subdomainは、メールを受信するドメインにサブドメインを付加したい場合に設定してください。（DNSレコードの設定を忘れずに！）
Destination URL：POSTを受信するURL。先ほどBubbleの「Detecting Request Data」でコピーしたURLを貼り付けます。

設定が完了したら「Add」を追加します。

ドメインレジストラでの設定（MXレコードの登録）

今度は、ドメインレジストラでメールを受信するドメインのDNSレコード（MXレコード）を追加します。

※上記の「Receiving Domain」で設定したドメインです。

手順は「Domain Authentication」と同じです。ドメインレジストラのDNSレコード登録ページで、以下の内容で登録します。

・Host：「Receiving Domain」で設定したドメイン

・Type：MX

・Value：mx.sendgrid.net

サブドメインを設定した場合はサブドメインの入力も忘れないように注意してください。

DNSレコードの登録が反映されるまで少し待ちます。

※MXレコードをSendGridに向けると、そのドメイン宛のメールが全てSendGridに配信されることになりますのでご注意ください。

サンプルデータ送信

サンプルデータを送信する準備が完了しましたので、各自メールクライアントを起動し、「Receiving Domain」に設定したドメイン宛にメールを送信します。ローカルパート（@以前）は何でも良いですが、今回は「test@...」にしてみましょう。

今回は以下のようなサンプルを送信してみました。

・送信先：test@設定したドメイン

・件名：テストメール

・本文：テストメールを送信します。

Bubble Backend workflowの準備2

送信したらBubbleに戻ります。

開いたままの「Detecting Request Data」に、送信したサンプルデータから抽出したパラメータが表示されているはずです。

ここで、各パラメータ右のドロップダウンで、パラメータのタイプを選択することができます（text/number/fileなど）。「ignore field」にすると、action設定におけるDynamic dataの候補として非表示にできます。

今回は、from（送信者）、text（本文）、subject（件名）を使うとし、それ以外はignore fieldにしました。各パラメータの下に先ほど送信したサンプルデータの該当するものが記載されているので、そちらを参考にタイプを設定してください。

※タイプはこれ以降も変更可能です。

タイプを変更したら、ポップアップ下部の「SAVE」をクリックしポップアップを閉じます。

続いて、SendGridからPOSTされたメール内容を指定のメールアドレスに送信したいので、actionに「Send Email」を選追加します。今回は以下のように設定しました。

なお、サンプルデータから抽出したパラメータは「Insert dynamic data」のドロップダウンで「Request Data's ○○」と表示されます。

・To：「sendgrid」workflowからメールを受け取りたいアドレス

・Sender name：SendGrid workflow

・Subject：【テスト】Request Data's subject

・Body：

テストメールを受信しました。

送信者：Request Data's from

件名：Request Data's subject

本文：Request Data's text

これでBackend workflowの設定は完了です。

SendGridでの設定（POST先URLを変更）

SendGridのPOST先がサンプルデータ送信用のままになっていますので変更します。

SendGridの「Settings」→「Inbound Parse」でサンプルデータ送信用で登録したURLの右にある歯車マークをクリックし、「Delete」を選択します

次に、右上の「Add Host & URL」から、Destination URLを「workflow API root URL」（Bubbleの「Settings」→「API」から確認できる）にしてPOST先を新たに登録します。このとき、末尾にworkflow名を付けるのを忘れないようにしてください（今回は「/sendgrid」を追加した、「https://YOURDOMAIN/version-test/api/1.1/wf/sendgrid」を登録）。

これで全ての設定が完了しました。

動作確認

確認のためテストメールを送信してみます。受信メールと送信メールを見比べると以下のようになっています。

「Send Email」の設定がしっかり反映されており、動きも問題ありません。

方法②：IntegromatをPOST受信先として利用する方法

ここからは、Integromatを使ってメールクライアントで内容を確認する方法をご紹介します。

※「Domain Authentication設定」はIntegromatを使う場合も必要となりますので先に行ってください。

Integromatでの設定（Webhooksその1）

Integromatにログインしたら、「Create a Scinario」で新しいシナリオを作成します。

シナリオの編集ページで、まずトリガーの設定を行います。ページ中央のプラスマークをクリックし、「Webhooks」を検索して、「Custom webhook」をクリックします。

「Custom webhook」のモジュールが画面に配置されたら、クリックして「webhooks」のポップアップを表示します。

ポップアップ上部の「Add」をクリックすると「Add a hook」のポップアップが表示されるので、「webhook name」にお好きな名前を入力し右下の「Save」をクリックします。

「Add a hook」のポップアップが消え、「webhooks」のポップアップに先ほど入力したwebhook名が表示されました。そしてその下に、地球のマークとURLが表示されているはずです。こちらがSendGridからメールをPOSTするURLになります。

URLの下の「上記アドレスにサンプルデータを送って（Integromat is listening for the data and ...）」というメッセージの通り、このあとサンプルメールを送信する必要があります。

ですが、サンプルメールを送る前にSendGridでPOST先アドレスの設定が必要となりますので、メッセージ右下の「Copy address to clipboard」をクリックしてURLをコピーします。このポップアップは開いたままにしておきます。

SendGridでの設定（Inbound Parse）

この設定は、上記の「SendGridでの設定（Inbound Parse）」と同じ手順になります。 SendGridの「Settings」→「Inbound Parse」から「Add Host & URL」をクリックし、「Destination URL」に先ほどコピーしたURLを貼り付けます。

※このとき、既にInbound Parseに登録済みのReceiving Domainと同じものは登録できません。テスト目的でなら、任意のサブドメインを指定すると良いでしょう。サブドメインを設定した場合はDNSレコード・MXレコードの登録も忘れずに行ってください。

ドメインレジストラでの設定（MXレコードの登録）

該当ドメインのMXレコードの登録を行っていない方は登録を行ってください。手順は上記の「ドメインレジストラでの設定（MXレコードの登録）」と同じです。

サンプルデータの送信

登録できたら、ドメイン宛にテストメールを送信します。ローカルパート（@以前）はhelloやtestなどお好きなものでOKです。

Integromatでの設定（Webhooksその2）

メールを送信したらIntegromatに戻ります。SendGrid経由でIntegromatに問題なくメールがPOSTされれば、先ほどPOST先URLの下部に表示されていたテスト送信のメッセージと待機マークが消え、「Successfully determined.」という緑文字のメッセージに変わります。

このメッセージを確認したら、右下の「OK」をクリックしてポップアップを閉じます。

Integromatでの設定（Gmailその1）

次に、指定のメールアドレスにGmailを送るモジュールを追加します。

「Webhooks」の右側の「Add another module」をクリックし、「Gmail」を検索して「Send an email」を選択します。

まずは指定するGmailアドレスと紐づくGoogleアカウントとIntegromatの連携が必要になります。

Googleアカウントの連携設定

Google Cloud Platformの「APIとサービス」を開きます。ヘッダー部分の「新しいプロジェクト」からお好きな名前で新規プロジェクトを作成してください。

プロジェクトを作成したら、Gmail APIを有効化します。ヘッダーの検索ボックスに「Gmail API」と入力して検索し、Gmail APIのページで「有効にする」をクリックしたらダッシュボードに戻ります。

ダッシュボードに戻ったら、左のメニューバーから「OAuth 同意画面」をクリックします。画面が表示されたら、User Typeは「外部」を選択して作成をクリックします。

OAuth同意設定には「アプリ情報の編集」→「スコープの追加・削除」→「テストユーザー情報の編集」→「概要確認」の4つのステップがあります。以下を参考に設定を進めてください。

1. アプリ情報の編集

・アプリ名：Integromat

・ユーザーサポートメール：ユーザーからの問い合わせを受けるメールアドレス

・アプリケーションのホームページ：https://www.integromat.com

・デベロッパーの連絡先情報：Googleからのお知らせを受け取るメールアドレス

※「承認済みドメイン」の部分で、「次のドメインが見つかりません」というメッセージが表示されている場合は、「ドメインの追加」をクリックして「integromat.com」を入力してください。

入力が完了したら、「保存して次へ」をクリックします。

2. スコープ

「スコープの追加と削除」をクリックし、Integromatと連携するAPIを選択します。「Send Email」の今回は以下を追加してください。「スコープの手動追加」に以下のURLを入力すると一括で追加できるので便利です。

・Gmail

https://mail.google.com/ https://www.googleapis.com/auth/gmail.labels https://www.googleapis.com/auth/gmail.send https://www.googleapis.com/auth/gmail.readonly https://www.googleapis.com/auth/gmail.compose https://www.googleapis.com/auth/gmail.insert https://www.googleapis.com/auth/gmail.modify https://www.googleapis.com/auth/gmail.metadata

・Google Drive

https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.readonly

更新したら、「保存して次へ」をクリックします。

3. テストユーザー

「ADD USERS」を押して、Integromatと連携したいGoogleアカウントに紐づくGmailアドレスを追加します。

追加できたら「保存して次へ」をクリックします。

4. 概要

ここで登録情報が確認できます。問題なければページ下部の「ダッシュボードに戻る」をクリックし、OAuth同意の編集は完了です。

次に、認証情報を登録します。

ダッシュボード左のメニューバーの「認証情報」をクリックし、認証情報ページを開いたらページ上部の「認証情報を作成」から「OAuthクライアントID」を選択します。

OAuthクライアントID作成ページでは以下の情報を入力してください。

・アプリケーションの種類：ウェブアプリケーション

・名前：Integromat

・承認済みのリダイレクトURI：以下のうちのいずれか

https://www.integromat.com/oauth/cb/google-restricted （For Gmail or Google Drive） https://www.integromat.com/oauth/cb/google （for other Google apps） https://www.integromat.com/oauth/cb/google-custom （for Google Text-to-Speech） https://www.integromat.com/oauth/cb/app （for any app created via the Integromat Developer Platform）