AdaloでSendGrid経由でメールを送信するためにやったこと

##ノーコードのAdaloはお手軽だがメールを送れないと最初思っていた。

ウェブアプリを作るのにノーコードサービスのAdaloは本当にお手軽。開発環境を整えてコーディングをがんばった時期もあったけど、一度これを使うと楽すぎてもう戻れない。
PCからの見栄えに若干不満があるけど、簡単なアプリなら1日もかからずに作れてしまうし、本当に最高。

ただ制約も多く、Adaloではメールを送る機能がないと最初は思っていた。
SendGridのAPIを使ってAdaloからメールを送る方法を見つけたのでやってみたら、改行があるとメールが送信できない問題に遭遇。
この記事を書いた時点ではこの問題を解決する詳しい記事がなかったので書いてみた。

結論から言うと、Integromatを間に挟んで、Webhooks→SendGridでメールを送るシナリオを作ることで解決（ちょっと面倒くさいけど）。

##参考にしたもの

最終的にたどり着いたのがこの神動画。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_6V-hoEUICQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

この動画ではSendGridを使わず既存のメールアカウント（Gmailなど）を使ってAdaloからメールを送信する方法を紹介しているのだが、SendGridでも同じことができるとわかったので、そのときのやり方をメモ。

##まずはIntegromatのアカウントを取得。

https://www.integromat.com/en

Integromatは簡単に言うとシナリオを作ることでZapierみたいに複数のアプリを連携させて処理が可能なサービス。
Adaloに関して言えばZapierよりも相性は良さそう。
まずはアカウントを取得した。

##Integromatのダッシュボードからシナリオを作る

Integromatのダッシュボードはこんな感じ。

![スクリーンショット 2021-09-21 0.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/32b2fa34-b1f2-f40b-5def-4a03b2408848.png)

Scenariosをクリックして、とりあえず自分のプロジェクトのフォルダを作って、その中にシナリオを作っていく。「Create a new scenario」とするとZapierでZapを作るような画面がでる。
真ん中の大きい＋マークをクリックして、Webhooksモジュールを検索して選択する。

![スクリーンショット 2021-09-21 0.46.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/9eab7e48-750f-89b2-b8db-9e4fc09f2ae8.png)

次にCustom Webhookを選択。
Addボタンをクリックして、Webhook Nameにわかりやすい名前をつけてSave。

![スクリーンショット 2021-09-21 0.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/a909fd71-6819-2c3a-40b7-fac35d7d94ef.png)

出てくるURLをコピーして後で貼れるようにしておいたら、OKをクリック。

![スクリーンショット 2021-09-21 0.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/ac7fc326-198d-9625-5602-43b0f8b06abc.png)

ここまで終わったらこのタブはそのままにしておいて、別のタブでAdaloで作業。

##Adaloのカスタムアクションを定義して、IntegromatのWebhooksにデータを送る

もう書くのがめんどくさくなってきたので、ここからはさっき紹介した神動画の4:10あたりから8:00あたりまでを参考に。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_6V-hoEUICQ?start=250" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Bodyのところはjsonでemailやらsubject、bodyなどを追加していく。
下の記事に載っているjsonの記述を写経してみたりした。

https://h-shunsuke.com/archives/752

##SendGridでAPIキーを取得

別タブでSendGridにログイン（アカウントない場合は無料プランで作成）して、ダッシュボードのAPI Keysから「Create API Key」をクリックしてAPIキーを作る。
名前は後でわかりやすいようにIntegromat（作っているサービス名）とした。
この時パーミッションをFull Accessにしないと後でエラーになってハマるので注意。

![スクリーンショット 2021-09-21 0.33.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/bd17ca68-8397-81a7-12db-25a054ed3c17.png)

![スクリーンショット 2021-09-21 0.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/6a82e0b6-306e-3b02-14ee-e1269821cfd8.png)

APIキーを取得したら、後で貼り付けられるようにしておく。

##IntegromatのScenarioに戻って、Webhooksの後ろにSendGridを追加。

Webhooksモジュールの右側の出っ張りをクリックすると下の図のように次のアクションを追加できるようになるので、

![スクリーンショット 2021-09-21 0.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/9c69f81d-e921-aa89-751d-710ebe1d259e.png)

「Add another module」としてSendGridを検索して選択。

![スクリーンショット 2021-09-21 0.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/a3ec594d-3c2b-a634-0274-77c231de080a.png)

アクション一覧から「Send an Email」を選択。

![スクリーンショット 2021-09-21 0.54.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/975e8f68-8f88-c8b6-0436-6c7c2f1a7781.png)

次に出てくる画面のConnectionの横にあるAddボタンをクリック。ここにSendGridで作ったAPIキーを貼ってContinueボタンを押下。

![スクリーンショット 2021-09-21 0.57.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566050/eccc97cf-37ff-9678-4287-69416683df6c.png)

ここまできたら、次のステップへ。

##IntegromatのSendGridモジュールで送信先や件名、本文などを設定。

引き続き上の動画の8:00くらいからを参考に。
動画ではEmailモジュールを使っているがSendGridモジュールでもだいたい同じで何とかなった。
Content TypeをPlaintextにするのを忘れずに。
あと動画の10:20あたりから話しているようにシナリオの保存と、シナリオをオンにすることを忘れずに（忘れるとちょっとめんどくさいです）。

あとのチェックなどはそのまま動画を見ながら進めてたらうまくいった。

##おわりに
動画のMichaelさまに感謝しかない。ホンマに神。さんきゅーそーまっちうぇるかむかもーん。

この動画でほぼ解決だったがすでにSendGridの有料アカウントを作ってしまっていて勿体なかったので、SendGridでできる方法を模索してみたところ、すでに持っていたSendGridのAPIキーがフルアクセスになっていなかったのでうまく行かずにはまった。

途中から書くのがめんどくさくなってしまい、最後の方はほぼ動画見てくださいみたいな感じで雑になってしまいました。
申し訳ありません。
同じ課題を持っている方の役に立つことがあればうれしいです。