GAS + Spreadsheet + Slack API で レビュアーガチャを作ってみた

9.4K Views

March 09, 21

スライド概要

『完全に理解した人達の「Web技術」Talk #4 』の発表スライドです
https://easy2.connpass.com/event/173015/

profile-image

Tech Hunter代表。フルオタクエンジニア。 エンジニアリングコミュニティ「Easy Easy」運営。 ガジェオタでアニオタでゲーオタ。 たまにブログ書いてる。2児のパパ。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

GAS + Spreadsheet + Slack API で レビュアーガチャを作ってみた @unsoluble_sugar

2.

お前誰 ? @unsoluble_sugar ❏ ❏ ❏ ❏ TOPGATE, Inc. / Mobile App Engineer Tech Hunter / Blogger, Game App Engineer Easy Easy / Organizer Otaku / Game, Anime, Gadget

3.

プルリクのレビュー誰がするの問題

4.

チームにおける課題 プルリクを出してもレビューしてくれる人が少なかった ❏ ❏ ❏ ❏ システムの理解度が浅い 若手など経験不足のメンバー レビュアーが集中してしまう 高まり続ける属人性

5.

理想はペアプロ、モブプロ的なやつ

6.

現実は厳しい…

7.

レビュアーガチャで解決!

8.

レビュアーガチャとは! レビュアーの選出を自動化するシステムのことである ❏ プログラムによるランダム抽選 ❏ Slackチャンネルでメンションを投げる ❏ レビューし合う文化を浸透させる

9.

ガチャによる課題解決 均等にレビュアーの機会を得られると… ❏ ❏ ❏ ❏ ❏ レビュー依頼の手間が省ける システムの理解度が深まる 若手などのスキル向上 レビュアーの分散化 属人化の解消

10.

要件定義

11.

利便性と楽しさを 必要最低要件+α ❏ ❏ ❏ ❏ 対象プルリクのURLを指定 チェックボックスで対象者を選択 投稿チャンネルの切り替えに対応 メンション通知のキャラ追加&カスタマイズ可

12.

さっそく作ってみた

13.

最小コストで実現する 自分の知見を活かした技術選定 ❏ GAS(Google Apps Script)でサクッと作る ❏ データはSpreadsheetで管理 ❏ Slack APIを使ったチャットbot

14.

最小コストで実現する 自分の知見を活かした技術選定 ❏ GAS(Google Apps Script)でサクッと作る ❏ データはSpreadsheetで管理 ❏ Slack APIを使ったチャットbot なお、開発はWeb上で完結する模様

15.

Google Apps Scriptとは? Googleが開発したJavaScriptベースのスクリプトプラットフォーム ❏ ❏ ❏ ❏ ❏ ブラウザ上のエディタで開発可能 Google提供サービスとの連携が容易 主に軽量なアプリ向け Webアプリ・API化なども可能 clasp(CLIツール)でローカル開発も https://github.com/google/clasp

16.

Google Spreadsheetとは? Google版のExcelみたいなやつ ❏ マクロや関数も使用可能 ❏ グラフ表示などもできる ❏ Googleフォームのアンケート集計 などにも使用される ❏ Google Apps Scriptとの相性が良い

17.

Slack APIとは? SlackのAPIだよ(真理) ❏ Slackからユーザー情報を取得 ❏ Slackのチャンネル・DMへ投稿 ❏ 最近はなんか色々できます

18.

Spreadsheetの構成

19.

データ管理用シートとして使用 大きく4つに分けました ❏ ❏ ❏ ❏ レビュアー一覧 プルリクエストURL 投稿チャンネル設定 投稿キャラクター情報の管理

20.

レビュアー一覧 メンバーIDはプロフィールから取得できる ❏ メンション ID(表示用) ❏ メンバー ID(内部用) ❏ チェックボックスで対象を選択

21.

プルリクエストURL (シート分ける意味) ❏ レビュー対象のプルリクURL

22.

投稿チャンネル設定 テスト用に切り替えたかったので ❏ 投稿チャンネルの一覧表示 ❏ 「データの入力規則」を使用 ❏ チャンネル名でも動くが、内部的には チャンネルIDを使用するのが良い ※名前変更されると追従する必要がある

23.

投稿キャラクター情報の管理 実は一番力を入れているシート(笑) ❏ ❏ ❏ ❏ ❏ キャラクター名 投稿メッセージ メンションを含められる アイコン画像URL IMAGE関数でサムネ表示

24.

Slack APIの準備

25.

Slack APIの準備 メッセージ投稿に使うだけ ❏ Slack App Botの追加 ❏ Access Tokenの取得 ❏ 今回はライブラリを使用 シンプルに書けてコード補完も効くなど便利 https://github.com/soundTricker/SlackApp

26.

Google Apps Scriptの実装

27.

Google Apps Scriptの準備 Slack API、Spreadsheet連携用 ❏ SlackAppライブラリの導入 https://developers.google.com/apps-script/guides/libraries?hl=ja ❏ Spreadsheetのアクセス権限追加 https://developers.google.com/identity/protocols/oauth2/scopes

28.

Google Apps Scriptの処理 Spreadsheetの情報を取得&Slackへ投稿 ❏ ❏ ❏ ❏ ❏ レビュアー一覧の取得、抽選処理 プルリクエストURLの取得 投稿チャンネルの取得 投稿キャラクター情報の取得 Slackへ投稿

29.

Google Apps Scriptの実装 シート情報を取得して必要な実装をしていくだけ ❏ ❏ ❏ ❏ ❏ チェックの付いたメンバーから選出 キャラ情報のセット メンションKeyの置換 プルリクURLが空のときに確認 Spreadsheetのメニュー追加 https://developers.google.com/apps-script/reference/base/ui https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet

30.

そんな感じでザッとやれば動きます

31.

ガチャ回し放題 Spreadsheet上から実行すればSlackへ投稿 ❏ 基本はレビュアー候補ポチポチー、プルリクセットでガチャ回すだけ ❏ キャラ選定やセリフのカスタマイズが腕の見せ所(?)

32.

可能性は無限大 どこまで自動化すべきかは悩みどころ… ❏ ❏ ❏ ❏ ❏ Webhookによるプルリク作成検知 GitHub APIを使ってAssignd Slackコマンドによる実行 Interactive Message対応 Web画面化など

33.

GAS Spreadsheet Slack API 完全に理解した チームの課題解決にぜひお試しを

34.

日常的に使ってもらえる ツールで承認欲求得ていく スタイルマジおすすめ

35.

ご清聴ありがとうございました @unsoluble_sugar https://unsolublesugar.com/ https://github.com/unsolublesugar https://qiita.com/unsoluble_sugar https://teratail.com/users/unsoluble_sugar