はじめに

都内でバックエンド開発を行なっている@hamaguchiです。
最近趣味として競技プログラミングをはじめました。解けた喜びはもちろんのこと、解けなかった時の悔しさを毎週味わえるのが素晴らしいです。仕事では味わえない「THE・敗北」という感じがたまらないですよね。

『悔しいっ…！悔しいっ…！だがこれでいいっ…！これでこそ競プロだっ…！』

さて前置きはここら辺にして、今回はAtCoderの成績をMarkdownファイル上に動的に埋め込むことができる AtCoder Statsを作成しました🎉

リポジトリ

よろしければスターを付けていただけると幸いです〜🤲

使い方

以下をコピーしてMarkdownファイルに貼り付けるだけで成績チャートを表示することができます🎉
username=は適宜AtCoderのユーザー名に変更して下さい。

[![](https://atcoder-stats-git-main-akmhmgc.vercel.app/api?username={AtCoderのユーザー名})]

※ なおエンドポイントはVercelの無料プランを利用してデプロイしているので、API制限が気になる方はご自身でデプロイすることをお勧めします
（参考：デプロイ方法）

仕組み

AtCoderの過去の成績を取得する

AtCoderは公式APIはないのですが、特定のURLの末尾に/jsonをつけるとJSON形式でデータが返ってきます。なので過去の成績は簡単に取得できます。

https://atcoder.jp/users/username/history/json

SVGを返すエンドポイントを作る

こちらのタコの画像のような、SVG要素を返すURLは、以下のような形でMarkdownに埋め込んで画像として展開することができます。

![タコの画像](https://upload.wikimedia.org/wikipedia/commons/6/68/Octopus_clipart.svg)

<img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Octopus_clipart.svg" width="420px">

なので動的にSVGで成績のグラフを返すエンドポイントを作ってあげればOKです。
グラフ作成にはD3.jsをサーバーサイドで使用するためのライブラリを使用しています。

最後に

お好きなMarkdownにAtCoderのグラフを埋め込んじゃいましょう🎉
また、改善点やご要望などがあればお気軽にコメントいただけると幸いです