2024-04-02

2024軽井沢合宿メインプログラム開発！！後編

前回の前編記事から引き続き、開発アルバイトの山本です！！
2024　2/23 ~ 2/25 の2泊3日で軽井沢合宿を行いました。そしてメインプログラムとして3人ずつの5チームに分かれて開発を行いました！！
テーマは「業務改善ツールを作りまくる」です！！

※案件の内容などを含む場合は一部省略して記載しております。ご了承ください。

下記５チームのうち、今回は前編で紹介しきれなかった「soy-beans」「Over bet」「d3」の成果物を公開したいと思います！

水玉の麒麟
freezing
soy-beans
Over bet
d3

soy-beans

メンバーのあらゆるアクションを可視化！成果をビジュアライズ！仕事を楽しくする！

私たちは普段、案件ごとにチームが分かれて仕事をしています。チーム内ではみんなが今何をしているのか、どんな成果を上げていっているのか把握できていてもチーム間では少し見えにくい。また、チーム内でもいつどれくらいの仕事を成し遂げたのか、みんなが把握するのは難しい。

チームに関わらず、すべてのメンバーの成果、アクションを可視化したい、いい意味で競い合って高まりあいたい。

そんな気持ちからSpookiesメンバーの成果を確認できる！しかもなんだか楽しい！そんなツールを作りました。

技術構成

バックエンド
- Pure PHP
- Slack API
フロントエンド
- TS + Vite
- matter.js（物理演算）
- PixiJS（2Dグラフィック）

今回は合宿の期間中に動くところまで持っていくべく、メンバーのアクションとしてはSlackへの投稿を拾い上げるまでにスコープを絞りました。（今後アクションのバリエーションを増やしてできるだけたくさんのものを見える化したい。PRのマージなど！）

バックエンドはSlack投稿の巻き上げと、フロントエンド用のメンバーアクション取得APIを作成しています。

フロントエンドではそのAPIをポーリングしてビジュアライゼーションを行います。最近流行った某ゲームから着想を得て、アクション＝メンバーアイコンの球として画面上に溜まっていくところまで実現しました。ここは初めて使いましたがmatter.jsとPixiJSを導入し、ゲームライクな演出とともに見せています。

今回の合宿中では球が溜まっていくだけになっていますが、もっとゲーム的な仕組みを入れる＆スコア化するなどしてより楽しいものにしていきたいですね。

Over bet

タスクをこなすとポイントをもらえる制度があまりにも使いづらいので、改良しようのチーム！！

集計も表現も評価もなんもかんも足りてないけどまずは集計だけ！

(やりたいこと多すぎて話が発散しかけ、実装の動き出しが遅くなり後悔)

技術: Google Apps Script + clasp により git 管理しながらGASスクリプトの開発
技術: 生成AIを駆使して開発言語のスキル差を吸収
- python で実装して、GASへの変換
マネジメント: 役割をしっかり分担して進めた
1. 資料作成・発表・取りまとめ
2. 技術検証・GAS環境の整備と調査
3. pythonでメインプロトコル実装

ちなみに私（山本）はこのチームで開発させていただきました！このチームのメンバーは実は普段から一緒にいることが多いチームなので、default3を表すd3というチーム名になりました（笑）このチームは二つ開発しました！！

一つ目：作業チケット作成の簡略化

clickupを使って作業チケットを管理していますが、redmineの内容をもとに作っています。ただ、期日やタイトル、担当などを毎回入力して作成しなければなりません…。なのでこの作業を簡略化するためのツールを作りました！
chromeの拡張機能を使って、redmineとclickupのAPIキーを入力して、redmineの作業チケットが表示されているページに作成した「チケット作成ボタン」を押すと……なんとタイトルなどが綺麗に入力された状態のclickupのチケットが作成されます！！ちなみにchromeの拡張機能でのAPIキーの入力は一度行えば半永久的に保存されるので、一度APIキーを保存してしまえば、ボタンを押すだけでチケット作成ができてしまいます！！やったーー！！
ただ実は、担当や期日まで自動入力されたclickupのチケットは作成できませんでした。redmine上でのデータの型と、clickup上でのデータの型が違っていたことなどが原因で、時間内に実装することができませんでした…今後も是非機会を見つけて実装していきたいと思います！

