はじめに

Twitterで競プロアカウントを運営している方でBioにAtCoderのレートを入れていたりバナー画像をレート遷移グラフに設定している人、それなりにいると思います。
いちいち新しい情報に更新するの面倒ではないですか？
今回はそういう方のためにバナー画像とBioの更新を自動化するツールを作ってみました。

作ったもの 👉 AtCoder Twitter Profile Updater
GitHub 👉 makutamoto/atcoder-twitter-profile-updater

どんなアプリ？

Twitter認証をしてAtCoderIDを入力するとAtCoderから情報をとってきて自動でプロフィールを更新してくれます。
自動更新を有効にすると毎週月曜日(大体土日にコンテストがあるので月曜日にしました)に自動でデータを更新してくれます。

技術解説

レートとレート遷移グラフの取得

このWebアプリは上の画像のようにレート遷移グラフを自動取得します。
これはPuppeteerを用いて実現しました。
Puppeteerはいわゆるヘッドレスブラウザというもので、Chromiumをバックグラウンドで起動してページ遷移などの操作やデータ取得、スクショ撮影などをすることができます。
ブラウザをまるまる起動するので重いですが、正確な描画ができるのが特徴です。
Lambdaに日本語フォントが入っていないため、企業コンのタイトルが文字化けするのがたまに傷ですが。（そのうち直します）

Puppeteerを使ってAtCoderのユーザーページを切り出すと、上のような画像が得られます。
Twitterのバナー画像は1500x500じゃないと勝手に切り取られるので、スケールをして余った背景はそれぞれのレートの色で塗りつぶしています。
このアイデアはこのページを参考にしました。

ちなみに、スケールと塗りつぶしの画像加工はJimpを使っています。
他のライブラリのほうが速いのですが、部分的にネイティブコードが含まれていてLambdaで動くか不安でした。
そのため、全てJavaScriptで書かれているJimpを採用しています。

またレート取得についてですが、レート情報もユーザーページに含まれているため、そこから引っこ抜きました。

Bioの更新

Bioの「AtCoder(レート)」という部分文字列を置換するために正規表現を使いました。
具体的な実装はこんな感じです。

newBio = bio.replace(/AtCoder\(\d*?\)/g, `AtCoder(${rating})`);

フロントエンド

フロントエンドはNext.jsで、React Bootstrapを使って実装しました。
特記することは特にありませんが、Vercelで簡単にデプロイできるので推しです。

バックエンド

今回、はじめてAWSを使ってみました。
構成をGitで管理するためにAWS CDKを使っています。
これはクラウド構成をTypescriptなどのプログラミング言語で記述できるもので、IDEの補間が使えたりクラウド資源をコンポーネント化したりできるので今回便利に使わせていただきました。

具体的な構成は図を作っておいたのでそちらを見て下さい。

感想

制作に４日ほどかかりました。
特に苦労したのはAppSync関係のセッティングですかね。（Apache Velocityがうまく書けなかった……）
ただ、習得すれば大きな武器になると思うので精進します！