実際に WESEEK で使っている勤怠入力システム「tickrec」の構成を元に、Slackで勤怠入力ができるアプリケーションを1から構築するための方法をレクチャーします。

1. 仕込み1
GASプロジェクトを
つくる
1

2. #WESEEK_tech
仕込み1 GASプロジェクトを作る
2
ここ

3. #WESEEK_tech
仕込み1 GASプロジェクトを作る
● 下記URLにアクセス
○ https://drive.google.com/drive/folders/1Wg34qvuCkRIMSL
wO2L32YK6NbBk_3WSV?usp=sharing
● 「超簡易版Tickrec向け勤怠シート」の「コピー
を作成」
● コピーしたspreadsheetを開く
3

4. #WESEEK_tech
仕込み1 GASプロジェクトを作る
● Spreadsheetの「ツール」から「スクリプト エ
ディタ」を開く
● GASプロジェクトのTitleを変更する
4

5. 仕込み1 Clear!!
5

6. STEP.1
GASで打刻する
6

7. #WESEEK_tech
STEP1 GASで打刻する
● ゴール
○ スクリプトエディタで関数を実行して、打
刻(開始時刻・終了時刻)ができる
● 実装する関数
○ recordAttendance()
■ 日付と開始時刻を記録する
○ recordLeaving()
■ 終了時刻を記録する
7

8. #WESEEK_tech
STEP1 GASで打刻する
8
ここ

9. #WESEEK_tech
STEP1 GASで打刻する
● あらかじめ仕込んでおいたコードがこちら
○ https://gist.github.com/kainosuke/e7454d60c0bab4d8651d271a99c2c3
fe
○ GAS_step1.gs というファイル
9

10. #WESEEK_tech
STEP1 GASで打刻する
● GASのタイムゾーンを設定する
● 古いスクリプトエディタへ切り替えて設定する
10

11. #WESEEK_tech
STEP1 GASで打刻する
● エディタにコピペしよう
● エディタの「実行」機能で動かしてみよう
11
実行する
functionを選択

12. #WESEEK_tech
STEP1 GASで打刻する
● 初回実行時にアクセス権限の許可が必要
12

13. #WESEEK_tech
STEP1 GASで打刻する
● GASでSpreadsheetを操作するには
○ Spreadsheet Serviceを使用する
■ 書き込み対象のセルの特定
■ セルに書き込み
■ 等々
○ see: https://developers.google.com/apps-script/reference/spreadsheet
● GASでログを出力するには
○ Loggerを使用する
○ エディタの実行ログで見られる
○ see: https://developers.google.com/apps-script/guides/logging
● サンプルコードでは、どのセルを選択しているか
ログ出力してある
○ 実行ログを見れば動きが分かる
13

14. STEP1 Clear!!
14

15. 仕込み2
Slack Appを
つくる
15

16. #WESEEK_tech
仕込み2 Slack Appをつくる
16
ここ

17. #WESEEK_tech
仕込み2 Slack Appをつくる
● slack api の apps page で新規作成する
○ https://api.slack.com/apps
17

18. #WESEEK_tech
仕込み2 Slack Appをつくる
● App Nameを入力する
● App開発に使うworkspaceを選ぶ
18

19. #WESEEK_tech
仕込み2 Slack Appをつくる
● DM書き込みに必要な権限を設定する
19

20. #WESEEK_tech
仕込み2 Slack Appをつくる
● DM書き込みに必要な権限を設定する
20

21. #WESEEK_tech
仕込み2 Slack Appをつくる
● DM書き込みに必要な権限を設定する
○ Bot Token Scopes
■ chat:write
■ im:write
21
権限を追加する

22. #WESEEK_tech
仕込み2 Slack Appをつくる
● 指定した権限をworkspaceからAppに付与する
22

23. #WESEEK_tech
仕込み2 Slack Appをつくる
● 指定した権限をworkspaceからAppに付与する
23

24. #WESEEK_tech
仕込み2 Slack Appをつくる
● 成功！
● workspaceのAppに追加される
24

25. #WESEEK_tech
仕込み2 Slack Appをつくる
● 成功！
● Bot User OAuth Token が発行される
○ GASから投稿するときの認証鍵として使う
25

