あなたもできる！GASで勤怠入力Slack App構築【WESEEK Tech Conf #14】 (pert2)
- 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
- 7. #WESEEK_tech STEP1 GASで打刻する ● ゴール ○ スクリプトエディタで関数を実行して、打 刻(開始時刻・終了時刻)ができる ● 実装する関数 ○ recordAttendance() ■ 日付と開始時刻を記録する ○ recordLeaving() ■ 終了時刻を記録する 7
- 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を選択
- 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
- 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
- 28. #WESEEK_tech STEP2 GASでSlackに投稿する ● ゴール ○ スクリプトエディタで関数を実行して、 SlackにDM投稿ができる ● 実装する関数 ○ postSampleSlackDM() ■ 仮の文言でDM投稿する 28
- 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
- 40. #WESEEK_tech ● ゴール ○ スクリプトエディタで関数を実行して、 Slackにボタンを表示できる ○ ボタンを押すと、GASが応答してSlackに 新しい投稿ができる ● 実装する関数 ○ postSampleSlackDM() ■ Slackにボタンを表示する ○ doPost() ■ GASのWebアプリ機能で使用する特 別な関数 ■ Slackからの通知を受けて必要な処 理をする 40 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
- 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
- 52. #WESEEK_tech STEP4 Slackで打刻する ● ゴール ○ スクリプトエディタで関数を実行して「出 勤」ボタンをSlackに表示できる ○ 「出勤」ボタンを押してSpreadsheetに開 始時刻を記録できる ○ 開始時刻の記録に成功したら「退勤」ボタ ンをSlackに表示できる ○ 「退勤」ボタンを押してSpreadsheetに終 了時刻を記録できる 52
- 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
Editor's Notes
- #37: GASのプロパティに設定した値はProperties Serviceを使う see: https://developers.google.com/apps-script/guides/properties