ノーコード ラボ

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

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

f:id:earthmash:20211008191524p:plain

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

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

※前回の記事

blog.nocodelab.jp

シーンと仕組みの解説

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

f:id:earthmash:20211008172055p:plain
Parse webhookの流れ

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

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

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

Domain Authentication設定

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

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

f:id:earthmash:20211004162830p:plain
「sendgrid.net経由」が表示されなくなる!

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

SendGridでの設定

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

f:id:earthmash:20211004165110p:plain
Settings > Sender Authenticationを選択

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

f:id:earthmash:20211004165151p:plain
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」をクリックします。

f:id:earthmash:20211004165236p:plain
2つの質問に回答

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

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

f:id:earthmash:20211004165300p:plain
ドメインを設定

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

f:id:earthmash:20211004165414p:plain
DNSレコードが表示

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

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

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

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

f:id:earthmash:20211004174721p:plain
ドメインレジストラでDNSレコードを追加

SendGridでの設定

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

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

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

f:id:earthmash:20211004174805p:plain
「Verify」をクリック

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

f:id:earthmash:20211004174824p:plain
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」が表示されます。

f:id:earthmash:20211008154400p:plain
Backend workflowの有効化

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

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

※詳しくはこちら

Workflow API - Bubble Docsmanual.bubble.io

Backend workflowをつくる

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

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

f:id:earthmash:20211008154616p:plain
新しいBackend 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」を選択します。

f:id:earthmash:20211008154703p:plain
workflowの設定

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

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

f:id:earthmash:20211008154733p:plain
サンプルデータのPOST先URL

SendGridでの設定(Inbound Parse)

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

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

f:id:earthmash:20211008174513p:plain
Settings > Inbound Parse

f:id:earthmash:20211008174542p:plain
Add Host & URL

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

  • Receiving Domain:メールを受信するドメイン。Domain Authenticationを設定したものから選択できます。subdomainは、メールを受信するドメインにサブドメインを付加したい場合に設定してください。(DNSレコードの設定を忘れずに!)

  • Destination URL:POSTを受信するURL。先ほどBubbleの「Detecting Request Data」でコピーしたURLを貼り付けます。

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

f:id:earthmash:20211008154925p:plain
Add Host & URL

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

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

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

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

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

・Type:MX

・Value:mx.sendgrid.net

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

f:id:earthmash:20211008155017p:plain
MXレコードの登録

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

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

サンプルデータ送信

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

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

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

・件名:テストメール

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

f:id:earthmash:20211008155053p:plain
サンプルデータを送信する

Bubble Backend workflowの準備2

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

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

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

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

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

f:id:earthmash:20211008155133p:plain
各パラメータのタイプを選択

タイプを変更したら、ポップアップ下部の「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

f:id:earthmash:20211008155253p:plain
Send Emailの設定

これで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」を登録)。

f:id:earthmash:20211008155336p:plain
POST先を登録

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

動作確認

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

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

f:id:earthmash:20211008160413p:plain
動作確認

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

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

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

Integromatでの設定(Webhooksその1)

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

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

f:id:earthmash:20211007163755p:plain
「Webhooks」を追加

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

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

f:id:earthmash:20211007163844p:plain
webhook名をつける

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

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

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

f:id:earthmash:20211007163955p:plain
webhookアドレスをコピー。ポップアップは開いたままで!

SendGridでの設定(Inbound Parse)

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

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

f:id:earthmash:20211007164040p:plain
SendGrid経由でPOSTするwebhookアドレスを登録

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

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

サンプルデータの送信

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

Integromatでの設定(Webhooksその2)

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

f:id:earthmash:20211007164121p:plain
サンプルメール送信テスト完了!

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

Integromatでの設定(Gmailその1)

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

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

f:id:earthmash:20211007164217p:plain
「Gmail」のモジュール追加

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

Googleアカウントの連携設定

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

f:id:earthmash:20211007173606p:plain
「APIとサービス」で新しいプロジェクトを作成

f:id:earthmash:20211007173644p:plain
任意の名前で作成

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

f:id:earthmash:20211007173733p:plain
Gmail API

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