26. 仕込み2 Clear!!
26

27. STEP.2
GASでSlackに
投稿する
27

28. #WESEEK_tech
STEP2 GASでSlackに投稿する
● ゴール
○ スクリプトエディタで関数を実行して、
SlackにDM投稿ができる
● 実装する関数
○ postSampleSlackDM()
■ 仮の文言でDM投稿する
28

29. #WESEEK_tech
STEP2 GASでSlackに投稿する
29
ここ

30. #WESEEK_tech
STEP2 GASでSlackに投稿する
● あらかじめ仕込んでおいたコードがこちら
○ https://gist.github.com/kainosuke/e7454d60c0bab4d8651d271a99c2c3
fe
○ GAS_step2.gs というファイル
○ コピペして既存のコードを全部上書きする
こと
● 2つのパラメータを設定する
○ Bot User OAuth Token
■ Slackに投稿するのに必要
○ Slack User ID
■ DM相手を特定するのに必要
30

31. #WESEEK_tech
STEP2 GASでSlackに投稿する
● システム環境ごとに変わるパラメーターは、GAS
のプロパティに設定するのが良い
○ コードと分離する
● プロパティの編集は古いスクリプトエディタへの
切替が必要
31

32. #WESEEK_tech
STEP2 GASでSlackに投稿する
● システム環境ごとに変わるパラメーターは、GAS
のプロパティに設定するのが良い
○ コードと分離する
● プロパティの編集は古いスクリプトエディタへの
切替が必要
32

33. #WESEEK_tech
STEP2 GASでSlackに投稿する
● slackBotUserOAuthToken に Bot User
OAuth Token を入力
33
行を追加して
プロパティ名を入力

34. #WESEEK_tech
STEP2 GASでSlackに投稿する
● slackDMUserId にSlackの自分のメンバーID
を入力
34
行を追加して
プロパティ名を入力

35. #WESEEK_tech
● 「新しいエディタを使用」をクリックして新エ
ディタに戻る
● エディタの「実行」機能で動かしてみよう
○ アクセス権限の追加許可が必要
35
実行する
functionを選択
STEP2 GASでSlackに投稿する

36. #WESEEK_tech
● GASから外部(Slack API)にHTTP Requestをす
るには
○ UrlFetchApp classを使う
○ see: https://developers.google.com/apps-
script/reference/url-fetch/url-fetch-app
● GASのプロパティに設定した値を参照するには
○ Properties Serviceを使って参照する
○ see: https://developers.google.com/apps-
script/guides/properties
36
STEP2 GASでSlackに投稿する

37. #WESEEK_tech
● Slackに投稿するには
○ chat.postMessage APIを使う
○ see: https://api.slack.com/methods/chat.postMessage
● 投稿内容を定義するには
○ Block Kitを使う
■ see: https://api.slack.com/block-kit
○ Block Kit Builderで試行錯誤
■ see: https://app.slack.com/block-kit-builder/
37
STEP2 GASでSlackに投稿する

38. STEP2 Clear!!
38

39. STEP.3
Slackの操作で
GASを動かす
39

40. #WESEEK_tech
● ゴール
○ スクリプトエディタで関数を実行して、
Slackにボタンを表示できる
○ ボタンを押すと、GASが応答してSlackに
新しい投稿ができる
● 実装する関数
○ postSampleSlackDM()
■ Slackにボタンを表示する
○ doPost()
■ GASのWebアプリ機能で使用する特
別な関数
■ Slackからの通知を受けて必要な処
理をする
40
STEP3 Slackの操作でGASを動かす

41. #WESEEK_tech
41
STEP3 Slackの操作でGASを動かす
ここ

42. #WESEEK_tech
● あらかじめ仕込んでおいたコードがこちら
○ https://gist.github.com/kainosuke/e7454d60c0bab4d8651d271a99c2c3
fe
○ GAS_step3.gs というファイル
○ コピペして既存のコードを全部上書きする
こと
42
STEP3 Slackの操作でGASを動かす

