Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

unsoluble_sugar

April 30, 2020
Tweet

More Decks by unsoluble_sugar

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 現実は厳しい…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 要件定義

    View full-size slide

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

    View full-size slide

  12. さっそく作ってみた

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Spreadsheetの構成

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Slack APIの準備

    View full-size slide

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

    View full-size slide

  26. Google Apps Scriptの実装

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide