【adalo】Sendinblueを利用してアプリからメールを送信する

NoCodeサービス、adaloを使ってメールを送信するサンプルです。

【ご注意！】
以下adaloの「Custom Action」を使用します。「Custom Action」は「Pro Plan」以上の有料プランにて使用可能です。

# 環境
MacOS Catalina 10.15.5


# SendGridの準備

メール送信には「Sendinblue」というサービスを使います。
![スクリーンショット 2020-08-25 14.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/3a3485b5-8225-04a8-ad7a-28d067c2ca17.png)
(参照元；https://www.sendinblue.com/）

無料で利用できますので、事前にアカウントの作成をしてください。


# サンプルとして作成するもの

今回はiPhoneアプリの「Captio」[^1]のクローン（というかモドキ）を作成してみます。

[^1]: https://apps.apple.com/jp/app/captio-%E3%83%AF%E3%83%B3%E3%82%BF%E3%83%83%E3%83%81%E3%81%A7%E8%87%AA%E5%88%86%E3%81%AB%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%92%E9%80%81%E3%82%8D%E3%81%86/id370899391

![スクリーンショット 2020-08-24 16.58.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/e82140e6-6536-c210-eb30-a7e5ab47c328.png)
（参照元[^1]）

Captioは非常にシンプルなメールアプリで機能は「特定のアカウントにメールを送信する」のみ！メールアプリというよりは「（アイデアが浮かんだ時などに）自分宛てにメモを送る」ために使われるアプリです。

# 作成手順
1）adaloからモバイルアプリを新規作成します。

![スクリーンショット 2020-08-25 12.15.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/50986a05-227e-8d04-673c-f9e05ee7f8bb.png)

2）Blankを選択します。
![スクリーンショット 2020-08-25 12.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/add42435-753d-776a-95e2-ed246bffe8ce.png)

3）任意の名前、色を選択してCreateしてください。
![スクリーンショット 2020-08-25 12.18.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/d1ac129c-cd54-2f47-8300-1a08baf11eb9.png)

4)HOME画面からログアウトのアイコンを削除し代わりにメールを送信するアイコンを追加して、
　「Custom Action > New Custom Action」を選択します。
![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/944ee376-7544-bc83-e65c-24867734ed3c.gif)

5)任意の名前とTypeに「Create」を選択し「Next」をクリックします。
![スクリーンショット 2020-08-25 13.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/4b89a9d4-78d2-333e-bad1-a3b24c110d1c.png)


6)以下を入力します。
![スクリーンショット 2020-08-25 13.57.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/d0ef919d-df53-5933-c611-22c2b0bd6842.png)



・API Base URL
```https://api.sendinblue.com/v3/smtp/email
```

・Method
「POST」を選択

・Headers&Queries
「＋ADD ITEM」をクリックして「Header」を選択
以下の様に入力する。

![スクリーンショット 2020-08-25 13.59.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/47e0b197-dd51-8c6a-4957-af95ffdcba0d.png)

API-KEYは
https://account.sendinblue.com/advanced/api
で確認できます。



・BODY
雛形として以下のJSONを入力する。

```json
{
	"name": "Cap Clone mail",
	"subject": "My subject",
	"sender": {
		"name": "Cap Clone",
		"email": "test@gmail.com"
	},
	"htmlContent": "test content",
	"to": [
		{
			"email": "aaa@gmail.com",
			"name": "test user"
		}
	]
}
```

次にメール雛形をMagicTextで置き換えて行きます。
![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/4c8fc0ad-d01d-a7de-3724-a3f12dd1f0ba.gif)

最終的にこんな感じに置き換えました。
![スクリーンショット 2020-08-25 14.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/d7cfb7c6-c41b-247b-0c0e-e6ba676be68d.png)

ここまできたら、右下の「RUN TEST REQUEST」をクリックして
正常にリクエストが完了するか確認します。

![スクリーンショット 2020-08-25 14.11.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/f7dbae7c-9846-b1d4-9198-4cd68d2e89d7.png)

この様な画面が出ればOKです。
このCustom Actionを保存します。

さて、今追加したCustom Actionは![スクリーンショット 2020-08-25 14.17.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/24029f34-d499-c03a-c070-83ff7c0a38b0.png)

肝心のメール本文と送り先メールアドレスが空になっています。
この項目は先ほどCustom Actionを追加した際にMagicTextで置き換えたものでした。
これを画面項目やテーブルに格納されたユーザーのメールアドレスと紐付けていきます。

メール本文の入力するため、テキストボックスを追加しCustom Actionと紐づけていきます。

![3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/b398a13e-860c-0c9d-c847-982187c95b0b.gif)

次に送信先メールアドレスとCustom Actionを紐付けます。
送信先メールアドレスはデフォルトで作成されたUserテーブルの項目にあります。

![4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/947f851d-1728-799d-20fc-d8c07870140f.gif)


最後に送信後、入力したテキストがクリアされる様にCustom Actionを追加します。
![5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/fcc47b17-709c-88cb-9393-5984c92b2137.gif)


以上で完成です！