Googleフォームの内容をメールで自動送信

# この記事を読んで欲しい方

・Googleフォームで予約受付をしたが、一件ずつ手作業でメールを返信している。
・メール返信を自動化したい。
・有料プラグインは使いたくない。
・でもプログラミングとか分からない。


# 何ができるのか

タイトルの通り、Googleフォームで入れた内容を***自動でメール送信***してくれます。
商品予約ページをGoogleフォームで作っておいて、お客様へのメール送信を自動で行うというのが主な利用シーンです。

例えばGoogleフォームで ↓ のように予約を受け付けます。

|![ss519.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/044fd95d-029b-67f6-8c04-31b8034a7cc0.jpeg)|
|:--|

すると、送信ボタンを押した直後に予約してくれた人へ予約内容の確認メールが自動送信されます。

|![ss517a.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/1471a10c-dd45-c2a9-04ea-72ed9f3e739c.jpeg)|
|:--|

なお、今回の方法ではGoogle Apps Script (GAS) を扱いますが、ほとんどをコピペで済ませるため***自分でプログラミングすることはありません。***

# 準備

あらかじめGoogleフォームと入力内容がリスト化されるスプレッドシートを用意しておきます。
※作成方法は割愛します。

|![ss520.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/10ae0d00-8192-f212-7120-96805c52dc94.jpeg)|
|:--|

スプレッドシートを開きます。

|![ss521.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/1ab97431-4357-6960-e632-0ad112af3baa.jpeg)|
|:--|

初期状態なら「１行目に入力項目」「２行目以降は空白」となっているはずです。

# プログラムをコピペする

プログラム自体は用意されたものを用いるため、***自分でプログラミングすることはありません。***

画面上部のメニューから「拡張機能」→「Apps Script」を選択します。

|![ss501.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/2a0677a2-05f6-1879-c0cc-97827912b4d4.jpeg)|
|:--|

するとApps Scriptのエディター画面が開きます。
初期状態だと ↓ のようになっているはずです。

|![ss502.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/5b97992d-650d-08a5-ce82-7b375b3b537d.jpeg)|
|:--|

まず、元々あるプログラム（1行目～3行目）を消します。

次に ↓ に示すプログラムをコピペします。
***※長いですが理解できなくてもOKです。***

<details><summary>クリックするとプログラムが表示されます。</summary>
<div>

```javascript
function onFormSubmit(e) {
  // 送信者の情報
  var from_mail = 'yourteam@gmail.com';
  var from_name = '[サークル名]';

  // フォームの回答
  var columns = {
    time:     'タイムスタンプ',
    email:    'メールアドレス',
    goods1:   '作品1',
    goods2:   '作品2',
    goods3:   '作品3',
    date:     'お受け取り日',
    nickname: 'お名前（ニックネーム可）',
    twitter:  'Twitterアカウント',
    remark:   'ご連絡事項等あればご記入ください',
  }
  var values = {};
  for (key in columns) {
    values[key] = e.namedValues[columns[key]][0];
  }

  // メールの件名
  var subject = '【' + from_name + '】ご予約ありがとうございました';

  // メール本文（前文）
  var body_before = [
    values['nickname'] + '様',
    '',
    '',
    'この度は' + from_name + 'の出展作品をご予約頂き誠にありがとうございました。',
    '',
    '下記の通り承りましたので内容のご確認をお願い致します。',
    '',
    '--------------------------------------------------',
    'ご予約内容',
    '--------------------------------------------------',
  ];

  // メール本文（後文）
  var body_after = [
    '',
    '--------------------------------------------------',
    '',
    '内容に相違などございましたら ' + from_mail + ' までご連絡ください。',
    '',
    'また、当日' + from_name + 'のブースへお越しの際は「予約です」とお申し出ください。',
    '',
    'ゲームマーケット会場でお会いできることを楽しみにしております。',
  ];

  // メール送信
  var body_contents = [];
  for (key in columns) {
    if ( values[key] == '' ) continue;
    body_contents.push('');
    body_contents.push('◆' + columns[key]);
    body_contents.push(values[key]);
  }
  var body_all = body_before.join('\n') + body_contents.join('\n') + body_after.join('\n');
  GmailApp.sendEmail(values['email'], subject, body_all, {from: from_mail, name: from_name});
}
```
</div>
</details>

