slackの複数機能とGASを組み合わせて「勤怠報告・勤怠確認」を実装する

# この記事で出来るようになること
- slack上で３〜５クリックするだけで出勤・退勤などの状況報告
- スラッシュコマンド実行だけで、メンバーの勤怠状況をひと目で確認

![スクリーンショット 2020-12-19 23.31.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/911a11a2-98ba-617b-17ed-e1b31e6dd7af.png)

# 経緯
皆様の会社では勤怠報告いかがされていますでしょうか？
自分の所属する部署では、[以前の記事で紹介](https://qiita.com/marogoma/items/5e92a297a1a1a372e887)したslackのワークフローを用いた出勤/退勤etc報告をしています。
しかし、メンバーが増えた関係で「今現在の勤怠状況を一覧表示して確認」できる必要性が出ました。
（突発的な打ち合わせをする前に「他拠点の人たちが昼を済ませたか確認」などで有用です。）
以下に、この問題を解決するために実装した仕組みをご紹介します。

# 組み合わせる機能
- ワークフロービルダー
- スラッシュコマンド
- Bot(slack apps)
- GoogleAppsScript

この4種類を組み合わせます。処理の流れは下記の図のとおりです。

## 勤怠報告する側
![スクリーンショット 2020-12-20 11.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/069d439a-1ab9-6b17-b4fb-e6228a226f0a.png)

### キーとなる処理
- ワークフローで生成される投稿は、botに対してメンションをつけることが可能です。
例： `@attendBot 出勤しました`
- slackのbotの設定で「メンション付きの投稿を受けた場合に、そのイベントをトリガーとして特定のURLにpostする」と設定することが可能です。[参考:公式ドキュメント](https://api.slack.com/events/app_mention)
- つまりこの２つを組み合わせると、ワークフロー経由で「特定のURLに"事前に定めた内容をpostする"」ということが可能となります。


## 一覧出力する側
![スクリーンショット 2020-12-20 11.20.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/699b6f73-c10f-6b3b-3fe4-cb5b1ba4a8c1.png)
こちらの出力する側は、特別変わったことはやっていません。

# 実装手順
## GoogleAppsScriptのコード
[こちら](https://github.com/marozex/myGas/blob/master/attendBot/code.gs)のgithubリンクをご確認ください。

- 報告側でbotからのpostを受ける
- 出力側でスラッシュコマンドを受ける

という処理をしているだけなので、詳細な説明は割愛させていただきます。
[postMessage](https://api.slack.com/methods/chat.postMessage)ではなく[postEphemeral](https://api.slack.com/methods/chat.postEphemeral)を使うことで「一覧出力したことを実行者以外に分からないようにする」配慮を入れています。
※もしGASでslackの通信を受けることに慣れていない方は、[以前の解説記事](https://qiita.com/marogoma/items/93c1825454e03ee79523)をご覧ください。

## slackのbotの設定
botでメンションつき投稿を受ける設定が必要なので、その手順を下記にまとめます。

### 1.Apps追加
[slackAppsのページ](https://api.slack.com/apps)にアクセスし、
CreateNewAppを押します。
![スクリーンショット 2020-12-19 22.58.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/ebb38c49-d2f8-5812-bb24-f443528f57ca.png)

### 2.Appの名称設定
AppNameに適当な名前を入力し、CreateAppします。
![スクリーンショット 2020-12-19 22.59.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/6930d84c-79d4-05b8-f5f3-25a251ff8c8f.png)

### 3.権限設定
画面左列のBasic InfomationからPermissionsを選択します。
![スクリーンショット 2020-12-19 23.04.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/93ee50c3-83c2-d44b-fdf1-d34af43af757.png)

### 4.Scope追加
Add an OAuth Scopeを押して、`app_mentions:read`と`chat:write`を追加します。
![スクリーンショット 2020-12-19 23.06.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/578680f2-cf1b-32e9-a8b1-784156ea942c.png)
これでbotが「メンション付き投稿の認識」「投稿」が出来るようになります。

### 5.GASスクリプトのURL取得
ここで一旦GASのスクリプトが通信を受けるURLを取得します。
この手順は[以前の記事の1-5の手順](https://qiita.com/marogoma/items/e3003564c1b8b7b09e29#1-5%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AEurl%E5%8F%96%E5%BE%97)をご確認ください。
`https://script.google.com/macros/s/*****〜` というURLを取得しておきます。

### 6.Event設定
左列のEvent Subscriptionsから、Enabele EventsをOnにします。
また、Request URLには先程の5.で取得したGASのURLを入力します。
![スクリーンショット 2020-12-19 23.12.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/918c4b1a-ef1e-ec38-3a77-8ae1f6c48fb6.png)

これでメンション付き投稿をトリガーとして、GASにpostされるようになります。

### 7.Slash Commands設定
#### 7-1.コマンド追加
Create New Commandを実行します。
![スクリーンショット 2020-12-19 23.12.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/133a7548-1a7b-cf14-cbcc-6b1afcb3d46e.png)

#### 7-2.コマンドの各種設定
Command名、URL、説明を埋めてSaveします。
Request URLは5.で取得したGASのURLを入れてください。
![スクリーンショット 2020-12-19 23.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/0462c429-7f84-617d-3ab0-81e54805b66f.png)

### 8.OAuth設定
#### 8-1.Workspaceへの追加
画面左列のOAuth&Permissionsから、Install App to Workspaceを押します。
![スクリーンショット 2020-12-19 23.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/83fa79b4-340a-17ed-bf6a-c4d26a6cde98.png)

#### 8-2.追加
4.で追加したScopeが与えられていることを確認して、Allowを押します。
![スクリーンショット 2020-12-19 23.15.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/0c363538-7599-aca3-a7f8-4cb09a130450.png)

### 9.OAuth Token取得
画面左列のInstall Appから、トークンの値を取得します。
![スクリーンショット 2020-12-19 23.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/a67b073d-2e86-30e6-3dd7-a6dcfea43ff3.png)

### 10.Verification Token取得
左列のBasic Informationから、Verification Tokenの値を取得します。
![スクリーンショット 2020-12-19 23.17.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/012674c7-005b-3436-0fbb-a8cae86a1b26.png)

### 11.GASへのトークン登録
上記の9.及び10.で取得したトークンをGASスクリプトに登録します。
この手順に関しては[以前の記事の手順3-1](https://qiita.com/marogoma/items/e3003564c1b8b7b09e29#3-1token%E3%81%AE%E7%99%BB%E9%8C%B2)をご確認ください。

以上でslackAppの設定は終了です。

## slackAppの導入
### 1.チャンネルへApp(botユーザー)を追加
勤怠報告を実施するチャンネルを開き、Detail(画面右上のアイコンから開く)から「Add apps」を押します。
![スクリーンショット 2020-12-19 23.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/dc6de361-6e86-542e-5b91-34031677936e.png)

### 2.bot追加
Addします。
![スクリーンショット 2020-12-19 23.21.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/66359dc1-d5e6-14c1-d7d4-218a807063b4.png)

### 3.BotのID特定
[users.listのapiページ](https://api.slack.com/methods/users.list/test)でTestMethodを実行し、botの名前でページ内検索(command+f)をして、botのIDを取得します。
![スクリーンショット 2020-12-19 23.44.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/8fa72741-3983-90a9-39fa-e2ffbfb1da56.png)

## ワークフローの設定
ワークフロー自体の導入は[以前の記事の手順9](https://qiita.com/marogoma/items/5e92a297a1a1a372e887#%E6%89%8B%E9%A0%869-%E4%B8%8B%E5%9B%B3%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E8%B3%AA%E5%95%8F%E9%81%B8%E6%8A%9E%E8%82%A2%E3%82%92%E8%A8%98%E8%BC%89%E3%81%97%E3%81%A6%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B)をご確認ください。
ワークフローで投稿される内容の先頭にbotのIDを`<>` で括って追記します。
上記の「3.BotのID特定」で特定したIDが `U01ABCDEF23` だったとすると、
フォームの選択肢としては `<@U01ABCDEF23> :sunny: 出勤` とすることで、
botにメンションがついた形式で表示されます。
![スクリーンショット 2020-12-20 13.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/b888ae51-9c2e-44de-cf0e-0f4fcf86e1fd.png)

# 最後に
以上ですべての設定が完了しました。

- ワークフローから勤怠報告
- スラッシュコマンドから勤怠一覧出力

というのがお手元で確認できると思います。

設定手順が長くなってしまったのですが、この「ワークフロー、bot、スラッシュコマンドの組み合わせ」では様々なことが自動化できると思いますので、活用して頂ければ幸いです。
ご精読ありがとうございました。