SlackでWebhookサービスを使った出勤システム Excel(Googleスプレッドシート)出力,bot

## システムについて
slackのチャット上で"出勤 ~~~"や"退勤 ~~~"とコメントすれば、Excel(Googleスプレッドシートでその情報を管理するシステム
(目的) 最近友達と勉強会をやっているため勉強してる時間帯や頻度が分かればモチベーションになると思ったから。

## 準備
- Googleアカウント
    - GAS(Google Apps Script)を利用するため
- slack
    - 出勤確認用のチャンネルがあるのが望ましい


## 1 投稿した内容をExcelに反映させる
### 1-1 Googleスプレッドシートの用意
あらかじめ、Googleアカウントでログイン
Googleドライブを起動する
任意の場所にGoogleスプレッドシートを作成
### 1-2 SlackにOutgoing Webhookをインストール
Slackを起動
App --> Webhookと検索 --> Outgoing Webhookを選択
<img width="371" alt="スクリーンショット 2020-08-11 22.17.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/ececd048-b76e-3c42-ece5-15ac4d24c2cb.png">
![20200317232014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/93e56faf-80fa-4a63-c217-180693ef2b14.png)
![20200317232030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/d8d06b60-eff7-bb99-98b2-052923cbbb61.png)
### 1-3 Outgoing Webhookの設定
- チャンネル: 事前に用意していた出勤確認用チャンネルを使用
- 引き金となる言葉: 先頭に特定の文字がきた時のみアクションを起こすための言葉を設定
- URL: GAS(Google Apps Script)で取得するURLを貼り付ける
- トークン: <font color="DeepPink">1-4で使用</font> GASの接続の際に使用
<img width="1440" alt="スクリーンショット 2020-08-11 22.22.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/9b8dbe09-a2a7-5155-76da-ad4eba47369d.png">

### 1-4 GASの設定
作成したスプレッドシートを開く
メニューバーの"ツール" --> "スクリプトエディタ"
以下のように記述
<font color="DeepPink">トークンの書き換え忘れないように！</font>

```javascript
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var token = 'ここにはOutgoing Webhookのトークンを記述する'

  // Googleスプレッドシートにデータを追加する処理
  if (token == e.parameter.token){
    var datetime     = new Date();
    var date         = (datetime.getFullYear() + '/' + ('0' + (datetime.getMonth() + 1)).slice(-2) + '/' + ('0' + datetime.getDate()).slice(-2))
    var time         = (('0' + datetime.getHours()).slice(-2) + ':' + ('0' + datetime.getMinutes()).slice(-2));
    var user_name    = e.parameter.user_name;
    var trigger_word = e.parameter.trigger_word;
    var text         = e.parameter.text;
    array = [date,time,user_name,trigger_word,text];
    sheet.appendRow(array);
  }

  return
}
```
記述後、メニューバーの"公開" --> "ウェブアプリケーションとして導入"

設定項目

- Project version: "New"
- Execute the app as: "Me"
- Who has access to the app: "Anyone, even anonymous"

Deployボタンをクリック
Authorization required は Allow(許可)を選択
細かなエラーは[このページ](https://qiita.com/tawasi12/items/1c6a2b66a84401e52c01)を参照してください。
アプリ実装後、URLを取得

### 1-5 Outgoing WebhookにGASの導入
<font color="DeepPink">1-4</font>で取得したURLを<font color="DeepPink">1-3</font>で設定したOutgoing Webhoookの設定画面ないの<font color="DeepPink">URLの項目</font>にペースト
<img width="1440" alt="スクリーンショット 2020-08-11 22.22.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/9b8dbe09-a2a7-5155-76da-ad4eba47369d.png">

## 2 対話型Botの作成
投稿後反応がないと、スプレッドシートに勤務状況が記述されたか不安になるためBotからの反応を設定する
### 2-1 Incoming Webhookのインストール
1-2のOutgoing Webhookインストールと同様にインストール
### 2-2 Incoming Webhookの設定
- チャンネルへの投稿: 事前に用意していた出勤確認用チャンネルを使用
- Webhook URL: 2-3のGAS作成で使用
<img width="1440" alt="スクリーンショット 2020-08-12 13.30.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/e3e5c294-3569-edf8-3f8e-986642d9ee67.png">

### 2-3 Bot投稿用のGASの作成
#### 2-3-1 GASの記述
Googleドライブ内で "新規" --> "その他" --> "Google Apps Script"
以下のように記述する

```javascript
function doPost(e) {
 
  var message = "Excelシートに記録しました！";
 
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : message
      }
    )
  };
 
  UrlFetchApp.fetch("2-2で取得したURLを記述する", options);
}
```
#### 2-3-2 リソース設定
メニューバーの"リソース" --> "ライブラリ"を選択
Key: `M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO` で追加
バージョン: 22に設定
下の写真の状態で"保存"をクリック
<img width="690" alt="スクリーンショット 2020-08-12 13.38.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/b2e31e21-9819-8045-0c91-0fc466a99c77.png">

※ 設定後、再生ボタンをクリックするとSlackに変数messageの内容が投稿される。
### 2-4 GASのWebアプリケーションURLの取得
メニューバーの"公開" --> "ウェブアプリケーションとして導入"

設定項目

Project version: "New"
Execute the app as: "Me"
Who has access to the app: "Anyone, even anonymous"
Deployボタンをクリック
Authorization required は Allow(許可)を選択
細かなエラーはこのページを参照してください。
アプリ実装後、URLを取得

### 2-5 Outgoing WebhookからGASを呼び出す
<font color="DeepPink">2-4</font>で取得したURLを<font color="DeepPink">1-3</font>で設定したOutgoing Webhoookの設定画面ないの<font color="DeepPink">URLの項目</font>にペースト
<img width="1440" alt="スクリーンショット 2020-08-11 22.22.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/9b8dbe09-a2a7-5155-76da-ad4eba47369d.png">

## 3 テスト
Slack内の勤務管理チャットで先頭に設定したキーワードを加えて投稿する
Googleスプレッドシートが反映される
Botが反応を勤務管理チャット内に返す
<img width="370" alt="スクリーンショット 2020-08-12 13.51.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259737/c12e0097-7548-9cae-6aaa-0215a41aa0ee.png">


## 参考文献
1章: https://qiita.com/tawasi12/items/1c6a2b66a84401e52c01
2章: https://tech.camph.net/slack-bot-with-gas/

## 追記
2020/08/12 アップロード