Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

Integromat+SendGridで作るメール購読フォームのバックエンド

最近ノンコーディングツールとSendGridを連携することにハマっています。以前、ZapierとLogic Appsを試しました。

今回はIFTTTを試そうと思って「IFTTT SendGrid」でググったところ、Integromatというサービスが出てきました。

f:id:kikutaro777:20190816222244p:plain

早速触ってみたところ、ZapierやLogic Appsよりも簡単に同じもの(メール購読フォームのバックエンド)が作れました。Webhookを受ける機能があるので、IFTTTを使わなくても同じことができます。

ということで手順をまとめます。

Webhooksの設定

「Create a new scinario」で新しくシナリオを作成します。
f:id:kikutaro777:20190816223433p:plain

サービスの一覧&検索画面で「Webhook」を検索して選びます。
f:id:kikutaro777:20190816225818p:plain

「Custom Webhook」を選択します。
f:id:kikutaro777:20190816230043p:plain

「Add」ボタンを押して「Webhook name」を入力します。ここでは「SendGridWebForm」と入れて保存しました。
f:id:kikutaro777:20190816230205p:plain

URLが発行されます。
f:id:kikutaro777:20190816230334p:plain

ここでPOSTのリクエストを送ると、それを元に変数化してくれます(後ほど出てきます)。これはZapierやLogic Appsより便利ですね。実際にリクエストを送信してみます。
f:id:kikutaro777:20190816231036p:plain

正常に受信されると成功のメッセージが表示されます。
f:id:kikutaro777:20190816231126p:plain

SendGridの設定

宛先の登録

Webhookの設定を終えたら次はSendGridです。
f:id:kikutaro777:20190816231233p:plain

Search欄で「SendGrid」と入力します。
f:id:kikutaro777:20190816231318p:plain

フィルタされた結果の「SendGrid」を選びます。
f:id:kikutaro777:20190816231350p:plain

SendGridで選べる選択肢が一覧表示されます。まずはPOSTされたメールアドレスを宛先リスト(Contacts)に登録するため「Add or Update a Recipient(Legacy)」を選びます。(Legacyとあるのはつい最近、新しいAPIセットがリリースされたためです。)
f:id:kikutaro777:20190816231424p:plain

Connectionに名前を付けます。ここでは「SendGridConnection」としました。
f:id:kikutaro777:20190817011702p:plain

API KeyはSendGridで発行したものを入力します。最初ちょっとハマったのですが、「Marketing Campaings」の権限だけではなく「API Keys」の権限も必要なのでご注意ください。
f:id:kikutaro777:20190817011835p:plain

Email AddressはWebhooksの設定で変数化された「email」が自動的に出てくるので選びます。
f:id:kikutaro777:20190817012032p:plain

上記キャプチャには「double_optin」という項目がみえていますが、これはSendGridのContactsで私が追加したカスタムフィールドです。この辺りも自動的に表示してくれるのがありがたいです。以上で、Webhookで受け取った宛先を登録する設定が完了しました。

登録した宛先を宛先リストに追加

続いて、登録された宛先を宛先リストに追加します。今回は「Add Recipients to a List(legacy)」を選びます。
f:id:kikutaro777:20190817012500p:plain

Connectionは先ほど作ったものをそのまま利用できます。List IDは宛先リストを作成したときにレスポンスで返ってくるIDです。忘れた場合は宛先リストの一覧を取得するAPIで確認できます。
f:id:kikutaro777:20190817012609p:plain

Recipientsの部分は宛先を登録した際の戻り値にあるRecipient IDを指定します。ここもIntegromatが使いやすい!と思った所なのですが、下図のように戻り値の一覧だけではなく、配列の添え字まで含めて選べるようになっています。細かい!
f:id:kikutaro777:20190817012958p:plain

以上で設定完了です。

実行

それでは早速実行します。「Run once」を押すとWebhooksが待機状態となるので、POSTのリクエストを送ります。
f:id:kikutaro777:20190817013209p:plain

実行結果をリアルタイムに画面で確認できるのがありがたい。
f:id:kikutaro777:20190817013333p:plain

SendGridを確認すると、ちゃんと宛先が宛先リストに登録されていました。
f:id:kikutaro777:20190817013456p:plain

便利!今回のブログは1つ1つ細かい手順を書いたので長く感じられるかもしれませんが、実際にやってみると迷いが少なくサクサク設定できます。

IntegromatはSendGridだけではなく、数多くのサービスと連携できます。Freeプランで十分使えるのも魅力的です。ZapierやLogic Appsより良い番いいと思ったので、実際これで運用してみようと思います。
f:id:kikutaro777:20190816222952p:plain

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村