codeforcesのAPI利用してblogパーツが出来た。

はい。

はてなblogに設置したらこんな感じの表示になってます。

もしもしもしも設置してみたいけど環境が・・・・という奇特な方がいらっしゃったらてきとーに@飛ばしていただけたら対応いたします。

キャプチャ

{: style=”width: 100px; vertical-align:middle;”}

画像サイズ調整対応してないっぽいのか書き方が悪いのか。。。

設置場所

http://shito.hatenablog.com/

設置するのにややサイドバーの幅が広めで必要かもしれない。blogのデザインで細くなってる場合はアレです。個人データは事前にpythonでcodeforces apiから情報を取得させて必要な情報を選んで自鯖内にjsonp形式で保存したものを反映させてます。

こんなパーツを作ろうと思ったのは、

http://githubbadge.appspot.com/

↑を見たのがきっかけでバッジのhtmlとCSSは流用してる間に結構な改変になってしまった。。github見るとライセンスはMozilla Public License, v. 2.0. で公開されてるから改変して利用していい認識なのですがダメだったら死ねる。。

blogパーツとしてはiframeで埋めてるんですが実体は下記に

http://www001.upp.so-net.ne.jp/codeforcesbadge/clarinet758.html

ようやく全ソース公開になりました。

https://github.com/clarinet758/codeforces_badge

まぁあんまり頻繁にかわる個人データでもないので一日一回cronで更新させればいいかなと思ってます。

パクってることとパクリ元と設置場所など明らかにしたので私の方で書き直したことなどを下記に

jsonファイルのデータをjavascriptでhtmlのbody部分に反映させる

参考先さま
http://api.jquery.com/jquery.getjson/
http://qiita.com/miiitaka/items/f77cb83b9dfcd05aea82
http://js.studio-kingdom.com/jquery/ajax/get_json
http://www.re-creators.jp/blog/2008/12/09_167.html

個人的には $("<span>").text(data.verdict).prependTo("#verdict"); のような書き方が一番書きやすかった。

//append
//指定した要素の後ろに追加になるので名称の表記などで
//<span id="ID">ID:</span>などような配置だと思う。
$("追加する場所").append("追加する内容")


//prepend
//指定した要素の先頭に追加になるので数量の表記などで
//<span id="login">days</span>
$("追加する場所").prepend("追加する内容")


//appendTo
//挙動はappendと同等で記法の違いだと思います。
$("追加する内容").appendTo("追加する場所")

//prependTo
//挙動はprependToと同等で記法の違いだと思います。
$("追加する内容").prependTo("追加する場所")

私が実際に使ったのはprependToを使用しました。何故かコレが一番書き易かったし分かり易かった。この記法は人気が無いっぽいですけど。。

JSONPに対応させればcodeforcesのサーバに直接データ取りに行ってほぼリアルタイム更新になるかと思ったんですけど、まだcodeforces側がJSONP形式に未対応っぽいです。あともし対応済みだったとしてもajaxでデータ取りに行くのに複数箇所に取りに行くのはダメっぽいです。

特に意味は無いですが解決されることを願って自分の管理しているサーバにparseResponse();で囲んでデータ保存して、ajax使ってJSONPのデータ読ませてますけどあまり意味はなさそう。。

追記
pythonでjsonデータ取得が非常に苦痛だったのでシェルスクリプトに変えたメモ

python2.7 で取得の場合

import urllib2
import json
a=urllib2.urlopen('http://codeforces.com/api/user.rating?handle=Fefer_Ivan')
a
#<addinfourl at 42251688 whose fp = <socket._fileobject object at 0x282bd50>>
type(a)
#<type 'instance'>
b=json.load(a)
#<type 'dict'>
b['status']
#u'OK'

import urllib.request
import json
a=urllib.request.urlopen('http://codeforces.com/api/user.rating?handle=Fefer_Ivan')
a
#<http.client.HTTPResponse object at 0x1603bd0>
type(a)
#<class 'http.client.HTTPResponse'>
b=a.read()
type(b)
#<class 'bytes'>

3系だとurllib2.urlopenがurllib.request.urlopenに置き換えられましたというから使ってみたが挙動がやや違う。。。
2系で取得するとそのまま続けて処理に移れるがint型以外の文字列が勝手に全てu''でunicodeなってしまっているのがとても苦痛だった。。
3系で同等の挙動と言われてurllib.request.urlopenすると返って来てるものが違う。。そしてjson.load出来なかった。。

シェルコマンドでwgetしたら { } で囲まれて綺麗に欲しかった形式で保存出来ていたのでwget使うことにしました。