AtCoder Problems のパクリアプリ CF Problems を作りました

概要

AtCoder Problems を模倣して CF Problems という Web Application を作りました.

はじめに

AtCoder ProblemsCodeforces 版みたいな Web Application があったら良いなと思っていたのですが, これまでのところ私の観測する範囲では存在していませんでした. そして, ちょうど Web フロントエンドの勉強をしたいということもあり良い機会だと思って作りました. 下記に示すリンクから作ったものを見ることが出来ます.

cf.kira924age.com

CodeforcesCodeforces API という API を公開しているので今回はこれを利用しました. 開発の際は AtCoder Problemsyukicoder problems のコードを参考にさせてもらいました. 宇宙ツイッタラーX (@kenkoooo) さん, iiljj さん, その他のコントリビューターの皆さんに感謝してます.

CF Problems とは?

CF ProblemsCodeforces API を利用して Codeforces の問題およびユーザー情報を本家とは違う形で表示するフロントエンドツールです. AtCoder Problems っぽいものを目指して作りましたが, 実装が面倒あるいは Codeforces API のみでは不可能だった機能を省きました.

まず. ページが TableUser の2種類しかありません. List は面倒だったので省きました. (今後やる気があれば実装するかもしれません)

それぞれのページの外観は以下の画像が示す通りです.

  • Table ページの外観

f:id:kira000:20210305205027p:plain
Table ページの外観

  • User ページの外観

f:id:kira000:20210305205206p:plain
User ページの外観

AtCoder Problems に寄せた外観であることが確認できます.

既知の問題点

CF Problems には現時点で把握しているだけでも以下のような問題点があります.

  • 本来表示されて欲しい問題が Table ページに表示されないことがある.

例えば直近では Codeforces Round #700 (Div. 2) のC問題以降が Table で表示されていません. これは Codeforces API の仕様なのでフロントエンド側で対処するのは難しそうです. なので当分あるいは永遠に改善されないと思います.

  • Dark Theme で Table を Chrome 系のブラウザで表示すると右に謎の白い線が入る

以下の画像に示すとおり謎の白い線が Table に右側に表示されています. CSS を色々いじったのですが消えてくれないです. ちなみに FireFox ではなぜか表示されません. 意味不明です.

f:id:kira000:20210305213750p:plain
謎の白い線

  • コードが雑

これは機能的な問題ではないのですが, コードがとても雑です. Web フロントエンド初心者が雑に書いたものなのでそれはそうです. 具体的に言うと, TypeScript の型定義をサボって any を多用した, エラーハンドリングをサボった, などがあります.

コードが雑なので把握していないバグが潜んでいる可能性は非常に高いです.

汚いコードは下記の GitHubリポジトリから見ることが出来ます.

github.com

使用したツール

最後にアプリケーションを作る上で利用したツールを書いておきます.