More than 3 years have passed since last update.

AtCoderの復習を手助けするWebサイトを作った（AtCoder-Ebbing）

Last updated at 2021-12-08Posted at 2021-12-08

この記事は競プロ Advent Calendar 2021 8日目の記事です。

概要

AtCoderの復習を手助けするAtCoder-Ebbingというサイトを作成しました。
レートや解いた回数、前に解いたときからの期間等を考慮して解くべき問題を一問ずつ出題してくれます。
名前の由来は忘却曲線のエビングハウス氏です。

（キャッシュのせいか片方見れないことがあります。見れない時はもう片方にアクセスすると良いかもしれません）

皆さんAtCoderのレート上がってますか？
僕のレートはずいぶん長いことX軸に平行です😢。

一度解いた問題をちゃんと身につけるために復習が大切だというのは分かっていますが、復習をするため問題を管理するのはやや面倒です。

特に手間をかけず単語カード的な感じで復習すべき問題を1問ずつ出してくれるサービスが欲しいなと思い立ち、丁度アドベントカレンダーの時期だったのをきっかけに作ってみる事にしました。

是非使ってみて下さい。
（なんとか動くようになったのが数時間前なのでバグだらけかもしれません）

使い方はこちらです。

これだけではポエムで終わってしまうので使った技術を書いていこうと思います。(アドベントカレンダーのお題とは離れてしまいますが……)

問題の情報やAtcoderのレート情報を用いるためにAtcoder ProblemsのAPIとAtCoderの隠し機能を用いました。

偉大な kenkoooo さんと snuke さんに感謝

今回のwebサイトは殆どをPythonで畫きました。

Flask Tutorialを見つつ作成を行いました。非常に分かりやすかったです。

Cloud Run上で動かすことにしたため、WSGIサーバーはCloud Run公式のチュートリアルで用いられていたgunicornを使うことにしました。これも非常にわかりやすかったです。

サーバーの管理の手間を避けるためCloud Runを使いました。

そのため、サーバサイドに長期間データを保存することができず、後述するLocalStorageを活用しました。

開発中は手元のPCで直接Flaskを動かし、サイトが完成した一番最後にDockerfileを書いてコンテナ化しました。

FlaskでのデフォルトのCookieは暗号化を用いクライアントサイドにデータを保存するらしく、最初はこれにデータを詰め込もうかと思いました。

しかし、4kB制限がありAPIの使用回数を減らす為もあってLocalStorageも用いることにしました。

後からデータの保存方法を追加したためこのあたりのコードがぐちゃぐちゃになってしまいました。

Cloud Run直のURLでは見栄えが悪いのでFirebase Hostingを通すことにしました。

これで僕のレーティングも単調増加！！！