こんにちは。2018年4月に新卒で入社した柴田です。最近TopCoderで赤になりました。

先々月（2019年1月）、PIGICONという社内コンテスト開催しました。コンテスト全体の様子についてはこちら。 このコンテストでポータルサイトの作成を担当したのでざっと紹介します。

フレームワーク・ライブラリなど

列挙すると以下のようになります。

• Flask
• SQLAlchemy
• Socket.IO
• jQuery
• bootstrap4
• boto3

問題文

当初は普通に静的ファイルとして問題文のmarkdownを置いていたのですが、コンテスト開催中でも手軽に修正を行えるようにしたいという理由から、markdownはS3上に設置しアプリとは別のレポジトリで管理するようにしました。

これで特に問題なく動いていたのですが、リクエストの度にS3からダウンロードするのは無駄が多いので、Redisなんかを用いてキャッシュしてあげるとより良かったのかもしれません。

スコアボード

ajaxで数秒おきに採点を全件取得し、グラフを描画しています。 グラフの描画にはGoogle Chartを使いました。 コンテスト終盤になるとデータ点の密度が上がりすぎて何がなんだかという感じですが、まあ賑やかしにはなったのではないでしょうか……。

頻繁に全件取得するのは少し気が引けましたが、参加者は30人弱、採点回数は多くて1000回程度なので、多分大丈夫だろうと判断しました。 （実際の採点回数は794回でした。）

順位表も同様で、数秒毎にajaxでチームの順位を取得しています。 「順位が変化したときは『ぬるっと』動いてほしい」という要望が上がったため、『ぬるっと』動くようにしました。 具体的には、DOM自体の構造は変えずに、CSSアニメーションで相対位置を変化させて実現しています。

採点・履歴

採点状況（採点待ち・採点中・採点終了・採点失敗）がステータス欄にリアルタイムに反映されるようにしました。 ベンチマーカーが採点開始・終了時や、一定の割合まで進捗したときにその状況をcallbackしてくれるので、それをwebsocketでクライアントへ通知しています。 各採点に対して適当にトークンを割りあて、それをベンチマーカーと共有することでcallback時に採点を区別できます。

また、各スコアがどういう実装に対応するものかを区別しやすくするため、採点時にコメントを付けられるようにしました。🍣絵文字🍺も使えます。

採点batch jobの投入・中断や、インスタンスの再起動にはboto3を使っています。

admin用あれこれ

admin用に以下のような機能を実装しました。

• 全チームのインスタンス再起動，採点実行（最終評価用）
• 特定のチームに採点を実行，中断
• コンテスト開始・終了時刻変更（トラブル発生時用）
• 採点を一時的に停止（〃）
• 全チーム横断で最新の採点結果をn件表示

最後の機能は、コンテスト中に運営が各チームの様子を見て好き勝手言うのに役立ちました。

感想

websocketやORMの中身をあまり理解しないまま利用してしまったので、その辺りを勉強し直したいところです。 あとは、jQueryでそれなりに複雑なことをやるとつらい気持ちになるので、もっとモダンなやつも身につけていきたい。

広告

強いエンジニアを募集しています。