7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SlackAdvent Calendar 2020

Day 13

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

Last updated at Posted at 2020-12-20

この記事で出来るようになること

  • slack上で3〜5クリックするだけで出勤・退勤などの状況報告
  • スラッシュコマンド実行だけで、メンバーの勤怠状況をひと目で確認

スクリーンショット 2020-12-19 23.31.46.png

経緯

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

組み合わせる機能

  • ワークフロービルダー
  • スラッシュコマンド
  • Bot(slack apps)
  • GoogleAppsScript

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

勤怠報告する側

スクリーンショット 2020-12-20 11.16.40.png

キーとなる処理

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

一覧出力する側

スクリーンショット 2020-12-20 11.20.08.png
こちらの出力する側は、特別変わったことはやっていません。

実装手順

GoogleAppsScriptのコード

こちらのgithubリンクをご確認ください。

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

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

slackのbotの設定

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

1.Apps追加

slackAppsのページにアクセスし、
CreateNewAppを押します。
スクリーンショット 2020-12-19 22.58.30.png

2.Appの名称設定

AppNameに適当な名前を入力し、CreateAppします。
スクリーンショット 2020-12-19 22.59.22.png

3.権限設定

画面左列のBasic InfomationからPermissionsを選択します。
スクリーンショット 2020-12-19 23.04.16.png

4.Scope追加

Add an OAuth Scopeを押して、app_mentions:readchat:writeを追加します。
スクリーンショット 2020-12-19 23.06.00.png
これでbotが「メンション付き投稿の認識」「投稿」が出来るようになります。

5.GASスクリプトのURL取得

ここで一旦GASのスクリプトが通信を受けるURLを取得します。
この手順は以前の記事の1-5の手順をご確認ください。
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

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

7.Slash Commands設定

7-1.コマンド追加

Create New Commandを実行します。
スクリーンショット 2020-12-19 23.12.46.png

7-2.コマンドの各種設定

Command名、URL、説明を埋めてSaveします。
Request URLは5.で取得したGASのURLを入れてください。
スクリーンショット 2020-12-19 23.14.26.png

8.OAuth設定

8-1.Workspaceへの追加

画面左列のOAuth&Permissionsから、Install App to Workspaceを押します。
スクリーンショット 2020-12-19 23.18.41.png

8-2.追加

4.で追加したScopeが与えられていることを確認して、Allowを押します。
スクリーンショット 2020-12-19 23.15.19.png

9.OAuth Token取得

画面左列のInstall Appから、トークンの値を取得します。
スクリーンショット 2020-12-19 23.16.22.png

10.Verification Token取得

左列のBasic Informationから、Verification Tokenの値を取得します。
スクリーンショット 2020-12-19 23.17.44.png

11.GASへのトークン登録

上記の9.及び10.で取得したトークンをGASスクリプトに登録します。
この手順に関しては以前の記事の手順3-1をご確認ください。

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

slackAppの導入

1.チャンネルへApp(botユーザー)を追加

勤怠報告を実施するチャンネルを開き、Detail(画面右上のアイコンから開く)から「Add apps」を押します。
スクリーンショット 2020-12-19 23.21.02.png

2.bot追加

Addします。
スクリーンショット 2020-12-19 23.21.21.png

3.BotのID特定

users.listのapiページでTestMethodを実行し、botの名前でページ内検索(command+f)をして、botのIDを取得します。
スクリーンショット 2020-12-19 23.44.35.png

ワークフローの設定

ワークフロー自体の導入は以前の記事の手順9をご確認ください。
ワークフローで投稿される内容の先頭にbotのIDを<> で括って追記します。
上記の「3.BotのID特定」で特定したIDが U01ABCDEF23 だったとすると、
フォームの選択肢としては <@U01ABCDEF23> :sunny: 出勤 とすることで、
botにメンションがついた形式で表示されます。
スクリーンショット 2020-12-20 13.49.21.png

最後に

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

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

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

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

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?