ブログに競プロのレーティングを表示するようにした
AtCoder・Codeforces・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の日記
これ
機能
- レーティング取得
- 色付き表示
- ユーザーページへのリンク
動作確認済みブラウザ
(このブラウザだと動かないとかがあれば是非教えてください)
レーティング取得
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で取得できます。
ちなみにCodeforcesはJSONPも使えるようです。
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 |
色 | レーティング | コード |
---|---|---|
Gray | 0~899 | #999999 |
Green | 900~1199 | #00A900 |
Blue | 1200~1499 | #6666FF |
Yellow | 1500~2199 | #DDCC00 |
Red | 2200~ | #EE0000 |
コード
handles
にidを設定すると動きます。
これにtwitterとAOJのリンクを追加したものをサイドバーに設置しています。
参考ページ
- Selectors - jQuery 日本語リファレンス
- jQuery.ajax(options) - jQuery 日本語リファレンス
- Ajax通信とクロスドメイン問題 | IT工房|Webデザイン入門
- YQL×JSONPでクロスドメイン制約を超え、要素を取得するハナシ | 戯言Vestige++
- JavaScriptでURIエンコード(URLエンコード)を行う|プログラムメモ
更新履歴
- (2017/06/17) AtCoderのレーティングを取得する部分を修正しました。
- (2018/09/20) Codeforcesのオレンジの境界の変更に対応しました。