Slackで簡単に勤怠管理！【GAS】

##はじめに
※2020年04月18日に執筆したものです。
いよいよ緊急事態宣言が全国に拡大しましたね。
これをきっかけにリモートワークが始まり、慣れない環境に苦労している方もいるかと思います。
そこで、今回は勤怠を少し楽に管理できる方法を紹介したいと思います。


##概要
システムの流れは以下の通り

1.Slackの指定チャンネル上で[**出勤**]or[**退勤**]から始まるメッセージが投稿される
2.Slack Appの[**Outgoing Webhook**]が反応し、入力内容やユーザー情報を渡して**GAS**を起動
3.渡された情報を**GAS**がスプレッドシートに書き込む

##必要なもの
- Googleアカウント
- Slackのワークスペース（勤怠記録用のチャンネルがあることが望ましい）

これだけ、もちろん無料で出来ます。


##どうやるの？

####1.SlackのワークスペースにSlack APIの[Outgoing Webhook]を導入する
[このURL](https://slack.com/apps/A0F7VRG6Q-outgoing-webhook)から[Slackに追加]をクリック
※Appの検索からでも構いません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/03976a1b-c5c0-33d6-1a3f-bb66c1edac35.png)

######[Outgoing Webhook インテグレーションの追加]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/b4fb81e7-924f-6317-3dc0-161bce0c5193.png)

######Outgoing Webhookが有効になったので、以下の通り設定をしていきます


- チャンネル：出退勤を投稿するチャンネルを選択
- 引き金になる言葉：出退勤を検知するキーワードを入れます（複数単語の場合はカンマ区切り）
- URL：空欄のままで、後ほどGASのURLを入れるのに使います
- トークン：後ほど使いますのでメモ帳か何かに控えておいてください
- 説明ラベル：何に使うのか書いておきましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/3aec4587-a488-4f52-9bfa-e6566d5bba18.png)

######名前やアイコンなどを設定したら[設定を保存する]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/d649f66a-fc25-446e-d6c5-12d51db8cb90.png)

####2.GASとスプレッドシートを作成します

######まずは、勤怠を記録するスプレッドシートを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/ded5c8a9-333d-0b4d-06eb-9c4d89cd42fa.png)

######ツールの[スクリプトエディタ]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/823c3848-1cbf-2704-9149-4de5c6b3f6d7.png)


######エディタが開いたら、書いてあるコードを消して以下コードを入力
```
function doPost(e) {
  //シート1はシート名に応じて変更
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');

  //先ほど控えたOutgoing Webhookのトークン
  var token = 'jWRJuACFVRiaatBRsf5A48GU'
  
  //送られてきたトークンが正しければ勤怠を記録する
  //parameterは必要に応じて変更してください
  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
}
```

####3.作成したスクリプト(GAS)を公開する

######公開から[ウェブ アプリケーションとして導入]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/aaf8c5d4-7e5d-c1e5-364e-be3eeb7a3b9f.png)

######適当な名前を付けて[OK]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/0ed60b35-e6aa-122b-6d0b-8c881932d6ef.png)

######Who has access to the appを[Anyone,even anonymous]に変更し、[Deploy]を選択
slack apiが利用するので、誰でも使えるよう設定して実装します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/4fd99159-eee5-9c19-72cf-02c54c7966b5.png)

######以下画面が出ますので、[許可を確認]を選択しGoogleアカウントでログインしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/512fe9f4-6ba8-85cc-b7cb-1061277c4aca.png)

######ログインしたら[詳細を表示]を選択し、以下の画面になるので、[プロジェクト名（安全ではないページ）に移動]を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/1493cfde-39c4-723e-d3d5-3f01edc79d5a.png)

######すると、以下の画面が出ますので[許可]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/bd271121-22ff-371f-a2bf-4d529c20a5f6.png)

######アプリが実装されたので、URLを控えます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/8fb7349b-117e-187b-88b8-22408f5ecadc.png)


####4.Outgoing WebhookにGASを起動するよう設定する

######Outgoing Webhookの設定画面に戻り、先ほど空欄にした[URL]に実装したアプリのURLを入力し、保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/acfd2b2e-d7e5-d3e8-f8a2-65895980c8a0.png)

####5.完成です！

######Slackに入力して試してみましょう
Outgoing Webhookで指定したチャンネルで「出勤しました」と投稿してみましょう
スプレッドシートにデータが記述されましたか？おめでとうございます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428437/b311d78f-ceeb-3c1a-925b-db150b146b0f.png)

今回は紹介しきれませんでしたが、
別シートでこのデータを集計して勤務表を作ったり、
botに返信させたりすることもできますよ！

##おわりに
簡単なのでぜひ試してみてください