Googleフォームからslackに通知（Googleフォームとslack連携）

顧客からのご意見箱をGoogleフォームで作成したけど、それだけだと投稿してもらっても気づきにくい。
というわけでGoogleフォームとslackを連携した。
せっかくやったので設定手順を残す。

# slackで通知を受けるチャンネルを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/89e7643f-88e5-a072-f19c-f93c3ae9bf09.png)

#### Incoming Webhookをインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/fe7b86af-ceba-abbb-7fbb-807f3c1135ba.png)

`Incoming Webhook`を検索して「追加」ボタンを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/8ed77fb7-d9c0-cbe9-5c06-23d2a8e1b85c.png)

ブラウザでこんなページが表示されるので`Slackに追加`で追加する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/1779f1c3-09ca-c973-7982-b09dd16cdf1a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/1216bbec-18c4-2a92-8722-7a6ecbe5c32d.png)

#### Webhook URLを確認

Webhook URLを残してGoogle Formのスクリプトで使う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/1695347b-7058-bd8e-8014-dadae65a18ee.png)

# Google Formを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/2b260a18-409a-aa42-ad98-b377a8d8b910.png)

# Google Formのスクリプト作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/0f5abb3d-9caf-69db-9664-f018d75f0c29.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/ab071337-2dec-7ab5-77b5-1df41e8a2357.png)

## テスト通知をしてみる

functionを作成する。

* sendToSlack()・・・slackに送信する
* test()・・・テスト通知

```javascript
var channelName = "(ここにチャンネル名を書く)";

function sendToSlack(body, channel) {
  var url = "https://hooks.slack.com/services/~~~~~~~~(ここにWebhookURLを貼る)";
  var data = { "channel" : channel, "username" : "GoogleForm", "text" : body };
  var payload = JSON.stringify(data);
  var options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : payload
  };
  var response = UrlFetchApp.fetch(url, options);
}

function test() {
  sendToSlack("テスト通知", channelName);
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/f56c5807-3546-5d4c-dbe1-b788b0652e97.png)

保存ボタン押したら実行できるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/ccbdb2c1-acb4-c8fb-a9b1-853c90f5c145.png)

functionを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/07f8665a-1cd7-bc58-315a-9d05a1a20f68.png)

実行ボタンを押す。（デバッグでもいい）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/1f8f554c-7fd2-f6e2-8d1a-8c6c16264a5b.png)

### 権限確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/96b28a19-7bb3-a442-b127-bd66caee2fa3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/dc552444-76c8-8bae-63e3-baa7bb3f7562.png)

「詳細」のリンクを開くとこのように表示されるので一番下のリンクを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/e9dad4b2-6d6d-d60d-6db4-f6fd41c99388.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/2f0b6908-0aa0-753b-045e-3dc7b86b6ba6.png)

### slackに通知が来る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/1caf9e8f-9b2e-2893-503f-b44d236888ac.png)

# Google Formの内容を送信する

#### function追加

Apps ScriptにGoogle Formの内容を送信するfunctionを追加する。

```javascript
function onFormSubmit(e){

  var body = "<!channel>\n🍀アンケート投稿されました🍀\n\n"; 
  var applicant = "";
  var itemResponse = e.response.getItemResponses();

  for (var j = 0; j < itemResponse.length; j++){    
    var formData = itemResponse[j];
    var title = formData.getItem().getTitle();
    var response = formData.getResponse();

    var category = "";
    var mov_title = "";

    switch (title) {
      case "カテゴリー":
        category = response;
        break;
      case "映画タイトル":
        mov_title = response;
        break;
      default:
        break;
    }
  }
  var bodyPublic =  body + "【カテゴリー】" + category + "\n【映画タイトル】" + mov_title ;
  sendToSlack(bodyPublic, channelName);
}
```

追加したfunctionを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/d7f1cebb-7c67-dadb-3a40-95b05704f12d.png)

#### トリガーを設定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/808cc1be-c055-0d2f-1c75-a496293927b5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/1c2146c6-093e-574e-931d-8e09221ad43d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/2cb635e9-b842-6ec0-4b0b-cc122734017f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/53b53772-7cd6-14bf-60d4-a49081a3c32f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/a94ea9d3-49a4-adcf-b9a9-cd9ec396e56e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/f6b66636-873d-b458-17c3-19175277a0d3.png)

トリガー設定できたらこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/ff4a1cf6-df6d-bf7e-c3c1-c2f38f1d9c29.png)


# フォームから投稿してみる（最終確認）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/12b2287e-0f95-c9ec-6624-a04cf2861e69.png)

slackに通知が来た！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/cc291bef-a51c-095a-54a1-c30371534223.png)

# 参考記事

* [Googleformからのslack通知設定方法](https://qiita.com/pchan52/items/574e930a3cc42cf7f8b9)
* [Googleフォームの内容をSlack通知させて効率化した話](https://qiita.com/poster-keisuke/items/481ed083e1ab0ecb648e)
* [【コピペでOK！】GASでGoogleフォームの回答をSlackに自動通知する方法](https://www.yukibnb.com/entry/gas_form_auto_slack_to_channel)