【0からGASを学ぶ】GASを用いてGoogleフォームからThanksメールを送ろう

# はじめに
本シリーズでは、GASの始め方や便利な使い方、ビジネス活用まで幅広く解説します。シリーズをひと通り読んでいただければ、あなたもきっとGASマスターになれるはずです。

# シリーズの対象者
* そもそもGASってなんだか**わからない**方
* GASを学びたいけど**何から始めればいいか**わからない方
* GASはわかり始めたけど、**もっと活用ができないか**と模索している方
* とにかく**Googleが好き！** という方

# 前回記事
https://qiita.com/gas-suke/items/9fbbbd1563bd83f978ae

# Googleフォームと連携する
では早速始めていきましょう。【0からGASを学ぶ】シリーズの第10回は「GASを用いてGoogleフォームからThanksメールを送ろう」です。今回からはGoogleフォームとGASの連携を中心にお伝えしていこうと思います。<a href="https://qiita.com/gas-suke/items/928fdd8d01fafc4aed1b" target="_blank">第5回</a>や<a href="https://qiita.com/gas-suke/items/a1783b68fac098c8c3ae" target="_blank">第7回</a>では、スプレッドシートを起点としてメールを自動送信しました。今回はこれのGoogleフォーム版です。

## 今回やること
1. Googleフォームのフォーム項目をGASで取得する。
1. 回答内容をGASで取得して、Thanksメールを送信する。
1. Googleフォームで回答送信時にGASが動くようトリガーを紐づける。

## 事前準備
### Googleフォームを作成
今回の起動元となるフォームを作成していきましょう。回答送信後にThanksメールを送付したいので、**フォーム内にメールアドレスの入力欄**を設けてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/8b515ff3-fda6-e412-612b-24c7af76639b.png" width="600">

:::note info
今回のThanksメールを送信するに限定すれば、**GASを使わなくても以下の設定をすればGoogleフォーム単体**で実現できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/c9585c4e-6931-29ca-8c04-3ab381a08904.png" width="450">
しかしながら、回答のコピーを送信するに留まるため**柔軟とは言えません**。
:::

### 試しに一度回答
Googleフォームを作成したら、右上の「プレビュー」ボタンを押下して、一度回答してみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/e7c9d58e-b797-b860-d544-cc10cbdfe12e.png" width="600">
どうでしょうか、特にメールが来たりはしませんよね、そりゃそうです。まだ何もしてないので、それでは**スタートしていきましょう**。

## プログラム開始
### GASエディタを開く
準備したGoogleフォームから**コンテナバインド型でGASプログラム**を記述していきましょう。Googleフォームからコンテナバインド型のGASを開く場合は、以下のようにメニューを開き「<> スクリプトエディタ」をクリックしてください。では、どんどんいきますよ、ついてきてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/4ad152a1-5d27-ad6d-453b-4ec5c33db9ad.png" width="600">

### STEP.1　Googleフォームのフォーム項目をGASで取得する
```javascript:Qiita010.gs
function Qiita010_formSubmit(e) {
  // フォームの回答（イベント）オブジェクトから内容を取得する。
  const itemResponses = e.response.getItemResponses();
  console.log(itemResponses);
}
```

::: note info
ここのポイントはお気づきでしょうが、引数である`e`です。上記関数はこのあとのSTEPで**フォームの回答を送信した際に起動するようトリガーを設定**します。このトリガーを設定した場合に、その**発生したイベントに紐づく情報**が`e`に設定されます。そのため、この`e`を**イベントオブジェクト**と呼びます。
:::

では上記をGASエディタから実行するとどうなるでしょうか。

```:実行結果
23:31:52	お知らせ	実行開始
23:31:53	エラー	
TypeError: Cannot read properties of undefined (reading 'response')
```
動きません。それはそのはずです。
`e`は**イベントに紐づく情報が設定**されるため、GASエディタからの実行は決して**イベントではない**ため、この場合は`e`が設定されません。