f:id:earthmash:20211007173758p:plain
OAuth同意画面

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

1. アプリ情報の編集

・アプリ名:Integromat

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

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

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

f:id:earthmash:20211007173845p:plain
OAuth同意画面:アプリ情報の編集

※「承認済みドメイン」の部分で、「次のドメインが見つかりません」というメッセージが表示されている場合は、「ドメインの追加」をクリックして「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

f:id:earthmash:20211007173922p:plain
OAuth同意画面:スコープ

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

3. テストユーザー

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

f:id:earthmash:20211007174007p:plain
OAuth同意画面:テストユーザー

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

4. 概要

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

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

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

f:id:earthmash:20211007182725p:plain
認証情報を作成

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)

f:id:earthmash:20211007182804p:plain
OAuthクライアントID作成

入力後、「作成」をクリックすると「OAuthクライアントを作成しました」というポップアップが表示されますので、クライアントIDとクライアントシークレットをそれぞれコピーします。

f:id:earthmash:20211007182840p:plain
クライアントID、クライアントシークレットをそれぞれコピー

Integromatでの設定(Gmailその2)

ここで、Integromatのシナリオ編集ページに戻ります。

「Gmail」モジュールをクリックし、ポップアップを表示します。Connectionの「Add」をクリックしたら「Create a connection」のポップアップが表示されるので、ポップアップ下部にある「Show advanced settings」をチェックします。

するとクライアントID・クライアントシークレット入力欄が現れますので、それぞれ先ほどコピーしたものを入力し、右下の「Continue」をクリックします。

f:id:earthmash:20211007182930p:plain
クライアントID、クライアントシークレットを入力

Googleアカウントを選択する画面が新規ウィンドウで表示されますので、先ほど連携の設定をしたアカウントを選択します。

「このアプリはGoogleで確認されていません」と表示されたら、左下の「Continue」をクリックします。

「integromat.comがGoogleアカウントへのアクセスを求めています」と表示されたら、権限内容の「Gmailのすべてのメールの閲覧、作成、送信、完全な削除です。」をチェックし、「Continue」をクリックします。

f:id:earthmash:20211008181458p:plain
Googleアカウントの連携がついに完了

これでGoogleアカウントの連携が完了しました。

※Googleアカウントの連携設定はこちらのページで詳しく解説されています。ビデオもあるのでご参考ください。

www.integromat.com

  • Gmailの設定

メールの送信先や件名、本文などの設定を行います。

・To:メールを受け取りたいアドレス

・Subject:メールの件名

・Content:メールの本文

ここで、サンプルデータの送信が成功していれば、「Webhooks」で吸い上げた「to」、「from」、「text」などのパラメータを用いてSubjectやContentの内容を設定することができます。画像のように表示されない場合はサンプルデータの送信の手順をもう一度やり直してみてください。

参考までによく使われそうなパラメータをご紹介します。

・to:メールの宛先(今回は、SendGrid→Integromat→Gmailの流れで内容を確認したい@独自ドメイン)

・text:メールの本文

・from:メールの送信者元アドレス

・subject:メールの件名

パラメータの右側にサンプルデータの内容が例として表示されるのでご確認ください。

今回は、以下のように設定しました。

f:id:earthmash:20211007184743p:plain
パラメータを用いてメール設定

設定が完了したら右下の「Save」をクリックします。

シナリオ編集ページの左下の時計マークから「immediately」を選択し、Schedulingを「ON」にしましょう。

f:id:earthmash:20211007184850p:plain
スケジュールを設定

※左下の「Run Once」からシナリオのテストをすることもできます。

これですべての設定は完了です。

ちなみに、ノーコードラボのTwitterでも触れましたが、IntegromatのGmailモジュールは2021年9月18日に日本語対応を開始したばかりです。

おまけ:ZapierをPOST受信先として利用する方法

今回ご紹介した2つの方法は、SendGridブログに掲載されていたZapierを使う方法を参考にしました。 Zapierを使いたい方はこちらをご参考ください。

sendgrid.kke.co.jp

参考記事

・Parse webhookの仕組みやDNSレコード、MXレコードの登録について sendgrid.kke.co.jp