Slack + Google Forms (Google Apps Script)を組み合わせて、およそ10分でフォームの回答結果をSlackに通知させる設定を行う

`Google Forms`をそのまま使っていると、フォームから回答や問い合わせがあったときに基本的に気づかないので、だいたいは個人で使っている`Slack`に通知を飛ばすようにしています。
もちろん、`Slack`経由で`iPhone`などにも通知が飛ぶので重宝します。

![GoogleフォームからSlackに通知を送る際のイメージ図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205976/021dbc25-5205-1ef8-47cf-9f4ee092641a.png)


だいたいこんな感じで `Slack` に通知が入ります👇

![demo - image](https://github.com/shinshin86/google-drive-kakeibo-with-slack/blob/master/google-forms/img/google-forms-20180606.png?raw=true)

個人的にこの`Slack + Google Forms`の組み合わせはよく使うため、個人的メモとして、いつでもちゃちゃっと作れるようにQiitaに備忘録を残しておくことにしました。
基本的には、下記の手順をそのまま実施すればOKかと思います。
(テキストなどは適宜アレンジしてください)

## 設定手順
1. `Slack`にて`Incoming Webhook`を追加し、`webhook url`をメモする
2. `Google Forms`でアンケートを作成。
3. アンケート作成後、そのままformsから`スクリプトエディタ`を起動し、下のコードを貼る
4. 適宜テキストなどを編集し、さきほどメモった`webhook url`もコード内に貼る。
5. onFormSubmit関数をフォーム送信時に実行するようにトリガーを設定

スクリプトエディタに貼り付けるコードの内容

```js
function sendToSlack(data, url) {
  var payload = JSON.stringify(data);
  var options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : payload
  };
  UrlFetchApp.fetch(url, options);
}

function onFormSubmit(e){
  // webhook url
  var POST_URL = ""; // SlackのIncoming Webhook urlを入力
  
  var data = '';
  var formResponse = e.response;
  var itemResponse = formResponse.getItemResponses();
  for (var i = 0; i < itemResponse.length; i++) {
    var formData = itemResponse[i];
    var title = formData.getItem().getTitle();
    var response = formData.getResponse();

    // アンケート項目
    data += title
    data += ':\n'
    
    // 項目への回答内容
    data += response
    data += '\n'
  } 
  
  var attach = {
    pretext: 'アンケートに回答がありました',
    title: 'アンケート結果',
    text: data,
    color: "#7CD197"
  }
  
  var attachments = []
  attachments.push(attach);
  
  var jsonData = {
    username: "アンケート回答",
    channel: "", // 送信したいチャンネル名を入力してください
    icon_emoji: ':hatching_chick:', // お好みで絵文字を
    attachments: attachments
  }

  sendToSlack(jsonData, POST_URL);	
}
```

かなり雑ではありますが、こだわらなければ、これでおよそ10分ほどで設定が行なえます。

## V8ランタイムを用いた書き方 - ECMAScript 2015(ES6)対応版

気づけばGoogleのApps Scriptは[ランタイムがV8](https://developers.google.com/apps-script/guides/v8-runtime)になり、ECMAScript 2015(ES6)が利用できるようになっていたため、そちらに対応したコードも載せました。

処理の内容は上に載せたコードと同一です。


```javascript
const sendToSlack = (data, url) => {
  const options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : JSON.stringify(data),
  };
  
  UrlFetchApp.fetch(url, options);
}

const onFormSubmit = (e) => {
  // webhook url
  const POST_URL = ""; // SlackのIncoming Webhook urlを入力

  let data = '';
  const itemResponse = e.response.getItemResponses();
  
  for (let i = 0; i < itemResponse.length; i++) {
    const title = itemResponse[i].getItem().getTitle();
    const response = itemResponse[i].getResponse();

    // アンケート項目
    data += title
    data += ':\n'

    // 項目への回答内容
    data += response
    data += '\n'
  } 

  const attach = {
    pretext: 'アンケートに回答がありました',
    title: 'アンケート結果',
    text: data,
    color: "#7CD197"
  }

  const attachments = []
  attachments.push(attach);

  const jsonData = {
    username: "アンケート回答",
    channel: "", // 送信したいチャンネル名を入力してください
    icon_emoji: ':hatching_chick:', // お好みで絵文字を
    attachments: attachments
  }

  sendToSlack(jsonData, POST_URL);  
}
```