技術構成

バックエンド：NestJS
フロントエンド(chrome拡張)：TS + Vite

二つ目：作業チケットの検索です！

redmine上でチケットの検索を行うことはできますが、チケットのアサインが自分以外の人になってしまうと…悲しいことに検索することができません！！そこで、過去一度でもアサインされたチケットを検索できるようなWebアプリケーションを開発しました！フリーワード検索や、チケットIDでの検索、担当したことがあるチケットなどの項目で絞り込みを行うことができます！

技術構成

Next.js v14.1.0
- App Router
- SSG ビルド
  - linaria
- Router Handler
Redmine REST API

見つかった課題

実は「現在担当している」による絞り込みは実装できていない（間に合わず...）
SpoGPT による MR の自動生成も実装できなかった
- チケットの詳細から MR の内容と、検証すべきテスト内容の自動生成
Redmine API の使いにくさ
- 例えば「〇〇というキーワードを含んでいる、過去に自分が対応したチケット」という検索は API のみでは実現できない
  - 「過去に自分が対応した」で検索できる手段はない
    - 本システムを通してチケットを作成・チケットデータを蓄積していくことで、このような検索にも対応できるようになる
    - あくまでもタスク管理ツールであるので、複雑な検索には対応できない

終わりに

それぞれのチームが違う視点で業務改善を行うツールを開発しており、最後の成果発表会では大盛り上がりでした！ここで開発したものを今後も拡張していって、運用までしていけたら幸せだなと思いました！

3日間とても楽しかったです！ありがとうございました！

2024-03-26

2024軽井沢合宿メインプログラム開発！！前編

お世話になっております！開発アルバイトの山本です！！
2024　2/23 ~ 2/25 の2泊3日で軽井沢合宿を行いました。そしてメインプログラムとして3人ずつの5チームに分かれて開発を行いました！！
テーマは「業務改善ツールを作りまくる」です！！

ということで本記事では、チームごとに技術的な観点でまとめるものとなっております！
なのでスプーキーズ総出で記事を執筆、ということになります、わくわくですね。

※案件の内容などを含む場合は一部省略して記載しております。ご了承ください。

下記５チームのうち、今回は水玉の麒麟とfreezingの成果物について公開したいと思います！

水玉の麒麟
freezing
soy-beans
Over bet
d3

水玉の麒麟

チーム名の由来

マジカルバナナをして、詰まったワードとその前のワードの組み合わせ。

作成したもの

①「Slackリアクションランキング通知」SlackBot
②「勤怠とプロジェクト作業実績との差分通知」Slack Bot

モットー

UnhappyをHappyに変えよう!

ブレスト

日頃のルーティン作業 & それに対しての課題を出し合い、4つの事象に分類。

(negative)手間↔(positive)便利
(negative)事務的↔(positive)楽しい

ネガティブをポジティブに持っていく。

その中でも、みんなに関心・関連のあるもの/合宿期間で実現性の高いものをピックアップ。

誰でもメンテしやすい、も目指し、アーキテクチャは最小限に。

①「Slackリアクションランキング通知」Slack Bot

モチベーション

スプーキーズメンバーは京都と東京の２拠点でそれぞれ活動しています。
GatherやSlackでの同期・非同期コミュニケーションは積極的に行っていますが、とはいえメイン拠点が違ったり在宅ワークベースでオンラインのみだと、会話のきっかけがつかみにくかったり、共通の話題を探しにくかったり。

コミュニケーションの円滑化が進むとメイン業務も進めやすいですよね！
ということで、コミュニケーションのきっかけ作りとして、社内でどんな投稿に注目があったのかをエンタメ的にわかりやすくしよう！
とのことで作成されたのがこちら　リアクションランキング。

※リアクションとは投稿されたメッセージにつけられる絵文字のこと。

技術構成

GAS
Slack API（+ Slack App）

実装概要

メインロジックはGASで実装。

Slack APIのconversations.historyを利用して、Slackの過去投稿を取得。 api.slack.com

