ALIS紅白大運動会　いいね・投げ銭集計サイトを公開しました

※本サービスは現在停止しています。

こんにちは、ホーさんといいます。

ALISの紅白大運動会、とても盛り上がっていますね！

今回の企画を応援するため、紅組と白組の各チームで、どれだけのいいねや投げ銭をこれまで獲得しているのかを集計・可視化するサイトを作成し、公開しましたのでご報告します。

大運動会記事集計サイト

早速ですがこちらがリンクになります。

私が開発しているALISTUDIOに、特設ページという形で追加しました。

ALISTUDIOについてはこちらの記事をご覧ください。

画面はこんな感じです。

12/29現在、獲得いいね数の合計は紅組が若干優勢のようですね…！ちなみに私は白組です。追い上げていきたいです。

また、上の折れ線グラフ（いいね数）に関しては日毎（に公開された記事についたいいね）にカウントして累積グラフにしてます。初日はほぼ同じでしたがここ数日少しずつ離されているのが気になります…　白組の皆さん、共に頑張りましょう！

累積（獲得）投げ銭に関しては、白組若干優勢ですね〜　この3日で2700以上の投げ銭がされているようです。とても活発で良いですね！

なお、投げ銭もいいねも全数カウントです。公式記事によると相手チームからもらったいいねや投げ銭のみが得点としてカウントされるらしいのですが、いいねは誰からのものか分かりませんし、投げ銭も誰がどっちチームか完全にはわからないので全部カウントすることにしました。なので私の集計データはご参考程度です。どっちが勝ってるか、最後まで分かりませんw

スピード重視で作ったのでデザインはかなり適当ですが、もしよかったらのぞいてみてください。

技術について

フロントエンドはReact＋TypeScript＋Tailwind CSSです。Netlifyにホスティングしてます。バックエンドはNode.js＋MongoDB(mlab)でNow ZeitにAPIを立てています。グラフはrecharts.jsを使っています。地味にアニメーションとかできていい感じです。ALISTUDIOで今後グラフを使っていきたかったので、良い練習になりました。

集計はPythonで定期実行ジョブを書いてHerokuで走らせています。１時間に１回更新されます。PythonでALISのAPIを使う際には、私が作ったAPI ClientがPyPIに公開されていますので、ぜひ使ってみてください（宣伝）

最近は、地味にpytestでユニットテスト書いたりしてますが、見る人が見るとかなり汚いです。自分のスキルアップに伴い、徐々にブラッシュアップしていきたいです。

まとめ（？）

・ALIS紅白大運動会に関して、紅組と白組の記事を自動集計し、累積グラフと円グラフで表示するサイトを作りました。https://alisista.com/kouhaku

・白組の皆さん共に頑張りましょう！

・本年も大変お世話になりました。みなさま良いお年をお迎えください。

・Hacking Boot Campも継続的にやってますのでよろしくお願いします〜

記事を書いた人：ホーさん（@hoosan16）

画像素材（クレジット）：