#### じゃあGoogleフォームのGAS連携は一発勝負なのか！？
上述の通り**GASエディタからの実行ができない**となると、GASの実行結果を確かめるには、**トリガーを設定して、フォームの回答を行い、結果を得る**という非効率な方法しかできないのでしょうか。

安心してください。**小技により、これも解決**できます。先ほどのプログラムを以下のように書き換えましょう。
```javascript:Qiita010.gs
function Qiita010_formSubmit(e) {
  // フォームの回答をイベントオブジェクトまたはフォーム自身から取得する。
  const itemResponses = (e !== undefined)
                        ? e.response.getItemResponses()
                        : FormApp.getActiveForm().getResponses()[FormApp.getActiveForm().getResponses().length-1].getItemResponses();
  console.log(itemResponses);
}
```
少々複雑ですが、実際は大したことないです。ここでは三項演算子を利用して、イベントオブジェクトが設定されている場合はイベントオブジェクトから（`e.response.getItemResponses()`）、設定されていない場合はフォーム自身から（`FormApp.getActiveForm().getResponses()[FormApp.getActiveForm().getResponses().length-1].getItemResponses()`）取得するようにしています。

:::note info
配列のIndex値を`FormApp.getActiveForm().getResponses().length-1`としていますが、これによりフォームの最終回答を得ることができます。例えば、最初の回答であれば`FormApp.getActiveForm().getResponses()[0].getItemResponses()`、2番目の回答であれば`FormApp.getActiveForm().getResponses()[1].getItemResponses()`といった具合でそれぞれ取得することができます。
:::

ではこれを実行してみましょう。
```:実行結果
23:49:51	お知らせ	実行開始
23:49:51	情報	[ { toString: [Function],
    getItem: [Function],
    getResponse: [Function],
    setFeedback: [Function],
    getFeedback: [Function],
    setScore: [Function],
    getScore: [Function] },
  { toString: [Function],
    getItem: [Function],
    getResponse: [Function],
    setFeedback: [Function],
    getFeedback: [Function],
    setScore: [Function],
    getScore: [Function] },
  { toString: [Function],
    getItem: [Function],
    getResponse: [Function],
    setFeedback: [Function],
    getFeedback: [Function],
    setScore: [Function],
    getScore: [Function] } ]
23:49:52	お知らせ	実行完了
```
今度は問題なく取得することができましたね。

### STEP.2　回答内容をGASで取得して、Thanksメールを送信する
では、GASエディタから実行することができるようになりましたので、回答を確認していきましょう。
```javascript:Qiita010.gs
function Qiita010_formSubmit(e) {
  const itemResponses = (e !== undefined)
                        ? e.response.getItemResponses()
                        : FormApp.getActiveForm().getResponses()[FormApp.getActiveForm().getResponses().length-1].getItemResponses();
  // 取得したフォームの内容を全量取得する。
  itemResponses.forEach(function(itemResponse){
    console.log(itemResponse.getItem().getTitle());
    console.log(itemResponse.getResponse());
  });
}
```
こちらを実行すると、以下のような出力になります。
事前準備で作成したフォームおよび回答によって、内容は変わってきますが、各フォーム項目の**タイトルと回答の順**に表示されるかと思います。
```:実行結果
23:53:34	お知らせ	実行開始
23:53:34	情報	お名前をお答えください。
23:53:34	情報	gas-suke
23:53:34	情報	あなたはGASが好きですか。
23:53:34	情報	はい
23:53:34	情報	サンクスメールの送り先メールアドレスを記載してください。
23:53:34	情報	********@gmail.com
23:53:35	お知らせ	実行完了
```
:::note info
各フォーム項目に対して、タイトルや説明といった質問項目を取得する場合は`getItem()`を、回答者の回答を取得する場合は`getResponse()`を使用します。詳細は以下を確認下さい（今後のシリーズでどんどん紹介しますので参考までに）。
:::
https://developers.google.com/apps-script/reference/forms/item-response?hl=ja