事前に、Slack Appを作成し、OAuthToken等のAPI実行に必要なCredentialsを取得、また、API利用に必要なScopeを付与しておきます。

GAS上でSlack APIを呼び出す処理を実装し、取得できたSlackの過去投稿群を元に、 1週間のうちでリアクションの多かった投稿５件をランキング形式に整形し、指定のチャンネルに投稿するように。

Slack上でSlack App呼び出し（メンション）→GAS実行→Slack APIで呼び出し元チャンネルへメッセージ投稿
GASで定期実行のトリガー設定→GAS実行→Slack APIで特定チャンネルへメッセージ投稿（TODO）

盛り上がっているメッセージが一覧化できて、いろいろなリアクションが沢山見れて、Happyですね！

※実際には該当のslackメッセージのURLとなっており、プレビュー展開されるので、通知時に各メッセージ内容も分かる

②「勤怠とプロジェクト作業実績との差分通知」Slack Bot

モチベーション

前提として、日々の勤怠管理には「HRMOS勤怠」を利用しています。

hrmos.co

Slack連携も容易に可能で、Slackの業務連絡を行うgeneralチャンネルでは、朝には出勤記録用の「@HRMOS勤怠 in」のメッセージが飛び交っています。

一方で、勤怠と紐付ける形でプロジェクトの採算管理も行いたいのですが、HRMOSには「どのプロジェクトで・何時間稼働したか」（以下、プロジェクト実績）を記録する機能はあるものの、売上・コスト・利益などの採算管理はできないようです。

www.ieyasu.co www.ieyasu.co

プロジェクト実績とプロジェクトの採算含めた諸情報の管理（プロジェクトマスタ的な）を連動して管理したいため、権限や承認フローを厳密に必要としている勤怠の記録・管理はHRMOSで扱うものとし、それ以外の情報の記録と集約（HRMOSの勤怠データの転記含む）は、現状ではスプレッドシートで行なっています。

※プロジェクト実績の記録をHRMOSの機能に任せることもできますが、プロジェクト情報の2重管理になるのを避けた経緯があります。
※諸々内製でシステム化すれば解決しますが、コスト等踏まえて、軌道に載せやすい・拡張性が高い・運用カバーしやすい、という点でスプレッドシートを採択しています。ただしデータ構造が壊れやすい側面はあり課題。
※ドンピシャなSaaSあれば検討するのですが...、意外とない...？

余談として、スプレッドシートに集約した各種データは、Looker Studioで可視化して活用を図っています。

さて、このプロジェクト実績について、日々の退勤前に記録していくのですが、合計時間が勤務時間と一致するように記録してもらっています。
週の頭にHRMOSからスプレッドシートへの勤怠の転記を行うことで、「プロジェクト実績確認シート」というところで集計を行い、勤務時間とプロジェクト実績時間とに差分があれば、セル上で差分が分かりやすく表示されるようになっています。

基本的には、該当者が自身で気付いて修正してもらえたらいいのですが、そうでない場合、該当者にその日の実績の見直し・記入を通知するフローになっています。
この辺り、総務担当者が人力で行っている部分も大きく、スプレッドシートで簡略化している、とはいえ、週頭に人数×５日分の作業実績の差分を出して、それぞれまとめて通知して、さらに確認までして…というのは地味に大変な作業…。
この　めんどくさい　を肩代わりしてほしい…！
というのが本botの背景となっています。

技術構成

HRMOS勤怠 API
GAS
Slack API（+ Slack App）

実装概要

まず、スプレッドシートでは、下記のシートが存在します。

①勤怠シート
- 勤怠情報を日・メンバー毎に記録
②プロジェクト実績入力シート
- プロジェクト実績情報を日・メンバー・プロジェクト毎に記録
③プロジェクト実績確認シート
- 「勤怠シート」の勤務時間と「プロジェクト実績入力シート」のプロジェクト実績時間とを集計し、日・メンバー毎に差分有無を含めて表示

また、勤怠情報は、HRMOS勤怠上でCSV出力可能で、この結果をスプレッドシートに転記していました。
一方で、HRMOS勤怠 APIを利用すれば、同様の結果を取得可能です。