コピペ後は ↓ のようになるはずです。
![ss522.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/27ed34c5-3804-1686-16e5-668b97a8d32c.jpeg)
～
![ss524.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/f99cb543-07cb-f384-ead7-30fbc13733dd.jpeg)

コピペ作業はこれで終わりです。

# 送信者と作品の情報を設定する

送信者（販売サークル側）のメールアドレスと販売サークル名をそれぞれ書き換えます。
![ss526.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/66d401d8-2d91-2bd5-6009-6956f3038300.jpeg)
↓ ↓ ↓
![ss532.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/78926cd2-df26-9e99-9d9b-f2e0310f2b83.jpeg)
※実際に使用するものを指定してください。

次に、予約対象の作品名を実際のものに書き換えます。
![ss528.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/99b94bac-3e34-78e4-4f64-f57dcdfafbf8.jpeg)
↓ ↓ ↓
![ss529.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/9be34bcb-3637-9425-1505-050fa2ed0e2a.jpeg)
***※作品名はスプレッドシートに記載されているものと同じものにしてください。***
![ss533.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/42242ee5-92bd-0a4e-a41c-77a7b2e66085.jpeg)
プログラムの修正はこれで終わりです。
画面上部の保存ボタンを押して修正内容を保存しましょう。
![ss516.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/432de730-11e8-55f6-88a1-dce93e629bba.jpeg)

# プログラムの起動設定をする

Googleフォームの送信ボタンを押したタイミングでプログラムが実行される（＝メールが送信される）ように設定します。
基本的にはマウスクリック作業のみで完了します。

まず、エディター画面左側の「時計」アイコンにマウスを合わせましょう。

|![ss505.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/b62b6953-91cd-09c0-5bd6-45c908d0e464.jpeg)|
|:--|

するとメニューが現れるので「トリガー」を選択します。

|![ss506.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/dae70ebe-212e-ba3b-05e3-d6809441bcb1.jpeg)|
|:--|

すると「トリガー設定画面」が表示されます。

|![ss507.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/84b97a47-2c8b-5b96-e2de-4283358ed731.jpeg)|
|:--|

初期状態では何も設定が無いので、画面右下「トリガーを追加」ボタンを押します。

すると「トリガーを追加」の画面が表示されるので、それぞれの項目を ↓ のように指定して保存ボタンを押します。

|![ss508.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/289b931a-c2f1-d628-5518-f221500300ab.jpeg)|
|:--|

# プログラムにアクセス許可を与える

ここから少々、アクセス許可のための確認画面が続きます。

というのも、「今コピペしたプログラムが予約者リスト（スプレッドシート）にアクセスすること」を許可してあげる必要があるのです。
許可してあげないとプログラムは何もできません。
これは安全性のための仕組みで、プログラムが許可なく勝手なことをしないようにするためのものです。

といっても、手続きは***マウスクリックするだけ***なので落ち着いて進めましょう。


まず、アカウント選択の画面が表示されるので（大抵は今作業しているアカウントを）選択しましょう。

|![ss534.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/c73fa48c-2713-7adc-abb1-164386a690ee.jpeg)|
|:--|

↓ のような少々怖い画面が出ますが、左下の「詳細」リンクを押します。

|![ss535.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/7b069f6e-7afb-4a09-2439-63d010087631.jpeg)|
|:--|

さらに情報が出ますが、画面下部の「安全ではないページに移動」のリンクを選択します。

|![ss536.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/a0a4774e-ff36-5519-322a-fca40f18615c.jpeg)|
|:--|

ここで改めて「アクセスのリクエストを許可する」画面が表示されます。
画面下部の「許可」ボタンを押します。

|![ss537.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/f7e121d0-cd01-3fd9-c866-f52ceeff6b89.jpeg)|
|:--|

少し待つと「トリガー設定画面」に戻ってきます。
トリガーが追加されているはずです。

|![ss514.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/f0c27774-4738-d0e6-e6bb-33177a787bcf.jpeg)|
|:--|

プログラムの起動設定はこれで終了です。

