algoNote

プログラミング関連の記録

ブログに競プロのレーティングを表示するようにした

AtCoderCodeforces・TopCoderSRMのレーティングを自動で取得して色付きで表示するスクリプト(javascript)を書きました。

※追記(2019/04/06) YQLがサービス終了した影響でAtCoderレーティングが表示されなくなっています。新しいバージョンを公開したのでそちらをご覧ください。
algon-320.hatenablog.com

※追記(2018/09/20) Codeforcesのレートのオレンジの境界が5ヶ月前くらいに変わっていたのですが、更新をサボっていました。今更ですが更新しました。
Codeforces: Updates in rating and rounds - Codeforces

※追記(2017/06/17)
YQLの仕様変更によってAtCoderのレーティングが取得できなくなっていたようです。
アルクカ(id:arukuka)さんより解決策を頂いたので修正しました。

YQL で html を読み込む方法が変わった(html table is no longer supported.) - arukukaの日記

これ

AtCoder : loading
Codeforces : loading
TopCoder SRM : loading

AtCoder handle :
Codeforces handle :
TopCoder handle :


機能
  • レーティング取得
  • 色付き表示
  • ユーザーページへのリンク
動作確認済みブラウザ

(このブラウザだと動かないとかがあれば是非教えてください)

レーティング取得

TopCoder
TopCoderにはAPIがあるのでこれを利用しました。
http://docs.tcapi.apiary.io/#reference/user-profile/public-profile

http://api.topcoder.com/v2/users/{handle}でユーザーの情報をJSONで取得できます。


Codeforces
CodeforcesにもAPIがあるので利用しました。
http://codeforces.com/api/help/methods

http://codeforces.com/api/user.info?handles={handle}でユーザーの情報をJSONで取得できます。

ちなみにCodeforcesJSONPも使えるようです。


AtCoder
AtCoderにはレーティングを取得するAPIが無いので、自前で取得する処理を書きました。

ユーザーページはhttps://atcoder.jp/user/{handle}です。このページからレーティングの部分を抜き出します。

そのままではクロスドメイン制約でアクセスできないらしいのでYQLを使いました。
こちらの記事が参考になりました。

YQLではxpathを指定することで取ってくる情報を選択できます。

xpath="//*[@id=\'main-div\']/div/div/div[2]/dl/dd[2]/span"

上のようにすることでレーティングの部分が抜き出せました。
スクレイピングなのでAtCoderの仕様変更で取得できなくなるかもしれません。

そのまま同じ色です。

AtCoder : レーティングの更新について - AtCoder

レーティング コード
灰色 0~399 #808080
茶色 400~799 #804000
800~1199 #008000
水色 1200~1599 #00C0C0
1600~1999 #0000FF
黄色 2000~2399 #C0C000
オレンジ 2400~2799 #FF8000
2800~ #FF0000

Codeforces : The Second Revolution of Colors and Titles - Codeforces

レーティング コード
Gray 0~1199 #808080
Green 1200~1399 #008000
Cyan 1400~1599 #03A89E
Blue 1600~1899 #0000FF
Violet 1900~2099 #AA00AA
Orange 2100~2399 #FF8C00
Red 2400~ #FF0000

TopCoder : TopCoder

レーティング コード
Gray 0~899 #999999
Green 900~1199 #00A900
Blue 1200~1499 #6666FF
Yellow 1500~2199 #DDCC00
Red 2200~ #EE0000

コード

handlesにidを設定すると動きます。

これにtwitterとAOJのリンクを追加したものをサイドバーに設置しています。

参考ページ

更新履歴

  • (2017/06/17) AtCoderのレーティングを取得する部分を修正しました。
  • (2018/09/20) Codeforcesのオレンジの境界の変更に対応しました。