43. #WESEEK_tech
STEP3 Slackの操作でGASを動かす
● Web アプリとしてデプロイする
43

44. #WESEEK_tech
STEP3 Slackの操作でGASを動かす
● Web アプリとしてデプロイする
○ 説明を入力
○ 「次のユーザーとして実行」を自分にする
○ 「アクセスできるユーザー」を全員にする
44

45. #WESEEK_tech
● デプロイするとURLが表示される
45
STEP3 Slackの操作でGASを動かす

46. #WESEEK_tech
● Slack App の Interactivity を ONにする
● Request URLにGASのWebアプリのURLを設定
する
46
STEP3 Slackの操作でGASを動かす

47. #WESEEK_tech
● エディタの「実行」機能で動かしてみよう
○ postSampleSlackDM()
● Slackに表示されたボタンを押してみよう
47
STEP3 Slackの操作でGASを動かす

48. #WESEEK_tech
● Slackに投稿したボタンを押したことを外部
(GAS)に通知するには
○ interaction payloads機能がある
■ 今回は block_actions payloads を
使用した
○ see: https://api.slack.com/interactivity
● interaction payloadsにリアクション(投稿)する
には
○ response_url宛にPOSTする
○ response_urlはinteraction payloadsに
含まれる
○ 認証処理が不要な一時的なURL
48
STEP3 Slackの操作でGASを動かす

49. #WESEEK_tech
● GASで外部(Slack)からのHTTP Requestを受け
るには
○ Webアプリ機能を使う
○ HTTP GET method は doGet() function
が call される
○ HTTP POST method は doPost()
function が call される
○ see: https://developers.google.com/apps-script/guides/web
● HTTP Requestのresponse内容を指定するにはす
るには
○ Content Serviceを使用する
○ see: https://developers.google.com/apps-
script/guides/content
49
STEP3 Slackの操作でGASを動かす

50. STEP3 Clear!!
50

51. STEP.4
Slackで打刻する
51

52. #WESEEK_tech
STEP4 Slackで打刻する
● ゴール
○ スクリプトエディタで関数を実行して「出
勤」ボタンをSlackに表示できる
○ 「出勤」ボタンを押してSpreadsheetに開
始時刻を記録できる
○ 開始時刻の記録に成功したら「退勤」ボタ
ンをSlackに表示できる
○ 「退勤」ボタンを押してSpreadsheetに終
了時刻を記録できる
52

53. #WESEEK_tech
STEP4 Slackで打刻する
53
ここ

54. #WESEEK_tech
STEP4 Slackで打刻する
● 必要な要素はSTEP3までに全て揃った
● 後は既存コードを組み合わせたり、少し改変する
だけ！
● あらかじめ仕込んでおいたコードがこちら
○ https://gist.github.com/kainosuke/e7454d60c0bab4d8651d271a99c2c3
fe
○ GAS_step4.gs というファイル
○ Webアプリの再デプロイを忘れずに
■ 最新のコードをWebアプリ機能に反
映するには、毎回デプロイが必要
● エディタの「実行」機能で動かしてみよう
○ postSampleSlackDM()
● Slackに表示されたボタンを押してみよう
54

55. #WESEEK_tech
STEP4 Slackで打刻する
● postSampleSlackDM()
○ 出勤ボタンを投稿
○ STEP3のコードから変更なし
● doPost()
○ 出勤ボタンが押された場合
■ recordAttendance()を実行
● 出勤時刻を入力
● STEP1のコードから変更なし
■ 応答を投稿する
● 退勤ボタンを投稿
● STEP3の文章投稿からボタン投稿に変更
○ 退勤ボタンが押された場合
■ recordLeaving()を実行
● 退勤時刻を入力
● STEP1のコードから変更なし
■ 応答を投稿する
● 出勤ボタンを投稿
● postSampleSlackDM()からパクる
55

56. STEP4 Clear!!
56

57. Complete!!
57

58. #WESEEK_tech
まとめ
● 「これなら作れそう」は感じられましたか？
● GAS + Slack App は用途が応用できる
○ 勤怠入力
○ 家計簿
○ Slack面白発言集
○ 等々
58

59. 質疑応答
59