( GoogleForm + SendGrid ) GoogleFormの送信をトリガにしてメールを送信する

## きっかけ

子供が通う小学校では保護者グループのコミュニケーションツールとしてSlack（フリープラン）を使用しています。
毎年数十人の新入生の保護者をワークスペースに追加しなくてはなりません。

いままでは、GoogleFormで保護者の名前・お子さんの名前・メールアドレスを記入してもらい、送信がある度に手作業で送信されたメールアドレスにSlackの招待を送っていました。

しかし、フォームの送信に気づかなかったり、単に面倒だったりするので、自動化を検討することにしました。
ちなみにSlackはフリープランで運用しているので、SlackAPIで招待することはできません。というわけで、Formが送信されたら自動的にメールでSlack参加の手順を配信するようにしてみました。


## SendGridに登録

> SendGridは全世界で利用されているメール配信サービスです。
> クラウドサービスのためアカウントを作成するだけで即日メールを
> 送信でき、面倒でコストのかかるメールサーバの構築は不要です。
> (引用: https://sendgrid.kke.co.jp/about/)

月に１２０００通までは無料で配信できる。学校のPTA程度の規模でメールを配信するぐらいならFreeプランでもなんとかなりそう。

![スクリーンショット 2022-03-19 20.24.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/21680f4c-32bc-8ee4-a4e2-c806aefa2eaf.png)



というわけで、Freeプランで登録しました。ちなみに、登録するには、簡単な審査があって、利用目的や団体のWebサイト（なければ団体が実在している事がわかるメールの送信記録）などを示す必要がありました。


## メールのテンプレートを作る

まずは配信するメールのテンプレートを作ります。以下を参考に。デザインエディターを使うと簡単に綺麗なHTMLメールを作成することができます。

https://sendgrid.kke.co.jp/docs/Tutorials/A_Transaction_Mail/using_dynamic_templates.html


![スクリーンショット 2022-03-19 20.57.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/4ebe6517-fbfe-d031-f617-18b420efd2d6.png)

こんな感じ。「Slackに参加する」ボタンのリンク先をSlackの招待リンクに設定しておきます。
また、メール内のテキストには `{{name}}`　というように二重の波括弧で括ったキーワードを埋めておきます。メール送信時にこの部分を別のワードに置換して送信するわけですね。 

テンプレートを保存して、テンプレート管理画面で作成したテンプレートの Template-ID を確認しておきます。下画面のモザイクのところ。

![スクリーンショット 2022-03-20 9.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/42b2488e-e77c-a2d0-cb68-e3e872b63587.png)


## APIキーを作る

DashBoardのメニューから`Settings`->`API Keys`を選択してAPIキー管理画面に移ります。
右上の`Create API Key`からAPIキーを作ることができます。

![key.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/7ff4f6bd-6274-fcd8-d5d6-eb3d43dcdb30.png)

`API Key Name`で適当な名前をつけます。 次に`Restricted Access`を選び、

![スクリーンショット 2022-03-20 9.50.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/6d5112bc-3a4d-1fb2-f3f5-67239d1de4bb.png)

`Mail Send`に権限を付けます。

![スクリーンショット 2022-03-20 9.51.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/d8d89ad5-e03b-805b-d28f-f631ecc7c213.png)

これでキーを作成すると、画面にAPIキーが表示されます。このAPIキーはこのタイミングでしか確認できません。一度画面を閉じてしまうと、以降は二度とキーを確認できなくなるので、必ずここでキーを控えておきます。

![スクリーンショット 2022-03-20 9.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/d7731147-b4f2-3a9e-f38e-dcec7753c4a3.png)


## Google Form を作る

GoogleFormを作成します。配信先のメールアドレスと名前を記入するようになっています。実際にはもう少し項目を作ると思いますが。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/2fa9effd-6d22-30f3-a715-06b10c2353c8.png" width=500>



## GoogleAppsScriptを書く

GoogleFormのメニューから　`スクリプトエディタ`　を起動して、Formから名前とメールアドレスを抜き出して、メールを配信するコードを書きます。
テンプレートを使用してメールを送信する場合のパラメータは以下を参考に。

https://docs.sendgrid.com/ui/sending-email/how-to-send-an-email-with-dynamic-transactional-templates


例えば以下のコードに置き換える。(Formの特定のItemを取得するのにもっとスマートな方法はないのだろうか。)


```typescript:コード.gs
const SENDGRID_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // API Key
const TEMPLATE_ID  = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Template-ID

function onSubmit(e) {
  var formResponse = e.response;
  var itemResponses = formResponse.getItemResponses();

  var name = "";
  var email = "";

  for (var j = 0; j < itemResponses.length; j++) {
    var itemResponse = itemResponses[j];

    switch (itemResponse.getItem().getTitle()) {
      case 'お名前':
        name = itemResponse.getResponse();
        break;
      case 'メールアドレス':
        email = itemResponse.getResponse();
        break;
      default:
    }
  }

  if (email!="" && name!="") {
    sendMail(email, name);
  }
}


function sendMail(email,name) {

  var payload = {
    "personalizations": [
      {
        "to": [
          /* 配信先メールアドレス */
          {
            "email": email
          }
        ],
        "dynamic_template_data":
        　/* メール本文中のキーワードの置換を行う */
          { "name": name }

      }
    ],
    "from": {
      "email": "noreply@example.com"
    },
    /* 配信するテンプレートのTemplate-ID */
    "template_id": TEMPLATE_ID,
  };

  var headers = {
    'Authorization': 'Bearer ' + SENDGRID_KEY,
    'Content-Type': 'application/json'
  };

  var options = {
    'method': 'POST',
    'headers': headers,
    'payload': JSON.stringify(payload)
  }

  UrlFetchApp.fetch('https://api.sendgrid.com/v3/mail/send', options)
}
```

## トリガーを設定する

フォームの送信で `onSubmit`が呼び出されるようにトリガーを設定します。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/996e348a-51d7-274a-9dde-1c973aad4922.png" width=700>

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123579/541b12c5-d97a-7928-99f6-457b882ab44e.png" width=700>


## できあがり

Formの送信から自動的にキレイめなメールが配信されるようになると、いっきに垢抜けた感じになって嬉しい。
ただ、SendGrid経由でメールを配信すると、メールの内容にもよると思いますが、フィルタリングにひっかかって迷惑メールとして分類されることがあるような気がします。
実際に運用する場合は、ユーザーにその旨伝えておくのがよさそうです。