Googleformからのslack通知設定方法

# 目的
googleformの提出があったときに、自動的にslackに通知がくるようにする。

# 手順
## 1. Googleformの作成
Googleドライブにアクセスし、「新規」と書かれたボタンから、「その他」→「Googleフォーム」を選択する。


![alt](https://www.evernote.com/l/AgsjuoAECj1HNrEYw_zB73R9Cqn62YnoT5kB/image.png)


すると、Googleフォーム作成画面に行くので、作成する。
今回は以下のように作成しました。

![alt](https://www.evernote.com/l/AguTdKG0Tu9N1pyPkY2RUC77uYaoo8TyFYAB/image.png)

**<作成ポイント>**
質問はなるべく短い言葉で作る。(今回の場合は「日付」,「氏名」，「好きな言語」)


## 2. slackのwebhookのtokenの発行
通知をしたいslackのチャンネルに入り、チャンネル名をクリックして出て来るプルダウンから、**「Add an app or integration」**をクリックする。

![alt](https://www.evernote.com/l/AguGYvovRX5FQ540tVMK44sRz9R3AcPK3E4B/image.png)

すると、以下のようなwebページに遷移します。

![alt](https://www.evernote.com/l/AguK5t0s8u1FV4c0JbdvRlLwbhGMA2_WmrMB/image.png)

検索窓に**「Incoming Webhook」**と入力し、Incoming WebHooksを選択します。

![alt](https://www.evernote.com/l/AgvzgvdLLm5NUp0phPJABqKltBVry2ZqabAB/image.png)

遷移したページの**「Add Configuration」**をクリックします。

![alt](https://www.evernote.com/l/Ags1LRgC8N5DhLygUtevdyDB1tCAnGnqF2kB/image.png)

「Post to Channel」が通知を受け取りたいチャンネルであることを確認し、**「Add Incoming WebHooks integration」**
をクリックします。

![alt](https://www.evernote.com/l/AgsxL1w-ugxDZKcmdUKvr0sEtGEGETQ2sYwB/image.png)

遷移したページの**「Webhook URL」**をメモしておく。

![alt](https://www.evernote.com/l/Agv6Ku1xlp9OWrbB5A5Uxw1KwPKP07D-ruUB/image.png)

## 3. スクリプトの作成
slackに通知するためのスクリプトを作成していきます。
Googleサービスと連携でき、ドライブ上のファイル等を操作することができるGoogleAppleScript(GAS)を用います。基本はJavascriptで書くことができます。
先程作成したGoogleフォームの画面から、右上にあるボタンから、**スクリプトエディタ**を選択します。

![alt](https://www.evernote.com/l/AgubiVsd5xdBiZ5ls7og-c2rjg9Xf84LAgYB/image.png)

以下のような画面になっていれば大丈夫です。

![alt](https://www.evernote.com/l/Agt6v7QlkOxIYIpbMUq_QILLw6FAa_OSRDQB/image.png)

以下のスクリプトをコピー＆ペーストしてください。

```js
function sendToSlack(body, channel) {
  var url = "https://hooks.slack.com/services/・・・・・・・・・・・・・・・・(先程メモをしたアドレス)";
  var data = { "channel" : channel, "username" : "Googleフォーム Bot", "text" : body, "icon_emoji" : ":date: " };
  var payload = JSON.stringify(data);
  var options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : payload
  };
  var response = UrlFetchApp.fetch(url, options);
}

function test() {
  sendToSlack("テスト通知確認です", "#通知したいチャンネル名");
}

function onFormSubmit(e){

  var body = "Slack通知テストフォームが来たよ！\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();

    switch (title) {
      case "日付":
        date = response;
        break;
      case "氏名":
        name = response;
        break;
      case "好きな言語":
        language = response;
        break;
      default:
        break;
    }
  }
  var bodyPublic =  body + "日付:" + date + "\n氏名:" + name + "\n好きな言語:" + language ;
  sendToSlack(bodyPublic, "#通知したいチャンネル名");
}
```



コピー＆ペースト、編集が出来たら、保存しましょう。

![alt](https://www.evernote.com/l/Agt67XLTH6tLrYncyJFldMm37-mieik8OjkB/image.png)

テスト投稿をして、通知が来ることを確認します。
左上の方にある、「関数を選択」から、**test**をクリックします。

![alt](https://www.evernote.com/l/Agvn39jG0CJKH52IVnQdaHWLdG0_s8TA3PgB/image.png)

すると、「関数を選択」の左にある虫のようなマークがクリック出来るようになるので、クリックします。
クリックすると、「承認が必要です」と言われるので、順に許可していきます。

![alt](https://www.evernote.com/l/AgvUyJmiGcNEnKmwDF-zvyV6JZ2nt_F58dQB/image.png)


slackに通知が来れば、成功です。

![alt](https://www.evernote.com/l/AgvP4UjlGDtDOp8lq0Syn3XaIidM9BncUY8B/image.png)

つぎに、実際にフォームを送信した時に通知が来るように設定します。
まず、「関数を選択」の部分を**onFormSubmit**にします。その後、**時計マーク**をクリックします。
すると、以下の画面のようになるので、トリガーを追加しましょう。

![alt](https://www.evernote.com/l/Agvu2ztDm69JF5z6V3QP02wC4M75UllaNPYB/image.png)

クリックすると、以下の画面のようになるので、実行を**onFormSubmit**に設定し、**保存**をクリックします。

![alt](https://www.evernote.com/l/AguixD5axJJAJ50ol-mi4Ee4sL06JtdcI_UB/image.png)

承認を求められるので、先ほどと同じように許可しましょう。
ここまで出来たら、実際にフォームを投稿しましょう。

![alt](https://www.evernote.com/l/AgsKyVd2HApOZanUVLwssmY2qSYfZRHi68MB/image.png)

「送信」を押し、slacｋに通知が来たら成功です。

![alt](https://www.evernote.com/l/Agu7IuakpI5GGqlf9NZDaBtVnNifC2Fa0acB/image.png)

# スクリプトの説明
## sendToSlack関数

```js
function sendToSlack(body, channel) {
  var url = "https://hooks.slack.com/services/・・・・・・・・・・・・・・・・(先程メモをしたアドレス)";
  var data = { "channel" : channel, "username" : "Googleフォーム Bot", "text" : body, "icon_emoji" : ":date: " };
  var payload = JSON.stringify(data);
  var options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : payload
  };
  var response = UrlFetchApp.fetch(url, options);
}
```

2行目
変数urlには、先程メモをしたWebhook URLを代入します。


アイコンを画像変更したい場合は、「"icon_url"： "画像のurl"」に変更します。


```js
  var data = { "channel" : channel, "username" : "Googleフォーム Bot", "text" : body, "icon_url" : "画像のURL" };
```


## test関数

```js
function test() {
  sendToSlack("テスト通知確認です", "#通知したいチャンネル名");
}
```

テスト投稿のための関数です。

## onFormSubmit関数

```js
function onFormSubmit(e){
  var body = "Slack通知テストフォームが来たよ！\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();

    switch (title) {
      case "日付":
        date = response;
        break;
      case "氏名":
        name = response;
        break;
      case "好きな言語":
        language = response;
        break;
      default:
        break;
    }
  }
  var bodyPublic =  body + "日付:" + date + "\n氏名:" + name + "\n好きな言語:" + language ;
  sendToSlack(bodyPublic, "#通知したいチャンネル名");
}
```

4行目

```js
 var itemResponse = e.response.getItemResponses();
```
e.responseでFormResponseオブジェクトが取り出せます。そこからgetItemResponsesを呼び出し、ItemResponseの配列が取り出せます。

6~24行目

```js
var title = formData.getItem().getTitle();
```
これにより、スプレッドシートのカラム名(googleフォームの質問)がtitle変数に代入されます。

```js
var response = formData.getResponse();
```
これにより、スプレッドシートのセルの値がresponse変数に代入されます。

switch文を用いることで、それぞれの変数に送信した情報を入力します。

25行目

```js
var bodyPublic =  body + "日付:" + date + "\n氏名:" + name + "\n好きな言語:" + language ;
```
通知の際に表示する内容をbodyPublic変数に代入します。

26行目

```js
sendToSlack(bodyPublic, "#通知したいチャンネル名");
```
通知したい内容(bodyPublid)と通知したいチャンネルをsendToSlack関数に渡します。


# メンションをつけるには
通知の際、メンションをつけるには、以下のように**"<!メンション先>"**と書きましょう。

```js
var body = "<!here> Slack通知テストフォームが来たよ！\n"; 
```