NotionのwebhookとノーコードツールMakeを使って自動メールを作ってみた


## はじめに

この記事は[EDOCODE Advent Calendar 2024](https://adventar.org/calendars/10618)、12月13日の記事です。
1つ前の記事は、プロダクトマネージャーの前原さんによる[リテールメディアサミット参加レポート](https://qiita.com/maehara_namiko/items/32adb248af2b62f4c79e)でした。
また、グループ親会社である[WanoのAdvent Calendar](https://qiita.com/advent-calendar/2024/wano-group)もありますので、そちらもどうぞ！

この記事では、NotionのWebhookとノーコードツールMakeを活用して、メール自動送信システムを構築する方法を解説します。

普段から業務でNotionを使っており、プロジェクト管理やサービス運用で活用していることがあります。最近、NotionでAutomationとButtonにWebhook機能が追加されたため、それを試してみようと考えました。このWebhook機能により、データのリアルタイム連携や自動化が簡単に実現できる点が大きな利点です。さらに、最近気になっているツールMakeも合わせて利用してみしました。

NotionのAutomationやButtonには自動メール機能は付いているが、Makeを使うことで例えば契約書や請求書といったPDFの添付ファイルを簡単に送信できるなど、拡張性の高い点が特徴である。また、MakeにはNotion用のモジュールがあるが、Webhookをトリガーとすると、Notion側でより柔軟なトリガーを設定することが可能となる。例えば、特定のタスクが完了した際や期日が近づいたときに自動で処理を実行する仕組みを構築できます。

## この記事の目的

このガイドでは、Notionで作成したデータベースから必要な情報を収集し、Makeを使ってGmail経由で自動的にメールを送信する流れを紹介します。以下の内容を理解し、構築できることを目指します。

1. Notionでのデータベース設計とWebhookの設定
2. MakeのWebhookモジュールの活用
3. Gmailを使ったメール送信プロセスの構築

## 前提条件

このガイドを進めるには、以下のアカウントが必要です。

- Notionアカウント
- Makeアカウント
- Googleアカウント


## プロセスの概要

このシステムは以下のステップで構成されます。

1. Notionでデータベースを作成し、必要な情報を記録
2. MakeでWebhookを作成し、Notionと連携
3. Makeを用いてGmail経由でメールを送信
---

## ステップ1: Notion データベースの作成

まず、メール送信に必要な情報を記録するためのデータベースをNotionで作成します。データベースには、以下の最低限のプロパティだけ用意しました。

- **送信先のメールアドレス**: 送信対象のメールアドレスを指定
- **件名**: メールの件名
- **本文**: メールの内容
- **メール送信ボタン**: クリックしたpageの情報を使ってメールを送信

![-9-Notion-Webhook-→-Make-12-11-2024_05_51_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/bdc9eae7-57a6-c242-06c9-6c146aa7234e.png)

---

## ステップ2: MakeでWebhookのモジュールを作成

次に、MakeでWebhookを作成し、Notionのデータを受信する準備を整えます。

1. Makeのシナリオ作成画面で「Webhooks」モジュールを選択します。
![New-scenario-Make-12-11-2024_05_11_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/1b168574-e12f-1452-8021-dcbac1d7fab2.png)

2. 「Custom Webhook」を選び、適当な名称を設定してWebhook URLを取得します。
![New-scenario-Make-12-11-2024_05_11_PM (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/da22064c-648e-220b-effd-09723215cb1e.png)

3. Webhookの名称を設定するとURLが発行されるので、「Copy address to clipboard」をクリックしてコピーしましょう。
![Integration-Webhooks-Make-12-11-2024_05_12_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/34095c52-6e85-1c11-1794-58d5e111273f.png)

---

## ステップ3: Notionのボタンプロパティ設定

Notionのデータベースのボタンプロパティを編集して、webhookのアクションを設定をします。
ボタンクリック時のアクションに「Send Webhook」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/11cc8b48-0c90-c374-7791-20f4c66793ae.png)

URL欄にMakeで発行したWebhook URLを入力します。また、送信するデータとしてとりあえず「Select all existing properties」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/d8387b5c-59bb-7375-e59c-8b9e35ee042a.png)
---

## ステップ4: Makeの連携テスト

この状態で改めてMakeのWebhooksモジュールを見てみると、画像のように「Stop」と書かれたボタンがあると思います。
![Integration-Webhooks-Gmail-Make-12-11-2024_06_19_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/62ee2b3f-4505-b7f4-a4e7-d99023f891ec.png)

Notionのメール送信ボタンをクリックし、MakeでWebhookを受信できるか確認します。
MakeのWebhookモジュールでは、受信したデータが正しく処理された場合、「Successfully determined.」と表示されます。この状態が確認できれば、NotionとMakeの連携は成功です。
![Integration-Webhooks-Make-12-11-2024_05_21_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/03235413-ff10-45ed-b46b-4c3e2a8f9550.png)


---

## ステップ5: Gmailモジュールの追加

次にメールを送信するために、Gmailモジュールを追加します。
Webhooksモジュールの右の＋をクリックして「Gmail」モジュールを選択します。
![Integration-Webhooks-Make-12-11-2024_05_22_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/f95cfa65-e146-3f5f-4424-5f99ccc9d673.png)

続けて「Send an Email」を選択します。
![Integration-Webhooks-Make-12-11-2024_05_22_PM (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/fe452127-e760-7d24-84db-2a4b881ae58a.png)

Connectionでメール送信元のGoogleアカウントと連携をします。
送信先、件名、本文はWebhooksモジュールで取得したNotionのプロパティ情報を用います。

Toの右のMapをオンにしましょう。Toのインプットエリアをクリックすると、Webhooksモジュールで取得した情報が表示されるので、該当する情報を探しましょう。
今回はdata > properties > 送信先 > emailを選択します。
![Integration-Webhooks-Gmail-Make-12-11-2024_06_29_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/8fd8e10f-8bc1-dac9-9a8b-61d11bc1c5fe.png)

同様に、Subjectに件名のplaintext, Contentに本文のplain_textを指定してOKボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/79ea489c-fe65-4853-87d5-690ad1b97af1.png)

モジュールの設定が完了したので、実際に起動してみます。

画面左下の「Immediately as data arrives」をオンにします。Schedule settingのモーダルが表示されるので、「Immediately」を選択して、OKボタンをクリックします。
![Integration-Webhooks-Gmail-Make-12-11-2024_06_05_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3078228/b62e6990-2790-86f2-48a8-fec1d37f2c0e.png)


以上で、設定完了です。
Notionで「メール送信ボタン」をクリックして、想定通りメールが送信されることを確認できました！
---

## 活用例と応用

この仕組みを応用することで、さまざまな業務自動化が可能です。

- 会議リマインダーの自動送信
- プロジェクト進捗通知メール
- 請求書送付の自動化

Makeの柔軟なモジュールとNotionの直感的な操作性を組み合わせることで、手作業の手間を大幅に削減し、効率的な業務運用を実現できます。

---

## まとめ

NotionとMakeを組み合わせたメール自動送信の仕組みは、日常業務の効率化に大きく貢献します。このガイドを参考に、独自の業務自動化プロセスを構築してみてください。

---
12月16日は、エンジニアのDesさんによる[Lessons Learned Migrating from React CRA & Jest to Vite & Vitest](https://dev.to/dsychin/lessons-learned-migrating-from-cra-jest-to-vite-vitest-4ahe)という記事です。記事です。

私たちWanoグループでは人材募集をしています。興味のある方は、下記のリンクからぜひ募集中の求人をご確認ください！
[JOBS | Wano Group](https://group.wano.co.jp/jobs/)