AtCoder Merge Grassを作った
2022/01/24追記：アプリの公開を停止しました。
最近は23卒のwebエンジニアになるべく、webの勉強をしています。就活で書ける開発したものを増やすため、今回はAtCoder Merge Grassというwebアプリを作りました。
この記事では以下のようなことを書きます。
使い方
GitHubのログインと、AtCoderのアカウント名の入力が必要です。入力ができたらMergeボタンを押すとマージ後の芝が生成されます。
AtCoderからの集計はProblemsのようにSubmissionsとAll ACとUnique ACの3つに切り替えられます。
勉強したこと
- Rustのactix-web（バックエンド）
- Create-React-App（フロントエンド）
- GitHubのOAuthアプリの作り方
- AtCoder ProblemsのAPIの使い方
- Herokuでのデプロイのしかた
Rustが書きたかったので、そこから書き始めようと思いました。とはいえ最初にActix Webのドキュメントを読んでもわからないことが多かったので、MDNのHTML/CSS、JavaScriptのドキュメントやJSPrimerを読んだり、Pythonでechoサーバを書いたりしていました。webを支える技術などの本を読んだりもしました。
JSPrimerを読んでからはとにかくアプリを作り始めました。ただフロントエンドとバックエンドみたいなのも最初はよくわからなかったです。
ただいきなり全部は作れなかったのでとりあえずGitHubのAPIからcontribution graphを返して表示するやつを作りました。
Create React AppのことやLoginの扱いなどはAtCoder Problemsのコードをめちゃくちゃ読んだり、一部そのまま使ったりして勉強しました。URLのパラメータを扱ったりCookieを扱ったりするのも初めてだったので、一つ一つググってました。GitHubのログイン後のコールバックURLをバックエンドのものに設定した辺りで、フロントとバックってこう使い分けるのかな～をちょっとずつわかっていった気がします。
AtCoder ProblemsのAPIはドキュメントに書いてあることを読んでちゃんと使っているつもりですが、何かまずいことをしていたら教えてください……。具体的には>Please sleep for more than 1 second between accesses.をどうすればいいかよくわかっていません……。
今後の課題など
本当はコピペしたらGitHubのREADMEに表示されるようなカードを途中からは作りたかったです。下みたいなカードです。まだこれを作るにはどうすればいいかわかりませんでした……。
また画像付きでツイートする機能を実装したかったのですが、パッとできませんでした（AtCoder Marathon Replayのコードとかをそのうち読みたい）。
ちなみにこのアプリを作ろうと思ったきっかけは、monkukuiさんのツイートを見たからです。また、後付けですが競プロと開発の両方をしてる人の精進が可視化されるといいな～と思いながら作っていました。
GitHub の芝と AtCoder Problems の芝をマージするサービスの開発が待たれるな
— monkukui (@monkukui) 2021年3月8日
これからもwebについて勉強しようと思います！！！！
あと先月くらいに気づいたのですが、上位互換みたいなツールがありました。欲しかったのはこっち、みたいな人がいるかもしれません。
5月6日が誕生日なので欲しいモノリスト貼ります！👀
