algoNote

プログラミング関連

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

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

※追記(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~2199 #AA00AA
Orange 2200~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

コード

※追記(2017/06/17) AtCoderレーティングを取得する部分を修正しました。

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

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

参考ページ