matsuri-achievementsについて紹介します
この記事は matsuri technologies 株式会社 Advent Calendar 2023 の 17 日目の記事です。
# matsuri-achievement とは何か
GitHub の README にトロフィーなどを貼って自己紹介で遊ぶ、といった文化があると思います。
このように「何かしらのきっかけで実績を獲得する」「獲得した実績を SVG として好きなところに埋め込める」というのはなかなか面白い仕組みなんじゃないかと思って、自分たちで作ったのが matsuri-achievements です。
私の実績は以下のようになります。
SVG で埋め込む場合は以下を使います。
例えば、「キリ番 GET」の実績は issue や PR の番号がちょうどキリ番(1000 の倍数とか、ゾロ目とか)のものを作成した人に送られる実績です。
他にも例えば以下のような実績があります。
- matsuri にジョインした時に与えられる実績
- リポジトリで一番最初に commit した人に与えられる実績
- 週 5 日、オフィスへ物理出社を行った人に与えられる実績(現状はリモートと物理出社のハイブリッドなため)
# matsuri-achievements の仕組み
中身はとても単純で、単なる JSON です。以下のような仕組みで実績を管理しています。
実績自体の定義と、誰がどの実績を持っているかを json ファイルにしてリポジトリ内で管理しています。
また、index.js という単一の JS ファイルからこの json ファイルの中身を簡易な CLI ツールのようにして変更できます。ツールのコマンド類は npm scripts に登録しているので、yarn コマンドなどを使って実行することで実績の追加や削除ができ流ようになっています。
❯ yarn attachAchievementToUser myuon 1 gold
✨ Attached achievement 1 to user myuon
これを各自で書き換えて、PR を出して他の人に Approve とマージをしてもらうことで、実績を獲得できる仕組みになっています。
また、実績を表示するのに使われるアイコン画像は好きなものが設定できるようになっています(リポジトリにファイルを置くだけ)。デフォルトのトロフィー画像は生成 AI を使って作成したものです。
# SVG や PNG 画像の生成
画像の生成には satori を使っています。
Vercel 社が作っている、主に OGP 画像の生成などでよく使われるライブラリです。
やはり慣れ親しんでいる HTML や CSS で作ったものを画像として使えるのはかなり便利なので、最近はなんやかんやお世話になることが多いです。
PR がマージされると GitHub Actions が走り、画像を生成してリポジトリ内に追加する部分まで他の方が作ってくれたので、それによって上記のような画像生成ができるようになり、無事に README に埋め込んで遊べるようになりました。
# Slack bot について
実績を展開するだけの Slack bot もあります。
Slack の Next-gen Platform(Deno でかけるやつです)に興味があって、半年前くらいに遊び半分で作りました。意外と Next-gen Platform の情報などもなく、苦労した記憶があります。
内容的には、アプリへのメンションを起点として起動する Workflow を定義してデプロイしています。
Slack では SVG に直接リンクをしても展開してくれないということで PNG を生成するのをやってもらうようにして、Slack 内では PNG の方を使うようにしています。
# matsuri-achievements のこれから
matsuri-achievements はまだ実績も少なく、意外と付与も手間なのかそこまで頻繁に使われてはいないです。ただ、実績を付与するというのは遊びとして面白いですし、できれば今後も拡大していきたいと思っています。
今後やりたいこととしては、
- 実績の数を増やす
- issue を作ったら実績付与の PR が作成されるようにする(これはすでに実装が進んでいそうです)
- 実績を集めるといいことがあるようにする(何ができるんだろう 🤔)
あたりかなと思います。
個人的に上記の仕組みは結構気に入っているので、もう少し開発部の催しや業務の中に自然な形で組み込める方法はないか、模索していきたいです。