LoginSignup
1
3

More than 1 year has passed since last update.

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

Posted at

きっかけ

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

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

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

SendGridに登録

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

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

スクリーンショット 2022-03-19 20.24.56.png

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

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

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

スクリーンショット 2022-03-19 20.57.54.png

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

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

スクリーンショット 2022-03-20 9.35.57.png

APIキーを作る

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

key.png

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

スクリーンショット 2022-03-20 9.50.57.png

Mail Sendに権限を付けます。

スクリーンショット 2022-03-20 9.51.49.png

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

スクリーンショット 2022-03-20 9.52.34.png

Google Form を作る

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

GoogleAppsScriptを書く

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

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

コード.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が呼び出されるようにトリガーを設定します。

できあがり

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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3