これで全ての設定は完了しました。

# 送信テスト

Googleフォームから情報を入力して送信ボタンを押します。

|![ss538.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/2bdec514-134e-e7d8-7a9f-337924a22cd9.jpeg)|
|:--|

送信後、スプレッドシートに送信内容が記載されます。

|![ss540.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/d2342c27-20a5-699f-ff94-3a1acb302350.jpeg)|
|:--|

メールボックスを確認すると入力した内容が送られているはずです。

|![ss517a.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/cd1441db-4f37-67d3-a61d-81f203f6fb36.jpeg)|
|:--|

無事にメールが届きましたでしょうか？
これでもうメール送信の作業から解放されるでしょう！

# 作品の数を変更したい

これまで説明した内容では作品の数が3種類でした。
これを増やしたり減らしたりする方法を説明します。

### 増やす方法

予めGoogleフォームの側を修正して、作品の数を増やしておきましょう。
今回は例として「お得パック」を増やしたとします。
![ss545.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/e326b76b-7027-8829-b08d-a4c401283246.jpeg)
Googleフォームの側で作品の数を増やすと、スプレッドシートの側も自動的に更新されます。
![ss547.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/97ead17e-8a81-0c0c-7477-7e4a2508ed3d.jpeg)
※Googleフォーム上の場所に関係なく、スプレッドシートの一番後ろに追加されます。

次に、プログラム内の作品の設定に「お得パック」を追加します。
![ss544.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/5b142b41-63ec-c4ce-8eb7-e081fae3b881.jpeg)
※4種類目なので「goods4:」となっています。さらに追加するなら「goods5:」「goods6:」と増やしていきます。

プログラムの修正はこれで終わりです。
保存ボタンを押しましょう。
![ss516.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/49273890-1c63-f1e5-ad3b-16d4197e7f0d.jpeg)

### 送信テスト
新しく増やした作品を選んでテストしてみましょう。

Googleフォームで増やした作品を選んで送信します。
![ss557.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/614736ef-a462-4843-8dc7-e884ceaa67f6.jpeg)

スプレッドシートに追加されているはずです。

|![ss555.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/eebda364-6b7c-750d-d99a-c123c06ecbc0.jpeg)|
|:--|

受け取ったメールにも記載されているはずです。

|![ss558.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/f977e67b-9027-755f-eea4-640458119e79.jpeg)|
|:--|

※選んでいない作品はメールに記載されないようになっています。

### 減らす方法

作品の数を減らすのは、増やすよりも簡単です。
例として「トラペーツ新版」以外を削除します。

|![ss559.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/0047a63d-e437-be02-3b8c-3fcbce68d2b0.jpeg)|
|:--|

Googleフォームの側から削除しても***スプレッドシートからは削除されません。***
そのため過去に入力された情報はそのまま残ります。

|![ss565.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/7a0d8c70-180a-581a-bd7e-471528447691.jpeg)|
|:--|

そしてプログラムの修正です。
「トラペーツ新版」以外の作品情報を削除します。
![ss566.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/009a3d58-a117-d19c-1714-badb7c708859.jpeg)
修正を終えたら保存するのを忘れずに。
![ss516.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/58df9048-14ac-860e-bfc5-780ecd9cecd2.jpeg)

### 送信テスト

それではテストしてみましょう。
作品を一つだけ選んで送信ボタンを押します。
![ss562.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/7665c125-5776-6d02-9d82-f5b910cd4da0.jpeg)

スプレッドシートに情報が追加されているはずです。

|![ss567.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/5d584567-1857-f28e-100f-b8a0f39cd1e9.jpeg)|
|:--|

メールも問題なく届いているはずです。

|![ss568.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43130/46b85f68-9710-8eb4-308b-057ff8425fce.jpeg)|
|:--|

# 最後に

プログラムの知識が無くても扱えるよう、プログラムの修正作業を抑えた内容になっています。
とはいえ、今回の内容でも無理そうだと感じる方もいらっしゃると思います。
疑問点などあればコメント欄などへお気軽にお問い合わせください。

なお、前文や後文（予約内容の前後）の修正についてはまた改めて紹介したいと思います。