TwitterでAJAX
なんかTwitterのバッチ貼りたいんだけどでかいなぁと思ってて。
これはひとつAJAXはじめた事だしIFRAMEでいいから何か作るか～と思ったときの話。
ちなみに右下に張り付いてるのがその時に作ろうと思ってたもののとりあえずの完成品。
APIはAPI Documentationで公開されています。
で、XML使えるならXSLTだよなぁと思い。scriptとXSLTを作成。
とりあえずローカルに置いてるXMLでテスト。
一通り動いてるみたいなのでtwitter.comから動的に取得するようにするとアクセス違反。
うひ～、クロスサイトか～。普段Java+Swingでリッチクライアントなだけに意識せず（ｗ
じゃぁってことで、XMLの取得をXMLHttpRequestに書き換えて…と。
えーと、XMLHttpRequestでもクロスサイトですがorz。
ってことで、XSLTは諦めてJSONで行く事に。
TwitterのAPIでどうやって変数代入するかちょっと悩んだ。
GoogleのjsonとかYahooのjsonとか風に試してみたらYahoo!ので行けたみたい。
各APIで隠しパラメータみたいなのがあって、
<script src=”http://twitter.com/statuses/friends_timeline/4258461.json?callback=statusCallback” type=”text/javascript” charset=”utf-8″></script>
という感じでcallbackをパラメータに与えてやればＯＫ。
IDは数字の方じゃないとちゃんと返って来ない。
上の例は、全部入り。URLのfriends_timelineをuser_timelineにすれば自分の、
あんまり使わないと思うけどpublic_timelineというのもある。
ま、取得さえ出来れば後は…ね。ソース見てもらえれば解ると思うけどこんな感じ。
var html = null;
function statusCallback( arg ){
var resultData = "";
for(var i=0; i < arg.length; i++){
var text = arg[i].text;
var screen_name = arg[i].user.screen_name;
resultData += "<div class=\"status\" >" +
screen_name + ": " + text + "</div>";
}
html = resultData;
}
function onLoad(){
document.getElementById("XML").innerHTML = html;
}
見栄えはもうちょっと良くしたいなぁ。
AutoTwitterのアイコンも何とかしたいけど（ｗ
誰か～。
トラックバック URL : http://nyanyan.to/archives/264/trackback
コメント (274)