HRMOS勤怠 API：指定された月の日次勤怠データの一覧 ieyasu.co

踏まえて、全体の処理フローとしては、下記としました。

[Slack] プロジェクト実績差分確認botの呼び出し→GAS実行
[GAS] HRMOS勤怠 APIの「指定された月の日次勤怠データの一覧」APIを実行し、取得結果を「勤怠シート」に入力。
[GAS] 「プロジェクト実績確認シート」で差分が発生しているセルの該当日・メンバー・差分時間を取得・整形し、Slackの呼び出し元チャンネルにメッセージ投稿

結果はこちら。

「実績差分ありませんかスプ」Botの誕生です。絵心のあるメンバーがさっとイラストを描いてくれました〜。
実績ポリス版スプーくん（スプーキーズのマスコット）です。

課題としては、

勤怠情報のスプレッドシートへの転記の自動化、定期実行化
HRMOS勤怠 APIで取得する期間と入力シートの範囲の考慮
HRMOS勤怠での見かけ上の勤務時間とAPIで取得される勤務時間の値が異なるケースがある？（要調査）

など。

水玉の麒麟まとめ

チーム内で2つの成果物を発表でき、過程でもブレストやペアプロなどしつつ、ワイワイ開発できて楽しかったです！
運用に載せれるレベルまでもう少しというところで時間切れとなりましたが、社内での必要性はあるので、どこかで時間を見つけたいところ...！
総務メンバーも巻き込んだチーム編成だったので課題感のベクトルもそうした方面にも伸び、他のチームにはない特色が出たかと思います。
今後は、作ったものをちゃんと運用に載せきるところまでやっていきたいものです！
チーム「水玉の麒麟」、みんなありがとう！

freezing

チーム名の由来

冬の軽井沢がめちゃくちゃ寒くて全員寒がりだったため。

スプーくん

ChatGPT※を使って、困りごとや雑談など、Slackでメンションをうつだけで何でも答えてくれるスプーくんという心強い仲間がいます。そんなスプーくん、もっと活用したいよね！

スプーくんによる今日のTimesまとめ

Slackには各メンバーの個人チャンネルであるTimesがあり、そこにはざっくばらんに書き込まれたいろんな情報が埋もれています。そんなTimesの内容を日々要約して記録できれば。。。。要約.........そうか！スプーくんだ！！

ということで、スプーくんに特定のコマンドを投げることで、Slackに投稿された1日分のメッセージを要約してくれるように機能を追加しました。

スプーくんによるブランチ名自動生成

SpookiesではClickUpというタスク管理ツールを利用しています。すべての開発作業はClickUpに起票されたチケットドリブンで動き始めるため、ClickUpのチケットIDを開発用ブランチ名に含め、さらに大体の対応内容が分かるように内容に沿った英単語を羅列してブランチ名を決定しています。その作業が地味に面倒。。。。これもスプーくんにお願いしたい！

ということでClickUpのAPIも使いつつ、チケットIDをスプー君に投げるだけでブランチ名を勝手に考えてくれるように機能を追加、、、、したかった、、、、。

機能自体は追加できたのですが、問題はClickUpのAPIキー。こればかりは個人個人のアカウントに紐づくデータのため、Slackbotであるスプーくんに持たせるわけには行かず、機能追加とまでは行きませんでした。が、Chrome拡張機能などで実装すれば実現はできるのではないかと検討中です。

SpoGPTの開発促進のためのローカル実行環境整備

と、ここまでローカルで機能追加の開発をしてもらっていましたが、メンバーから「ローカルで動作確認したい！！」の声を受け、ローカル実行環境の整備を行いました。これによって今後スプーくんの開発が促進されればよし！

問題は多くのAWSサービスありきで動作していること。これを解決するのに、localstackというローカルAWSエミュレーターを利用しました。大体は解決できたのですが、問題はスプーくんがSlackbotであるということ。。 Slackbotをローカルで動かすのはかなり難しく、裏技的にlocalhostを外部公開してそのURLをSlackbot側に設定するという手も無くはないのですが、セキュリティ的に不安が付きまといます。この点に関しては引き続き、調査・アイデアの募集中です！

※ChatGPTの運用について