Codeforces Rating Comparison を支える技術
何をつくったの？
Codeforces上の複数のユーザのレートをグラフ＋表で可視化するWebアプリです。以下の図を見たほうが早いです。基本的な仕様は AtCoder Rating Comparison を参考にしています。
なんでつくったの？
- AngularJSの練習
- SpringBootの練習
という位置づけです。もともとバックエンドのエンジニアで、フロントエンドは全く触ったことがなかったのですが、お仕事で AngularJS を使う流れになりました。（だいぶ古いですが）ひとまず公式のチュートリアルは通したのですが、何か作って見たくて作りました。
- 使っているライブラリ
- Highcharts JS v7.0.3
- AngularJS v1.2.6
- SpringBoot v2.1.4
フロントエンド
難しいことはなくて、フロントエンドはAngularJSで、デザインは適当にbootstrapを使っています。グラフでの可視化はHighchartsを利用しています。表の作成はAngularJSの ng-repeat と <tr> タグを使っているだけです。リファクタリングしていません。htmlにロジックが入っていたり、app.js にがりがり書いていたりと設計はかなり微妙です。
API Limit
ユーザのレートを取得するにはCodeforcesのAPIを叩くのですが、一点注意があって1秒間に叩ける回数は5回という制限があります。最初、APIを発行にはAngularJSの $http$ サービスを利用していました。しかし、6人以上ユーザの検索が発行されると非同期処理で6人分のAPI発行が走り、API制限の結果、レスポンスコード500のエラーが返ってきます。JSの非同期周りがあまり詳しくなく、今回はAPI発行を同期処理にしています。バックエンドからエンドポイントにGETするときに Thread.sleep(200) で1ユーザあたり200ms必ず待機することで、API制限のエラーにならないことを保証しています...。本当は5回API発行して、1秒sleepして...とするのが良い気がしています。
バックエンド
バックエンドは本当は特にやることはないのですが、CORSがあるのでエンドポイントへのAPI発行はバックエンドから実行することにしています。無駄にコンテナ化も視野に入れており、フロントエンドのファイルはSpringBootのリソースに含めています。
今のところ java -jar CodeforcesRateComparition.jar で起動するようにしています。
まとめ
JavaScriptむずかしいが、フロントエンドも面白い。
