GASを使って、サーバーレスでSlackを拡張する ~ tips共有アプリ作ってみた ~


こんちには、エバーセンスの江上です。
『毎日頻度高く使っているSlackを拡張したら、仕事効率があがるんじゃないか？』と思い、GASを使ってtips共有アプリ(kowaza)作ってみました。
サーバーレスでSlackアプリを作成する際の参考になれば幸いです。
ソース及び、英語での説明文は、githubで公開しています。
[github](https://github.com/eversense/kowaza)


## kowazaの概要
毎日tipsをSlackにシェアして、そのフィードバックを得られる

### 基本機能
1. あらかじめスプレッドシートに記載しておいたtipsをSlackに通知
2. チームメイトから、そのtipsに対するフィードバックを取得
3. そのtipsに対する評価をSlackに通知

### 完成図
Slackにtipsを通知
![slackに通知.png](https://qiita-image-store.s3.amazonaws.com/0/68146/09a5d099-5a50-0236-f904-ede84d1bc2bb.png "slackに通知.png")

フィードバックを取得（SpreadSheetに溜まる）
![フィードバック取得.png](https://qiita-image-store.s3.amazonaws.com/0/68146/770f77f8-67be-2743-0eda-96898a25e1e8.png "フィードバック取得.png")

tipsに対する評価をSlackに通知
![結果の通知.png](https://qiita-image-store.s3.amazonaws.com/0/68146/609bc246-f3ba-dcf9-c31d-d719bce06047.png "結果の通知.png")


### おおまかなデータの流れと使ってる技術
1. GASがスプレッドシートから今日のデータを取得し、Incoming Webhookを用いてSlackに通知
2. ユーザーがメッセージ内のボタンを押すとSlack Appのinteractive componentsを使ってGASを叩き、SpreadSheetにデータが書き込まれる
3. 再度、GASがスプレッドシートから評価データを取得し、Incoming Webhookを用いてSlackに通知


## 実装手順
### おおまかな実装の流れ
1. tipsを書き込むスプレッドシート作成
2. GAS作成
3. GASをウェブアプリケーションとして導入して、url取得
4. Slack Appの作成
5. GASを修正
6. GASのスケジュール設定

### 1. スプレッドシートの作成
以下のシートをコピーしてください
https://docs.google.com/spreadsheets/d/1_OJlIpmWTjKlkePT5qB9HKapAH1Dpr2ucjvNyNQxC90/edit#gid=0


### 2. GASを作成
以下のスクリプトをコピーしてください
https://github.com/eversense/kowaza/tree/master/src
![copy gas.png](https://qiita-image-store.s3.amazonaws.com/0/68146/13c5b9ee-d8cf-e89c-d239-0fceecb76fa5.png "copy gas.png")

それぞれのファイルは以下のことを行なっています。

```
notifier.gs ... Slackにtipsを通知
endpoint.gs ... フィードバックを取得するためのAPIエンドポイント
reporter.gs ... tipsに対する評価をSlackに通知
```

### 3. GASをウェブアプリケーションとして導入して、url取得
1. 公開 > ウェブアプリケーションとして導入... を選択
![publish as web app.png](https://qiita-image-store.s3.amazonaws.com/0/68146/5623e8b9-e27b-708d-6a7c-2f463f208cdf.png "publish as web app.png")

2. バージョンを新規作成
バージョンや公開範囲をきめます
![publish.png](https://qiita-image-store.s3.amazonaws.com/0/68146/e2ed5598-8f3a-87aa-f0ff-60c919416fd7.png "publish.png")

3. GASの実行urlを取得
ウェブアプリケーションのURLは、次のSlackApp作成時に使うのでメモしておきます
![get spreadsheet url.png](https://qiita-image-store.s3.amazonaws.com/0/68146/bc114be7-b8db-a851-b338-6f3445139f53.png "get spreadsheet url.png")

### 4. Slack Appの作成
1. Slack App作成urlに遷移
https://api.slack.com/apps

2. 「Create New App」をおして、新規作成
名前とSlackAppを導入したいworkspaceを選択します
![create slack app.png](https://qiita-image-store.s3.amazonaws.com/0/68146/272f2897-e595-66eb-5c8b-b771cab80030.png "create slack app.png")

3. Incoming Webhookを作成
サイドバーからIncoming Webhookを選んで、tipsを投稿したいチャンネルを選択します。
発行されたWebhook urlは、次のGAS修正時に使うのでメモしておきます
（ここでは本番用 #kowaza と 開発用 #sandobox を設定しています）
![setup incoming webhook.png](https://qiita-image-store.s3.amazonaws.com/0/68146/621813ec-9b96-001f-de49-13d5694fc89a.png "setup incoming webhook.png")

4. Interactive Componentsを設定
先ほど取得したGASの実行urlをInteractive ComponentsのRequest URLとして設定します
![setup_spreadsheet_url.png](https://qiita-image-store.s3.amazonaws.com/0/68146/6cc1a2ea-88d1-fb48-31fb-be49aa203ce2.png "setup_spreadsheet_url.png")

### 5. GASを修正
先ほど取得したWebhook urlを`constants.gs`の`YOUR WEBHOOK URL`の部分に挿入します

### 6. GASのスケジュール設定
`notify`と`report`関数を定期実行するように設定します。
ここでは、午後1時くらいに`notify`を実行し、tipsを投稿し、午後7時くらいに`report`を実行して評価を投稿しています
![set up schedule.png](https://qiita-image-store.s3.amazonaws.com/0/68146/80daa251-950a-71e1-df23-2bb9d7e46800.png "set up schedule.png")

## 最後に
めでたく毎日tipsがSlackに流れてきて、業務効率を高めるきっかけをつくるアプリが完成しました


今回は業務として投稿してるので、宣伝です。
eversenseでは、技術で家族を幸せにしてくれる仲間を募集しています。よかったら応募してね。
https://www.wantedly.com/companies/eversense-co/projects