あえて言おう、Slackはデータベースではないと！！【Slack】【Google Form】

ぼく（元エンジニア）:boy_tone1:「面談の所感、どこに書いてもらおうかなぁ・・」
同僚（非エンジニア）:boy_tone2:「Slackに書いてもらえばいいじゃん」
ぼく（元エンジニア）:boy_tone1:「・・・・・・・・・・」

# あえて言おう、Slackはデータベースではないと！！
データって回収するだけじゃなくて、ソートしたり、整形したりするじゃないですか。ただ、それをSlackにまとめちゃうとデータとしての価値が減っちゃうと思って、**絶対にSlackをデータベースなんかにしてやるものか**と強い気持ちを抱いて今回に至りました。

とはいえ、いちいちGoogle Form確認したり、スプレッドシート見るのも面倒なので、やっぱり見るのはSlackでやりたいですよね。（ここら辺から意地を張り始めている）

## Google Formの内容をSlackに飛ばすよ！
今回の流れとしてはこんな感じです。
<img width="683" alt="flow-chart.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/2a0cf819-adf5-8ab2-58dc-6b490f1ce109.png">

1. 回答者がGoogle Formで回答を送信
2. 回答内容が自動でスプレッドシートに転記される
3. GoogleAppsScriptで回答内容をSlackで飛ばす
4. みんなSlackで内容見れてハッピー♡

## Incoming WebhookのURLを取得する
Incoming Webhookは、以前は単体の設定だけで問題なかったですが、仕様が変わり、現在はSlack Appを立ち上げる必要があります。
参考：[slackのIncoming webhookが新しくなっていたのでまとめてみた - Qiita](https://qiita.com/kshibata101/items/0e13c420080a993c5d16)

というわけで、Slack Appを作成するところから始めます。
https://api.slack.com/
**Start Building**をクリックします。

<img width="1432" alt="incoming-webhook-00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/edddccdb-a6d6-42a8-9636-e80b783b9eca.png">

アプリの名前を決めて、紐づけるワークスペースを設定します。

![incoming-webhook-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/b6c9de0f-764f-1e6d-2664-3c4f512d0607.png)

これでSlack Appが完成しました。ここから、Incoming Webhookの設定をしていきます。左メニューから**Incoming Webhook**を選択します。画面が以下のようになったら、右上のトグルを押して、Incoming Webhookをアクティベートします。

<img width="1430" alt="incoming-webhook-02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/e789c0fc-aca1-021f-9fda-0938a4ee5777.png">

アクティベートすると、下の方に**Add New Webhook to Workspace**というボタンが現れるので、そちらをクリックします。

<img width="1420" alt="incoming-webhook-03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/214a7cd2-3528-2533-3dee-e33da7486806.png">

画面が遷移したら、投稿するチャンネルを選択します。新方式で厳格になったようで、チャンネル指定でWebhook URLが発行されるようになりました。

![incoming-webhook-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/4037495b-aa8a-280e-c4c7-80d41d8cf10d.png)

これで、Webhook URLが取得できるようになりました！同じアプリから他のチャンネルに投稿したいと思ったら、再度**Add New Webhook to Workspace**から追加してあげれば問題ないです。

![incoming-webhook-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/658119dd-9396-57cf-a3a1-5557e9fcc18b.png)

これでOK!


## GoogleAppsScript（GAS）で飛ばす
次にGoogle Formに対してGASを当てていきます。右上のメニューから **スクリプト エディタ** を選択すると、GASのページに飛んでくれます。

<img width="327" alt="google-form-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/da25aab8-608b-7da6-49c4-f37d504c9350.png">

今回、書いたコードは以下の通りです。
（[Slack + Google Forms (Google Apps Script)を組み合わせて、およそ10分でフォームの回答結果をSlackに通知させる設定を行う](https://qiita.com/shinshin86/items/8d6844679d27e4782874)を参考にさせていただきました。）

```javascript:code.gs
function onFormSubmit(e){
  // webhook url
  var POST_URL = "https://hooks.slack.com/services/hogehoge/fugafuga"; // SlackのIncoming Webhook urlを入力

  var data = '';
  var formResponse = e.response;
  var itemResponse = formResponse.getItemResponses();
  var email = e.response.getRespondentEmail();
  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\n'
  } 
  
  var staffs = {
    'hogehoge@sample.co.jp':'ほげほげ',
    'fugafuga@sample.co.jp':'ふがふが'
  };

  var attach = {
    pretext: staffs[email] + 'さんが対応報告を提出しました！',
    title: ':fairy: 対応内容 :fairy: \n',
    text: data,
    color: "#7CD197"
  }

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

  var jsonData = {
    attachments: attachments
  }

  sendToSlack(jsonData, POST_URL);  
}

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

```

今回はFormで取得したメールアドレスで回答者の氏名を識別したかったので、以下のように書いておきました。たぶんここはもっと良い方法があると思っている。

```javascript

var staffs = {
    'hogehoge@sample.co.jp':'ほげほげ',
    'fugafuga@sample.co.jp':'ふがふが'
};

var attach = {
    pretext: staffs[email] + 'さんが対応報告を提出しました！',
    title: ':fairy: 対応内容 :fairy: \n',
    text: data,
    color: "#7CD197"
}
```

## Slackに結果が送られてくる
こんな感じで送られてきました。やったぜ！！
<img width="455" alt="slack-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309087/62dd0c04-29ca-bfaa-c304-c4a189cc363d.png">

## Slackはコミュニケーションツールであって、データベースではない
っていう話を言いたかった。