それでは、「サンクスメールの送り先メールアドレスを記載してください。」の回答と、「お名前をお答えください。」の回答を利用して、**Thanksメールを送信**しましょう。
```javascript:Qiita010.gs
function Qiita010_formSubmit(e) {
  const itemResponses = (e !== undefined)
                        ? e.response.getItemResponses()
                        : FormApp.getActiveForm().getResponses()[FormApp.getActiveForm().getResponses().length-1].getItemResponses();
  let recipient = ''
      , toName = '';
  // 取得したフォームの内容を全量取得する。
  itemResponses.forEach(function(itemResponse){
    switch (itemResponse.getItem().getTitle()){
      case 'お名前をお答えください。':
        toName = itemResponse.getResponse();
        break;
      case 'サンクスメールの送り先メールアドレスを記載してください。':
        recipient = itemResponse.getResponse();
        break;
      default:
    }
  });
  // 神回で紹介した方法でメールを送信する。
  sendEmailEx(recipient, 'Thanks', toName+'さんへ');
}

function sendEmailEx(_recipient, _subject, _body, _option) {
  // 引数の内容でメールを下書き保存する
  const mailDraft = GmailApp.createDraft(_recipient, _subject, _body, _option);
  // 下書き保存したメールIDから下書きを取得し、メール送信を依頼する
  GmailApp.getDraft(mailDraft.getId()).send();
}
```
さ、これでメールが届きましたね。あとはトリガーを設定するだけです！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/113e730f-07e0-381e-c554-5455735d4ab2.png" width="400">


### STEP.3　Googleフォームで回答送信時にGASが動くようトリガーを紐づける
<a href="https://qiita.com/gas-suke/items/a04b78d450eb2e3c7572#step5%E6%AF%8E%E6%97%A5%E7%BF%8C%E6%97%A5%E3%81%AE%E4%BA%88%E5%AE%9A%E4%B8%80%E8%A6%A7%E3%81%8C%E5%B1%8A%E3%81%8F%E3%82%88%E3%81%86%E3%81%AB%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B" target="_blank">こちらの記事</a>を参考にトリガーの設定画面を開いてください。トリガーの設定画面において、「イベントのソースを選択」を[**フォームから**]に、「イベントの種類を選択」を[**フォーム送信時**]に設定してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/d46dbe97-021d-dcff-22ac-4b099ab76c8a.png" width="600">
これで、Googleフォームにて回答者の回答が送信されると、本トリガーにより作成したメソッド（例では`Qiita010_formSubmit`）が起動し、回答内容が引数であるイベントオブジェクト：`e`に設定されます。

### STEP.おまけ 動かしてみよう
それではすべての準備が整いましたので、試しにフォームに回答してみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/0215c08f-019a-8049-937e-5b98ee7fcb12.png" width="600">

↓

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/63616816-3ddf-3105-47ba-8c8d2a99a61b.png" width="600">

↓

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/c7c34b1e-6fdd-1fd7-5925-79ccabcefca7.png" width="450">

### 
# おわりに
お疲れ様でした。
第10回は「GASを用いてGoogleフォームからThanksメールを送ろう」ということで、今回からは新たに**Googleフォームをメイン**に扱い始めました。今回は`ItemResponses`に関して多くを語りませんでしたが、Googleフォームで提供している**テキスト形式やプルダウン形式、マトリクス形式など**にどうアクセスすればよいかを今後お伝えしていきます。Googleフォームは**ノーコードで誰でも簡単にフォームが作れます**ので業務活用も非常に容易にできるかと思います。そこにさらに**GASが加われば鬼に金棒**です。引き続き、GASを楽しんでいきましょう！！
記事を読んで、「良いな」や「今後に期待できる！」と感じて頂けたら**いいね**や**フォロー**、**コメント**いただけると幸いです。それではまた次回をお楽しみに！

## ブログでより詳しく解説しています！
以下画像をクリックしてブログにアクセス！！
<a href="https://gas-4u.com/gas09/" target="_blank"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/c1e88edf-c52a-119f-7252-737e69a20acf.png" width="600"/></a>