React + TypeScript + Firebase で コミニュティ用の ISUCON スコアーボードを作成する
課題
小さいコミニュティで ISUCON の過去問をやろうという話が上がり、運営側として環境作成を依頼されました。
過去に ISUCON に参加した事はあるのですが、運営はお任せだったので裏側がどうなっているかはあまり意識しておらず、これを機に確認してみようと思います。
解決策
過去問環境については以下のリポジトリ（AMI）を利用させていただきました、ありがとうございます。 スコアーボードについては、以下のリポジトリを参考に作成させていただきました。
自分要件
1.bench 実行時の結果を自動で Firebase RealtaimeDatabase に登録したい
2.スコアーボードについては、React で作成しグラフ描画を行う
実装
RealtaimeDatabase に登録
過去問環境のリポジトリを参考に、bench の実行を行ったところ以下のような json 形式で出力されます。
{
"pass": true,
"score": 0,
"success": 63,
"fail": 5,
"messages": [],
"timestamp": "2022-08-13 15:20:53"
}
bench をシェルでキックするようにし、シェル内で bench 実行結果を json ファイルに保存、curl で該当の json を RealtaimeDatabase へ POST する事で解決しました。
RealtaimeDatabase のルールについては、数時間しか利用しないものなので /teams 配下のみ読み書きできるように設定しました。
スコアーボードを React で作成
関数コンポーネント（と Hook）を利用した事がなかったので勉強も兼ねて React でスコアーボードを実装する事にし、グラフについては react-chartjs-2 ライブラリを利用させていただきました。
スコアーボードについては、参考にさせていただいた作りと同じ様にスコアの履歴と、最新のスコアを表示するように設定しました。（割とポップな色味になってますね。。。）
※ 画像はテストデータです
完成したソースコードは以下に上げています。
まとめ
Firabase のアプリ設定を変更いただければ、別の環境でもご利用いただけます。
チームごとのグラフカラー等の設定は以下のファイルを参加チーム数に応じて修正します、また label は表示チーム名となりますので、おもしろチーム名をつける際はこちらを修正しようと思います。
開催時には webpack でコンパイルした静的ファイルを S3 にアップロードし各参加者にアクセスしてもらう想定です、ISUCON はワチャワチャ楽しめるので今後も未参加の方を巻き込んで、小さいコミニュティ内でも細々と開催したいと思っています。
Discussion