makeを使ってSTUDIOで作ったフォームに自動返信機能をつける

この記事は、[Ateam LifeDesign Advent Calendar 2022 カレンダー1](https://qiita.com/advent-calendar/2022/ateam-life-design)の5日目の記事です。

# はじめに

この記事では、非エンジニアでも使えるタスクランナーサービス「make」を使って、Web制作ツール「STUDIO」で作ったフォームに自動返信機能をつける方法を紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/083e64eb-ba07-cb86-117f-ca322bd53c84.png)

はじめに、今回使うノーコードツールの説明です。

STUDIOは言わずと知れた国内のWebサイト制作ツールで、私のような開発やデザインのスキルを持たない人でも、レスポンシブでイケてるサイトを作ることができます。

STUDIOには、デフォルトでフォーム機能がついており、サイトにお問い合わせフォームを簡単に持たせることができます。しかし、WordPressではプラグイン等で一般的な「自動返信メール」には非対応で、iPaaSアプリやスプレッドシートとGASを使って実装する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/50e1b2bf-c950-b3ee-f0c3-716138ad6e05.png)


次に、make（旧 integromat）は、いわゆるiPaaSアプリと呼ばれるもので、複数のアプリケーション同士を連携することができます。GUI上で視覚的にアプリ（モジュールといいます）同士の繋がりを表現しており、個人的にはZapierやIFTTTよりも使いやすく感じました。費用も少し安い。ただし、日本語に未対応という点が少し惜しい点。


# 実装する

## STUDIOのフォームにGoogleスプレッドシートを紐づける

まずは、STUDIOの `フォーム` > `外部連携`より、スプレッドシートを作成してください。
フォームが送信されるたびに、スプレッドシートに行が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/9f087563-e143-0ef0-dd57-a184083f0fd2.png)



## makeのシナリオを作る

makeを開いたのち、右上の `+ Create a new scenario` より、新しいシナリオを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/88d4a216-4b22-ca35-507d-680a4a416996.png)

最初に、一連のシナリオを動かすトリガーとなるモジュールを選択します。
今回は、先ほどのスプレッドシートに新しい行が追加されたら実行するため、`Google Sheets`の`Watch Rows`を選択します。

ここで`Connection`からGoogleアカウントと接続して、トリガーとなるスプレッドシートを選択していきます。
1回のシナリオで一行分だけ実行したいため、`Limit`には1を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/3b905292-70b9-b6e6-e791-b8bdc25e2a9d.png)

次に`Gmail`のモジュールから`Send an email`を選択します。
makeを初めて触りましたが、GUIからすごく直感的に作成することができますね。


### GmailAPIを認証する

通常のGoogleアカウントの場合、makeにGmailAPIを実行させるためのOAuthセットアップが必要でした。
詳細は、[makeのヘルプページ](https://www.make.com/en/help/connections/connecting-google-services-using-a-custom-oauth-client)が詳しいです。

Google Cloud Platform にログインしてダッシュボードからプロジェクトを作成します。
`API とサービスの有効化`から、Gmail APIを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/28a75155-971c-b28d-15da-60b3058a295a.png)

次に`OAuth同意画面`からテスト用のアプリ登録を進めます。
外部アクセスを許可した上で、下記の通り記載します。

|項目|入力内容|
|:----|:----|
|アプリ名|任意 (ex. make)|
|ユーザーサポートメール|使用可能なメールアドレス|
|承認済みドメイン|`integromat.com` と `make.com`|
|デベロッパーの連絡先情報|使用可能なメールアドレス|

スコープでは、Gmail向けに下記の権限を割り当てます。
Google Workspaceのユーザーには、このステップは不要らしいです。

> 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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/8d80961b-c44b-8534-8b51-503bf6ab8f67.png)

`認証情報`から、makeからアクセスができるようにクライアントIDを割り当てます。

|項目|入力内容|
|:----|:----|
|名前|任意 (ex. make)|
|承認済みのリダイレクト URI|https://www.integromat.com/oauth/cb/google-restricted|


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/c8c74771-5f7b-d948-91dd-bd7015422a02.png)

ここで生成されるクライアントIDおよびクライアントシークレットを控えておきます。
これでGmailAPIにアクセスするための準備は終了。


### シナリオ作成

再びGmailのモジュールに戻ります。
Connectionをする際に、先ほどのクライアントIDとクライアントシークレットを入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/25fb7709-f78f-f8f7-b931-5e7639686dd8.png)

あとは、自動送信するメールの詳細を記入していきます。
HTMLメールに対応しているため、ある程度リッチな表現もOK。

もちろん、メールの中でスプレッドシートの各フィールドの値を使用することができます。
To（送信先）には、STUDIOで取得したお客様のメールアドレスを記載します。

## テストしてみる

あとは、実際にSTUDIOのフォームからテストをしてみて、正しく送信されていれば完了です。問い合わせ情報を関係者に一気に送りたいので、Google グループのメーリングアドレスにBccを付けるようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/d3c57769-5cf8-aaba-d483-acf9983ab932.png)

また、makeの実行間隔を短くしすぎると、オペレーション（=モジュールを実行すると1回ずつカウントされるデポジット）を消費しすぎるので、適度に設定しましょう。私は、それを知らずに1分間隔で設定したために、一瞬で上限枠に達してしまいました。。


# まとめ

今回、はじめてmakeを使ってみましたが、驚くほど簡単に実装することができました。

STUDIOなどのノーコードWeb制作ツールは、私のような非エンジニアでも簡単に使える反面、かゆいところに手が届かない時があります。そんな時に、makeなどのiPaaSアプリと併せて使うことで、実現できることの幅がグッと拡がりますね。

デザイン～開発までノーコードツールで完結できる時代になってきたので、これらを使いこなせるマーケターになればいろんな場面で重宝されそうです。本記事が少しでも参考になれば幸いです。