SlackとGoogle Spreadsheetを連携して勤怠管理を効率化

# はじめに
Slackからメッセージが投稿されると、勤怠表に自動で「〇」が入るような仕組みがほしいとの依頼を受け、さっそく挑戦してみました。

# 準備するもの
今回の仕組みに必要なものは
* Slackチャンネル
* Google SpreadSheet（Slackデータ出力用・勤怠表）
の2つ。

# 手順
[1 SlackにOutigoing Webhookを追加する](#1-slackにoutigoing-webhookを追加する)
[2 Google SpreadsheetのGASの設定](#2-google-spreadsheetのgasの設定)
[3 GASをデプロイする](#3-GASをデプロイする)
[4 Slack Outigoing Webhook にURLをコピペ](#3-Slack-outigoing-webhookにURLをコピペ)
[5 結果](#5-結果)
### 1 SlackにOutigoing Webhookを追加する
- （1）Slackのワークスペース名をクリック
- （2）設定と管理 > アプリを管理する　の順にクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/d720a73d-7ca1-1437-b99e-887e100c37bf.png)
- （3）Slack app directory　のヘッダー検索ボックスで「Outigoing Webhook」を検索![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/98ab1877-27a0-20ed-bbd1-1320eb48a043.png)
- （4）「Slackに追加」をクリック![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/f2c0647f-0d6a-220c-1336-fb7a43049fc6.png)
- （5）インテグレーションの設定で、Slackからpostされるメッセージが送られてくるチャンネルを選択![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/70854711-f962-cdbe-1fba-c1919ed62848.png)
### 2 Google SpreadsheetのGASの設定
- （1）Google Spreadsheetを開き、拡張機能 > App Script をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/ba8c8060-42d2-f5ce-01d6-d1d476b239bf.png)
-  （2）ScriptエディタにApp Scriptを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/aa5bd003-bef6-5085-2c0d-636b7f613168.png)
```ruby:doPost
function doPost(e) {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('〇〇'); // 〇〇にはSlac通知を記録するシート名を入力する
    var token = '〇〇〇〇〇〇〇〇' // Outgoing Webhook のトークンを入力する
    if(token == e.parameter.token){
      var datetime = new Date();
      var date = (('0' + datetime.getDate()).slice(-2)); // 今回は年月日時の時刻のみ取得
      var username = e.parameter.user_name; //ユーザID
      var hour = datetime.getHours();  //hour変数に時刻の

      array = [date,username,hour];// 出社の確認はだいたい9時30分にしたいので、9時から10時までの間に出社連絡したもののみを記録するためにhour変数を配列に記録
      sheet.appendRow(array); //Slackのデータシートにデータを記録

      getValues(); //これは後から記述するgetValue関数をSlackにメッセージが送られる都度実行するためにここに記述
    }
}
```

```ruby:getValues
function getValues(){
  const sheet = SpreadsheetApp.getActiveSpreadsheet(); //spreadheet
  var token = '〇〇〇〇〇〇〇〇'　// ← Outgoing Webhook のトークンを入力する
  
  const sheetRecord = sheet.getSheetByName('record'); //Slackのデータシート
  const sheetTable = sheet.getSheetByName('table');　//管理用シート

  const arrayRecord = sheetRecord.getRange(1,1,sheetRecord.getLastRow(),3).getValues(); //Slack配列

  for(let i = 0; i < arrayRecord.length; i++){
    var data = arrayRecord[i][0]; //日付
    var menber = arrayRecord[i][1];　//ID
    var nowData = arrayRecord[i][2];　//時刻
    if(nowData >= 7 && nowData <= 10){
      console.log(menber);
      if(menber == 'hogehoge01'){
        var menmberNo = 3;
      }else if(menber == 'hogehoge02'){
        var menmberNo = 4;
      }else if(menber == 'hogehoge03'){
        var menmberNo = 5;
      }else if(menber == 'hogehoge04'){
        var menmberNo = 6;
      }else if(menber == 'hogehoge05'){
        var menmberNo = 8;
      }else if(menber == 'hogehoge06'){
        var menmberNo = 9;
      }else if(menber == 'hogehoge07'){
        var menmberNo = 10;
      }else if(menber == 'hogehoge08'){
        var menmberNo = 12;
      }else{
        continue;
      }
    }
    //記録表に書き込み
      var inputData = data + 1;
      sheetTable.activate();
      range = sheetTable.getRange(menmberNo,inputData);
      range.setValue('〇');
  }  
}
```
:::note alert
注意
理解順のためソースコードはdoPostの後にgetValueを記載したが、実際のGASには、getValueの後にdoPostを記述
:::
### 3 GASをデプロイする
-  （1）GASをデプロイする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/389c71fa-fc3f-d355-fcbe-6756fb4efea6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/1552d0ba-73a2-f22e-4e1e-f19ac9170870.png)

:::note alert
要注意
アクセスできるユーザーは「全員」をセレクト。
ここを「自分のみ」にしてしまっていてドはまり。
:::

-  （2）デプロイしたURLをコピーしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/96acb0c8-8015-9bbb-f62d-ebd75a5803f6.png)
### 4 Slack Outigoing Webhook にURLをコピペ
-  （1）手順の1のOutigoing Webhookの設定画面にアクセスし、URLにデプロイしたURLをペースト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/cd7b04b4-a612-43d9-6fb9-e75a7b781b9b.png)

***

### 5 結果
月の最後の方で作ったので出社印が27日以降になっていますが、無事出社マークが自動的に更新されるようになりました\::raised_hands::ﾔｯﾎｰ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726604/cc7b1545-7519-c91e-6e4b-c86ebf4e0a29.png)

***