Jqueryを使ってTwitterの自分の発言を取得する！！

したかったこと
ブログのツイッター表示するフラッシュのツール重くない？
ならユー自分で作っちゃいなＹＯ！

条件
忍者ブログはサーバーサイドスクリプトが使えないし自分も書けないのでJqueryを使う。
よって、ログインは出来ないから
http://twitter.com/suzrin
で見られる発言だけになっちゃうけどよしとしよう

まずツイッターの仕様を調べた！
ここが大変だった。
上で書いたログインしないでも取得出来る
http://twitter.com/suzrin
の発言をJqueryでとりたいのに大抵のやつは認証後のAPIの話でさっぱり
で、実は
http://twitter.com/suzrin
のソースコードに書いてある
http://twitter.com/statuses/user_timeline/hogehoge.rss
を
http://twitter.com/statuses/user_timeline/suzrin
にするとデータにアクセス出来ることに気が付いた

次に、どのデータ形式でデータを受け取るか？というと
Jqueryで使えるのは
$.ajax
$.getJSON
の二種類しか判らない
他の方法なんか判らないからJSONで貰うことにする
http://twitter.com/statuses/user_timeline/suzrin.json
とすることでJSONP形式で返してくれるらしい。
しかもクロスドメインを考慮されたJSONPと言う形式でjqueryで取得すると自動的にオブジェクトになるらしいエロイ。
でJqueryのサンプルをみると
$(document).ready(function(){
$.getJSON(url,data,fn()
});
となっているから
urlはhttp://twitter.com/statuses/user_timeline/suzrin.json
dataはよくわからいから適当にjqueryにしてみた
でfunction(data)
とするとdataに発言データが格納されるはず

まとめると
$(document).ready(function(){
var url = http://twitter.com/statuses/user_timeline/suzrin.json;
var param='jquery';
$.getJSON(url,param,function(data)
});
となる

でもだめだった。どうやらurlに'callback=?'というのが必要らしい
要するに
var url = http://twitter.com/statuses/user_timeline/suzrin.json?callback=?;
これはAPIリファレンスかなんかに書いてあった気がする
調べたときにどこで見つけたのかメモっておかないのは悪い癖だなぁ

で書き直すと
$(document).ready(function(){
var url = http://twitter.com/statuses/user_timeline/suzrin.json?callback=?;
var param='jquery';
$.getJSON(url,param,function(data)
});
でOK

次に取得したJSONデータを加工しなくちゃ行けない
JSONでーたというのは
var foo = {hoge:'hogehoge',piyo:'piyopiyo'}
と言う形式らしい。
これって配列？と思ってfoo[hoge]とするとhogehogeが帰ってこない
hogeがundifinedだって言われる。
文字列じゃないとダメなのは当たり前だよねorz
foo['hoge']
でhogehoge
が帰ってくる
でもツイッターのデータは凄い数だし階層も三階層くらい有りそうだからこの書き方だと面倒だ
というので調べたらどうやらオブジェクトとして扱えるからクラスを繋げて書けばいいと言う謎の構文が！
foo.hoge
でhogehoge
が帰ってくるらしい
・・・・・！？これってJqueryのメソッドチェーンと一緒か！
javascriptを少し判った気がした瞬間でした
で、あらかじめ調べて於いた発言が入っているのは
'text'
らしいので
data.text
で発言が取得できるはず！早速組み込んでみる

$(document).ready(function(){
var url = http://twitter.com/statuses/user_timeline/suzrin.json?callback=?;
var param='jquery';
$.getJSON(url,param,function(data)
$('body').append(data.text);
});

これが動かない。何で動かないのか判らないからここで一番時間を使った
で、ブレークポイントを$.getJSONの行に設定してリロードを繰り返しながら眺めてたら、dataにデータは入ってるので展開してみてみたら謎の０～２０の数字の中にデータが入っている！
・・・・・！？これって最新の２０発言がまとめて帰ってきてたのね・・・・orz
なので一番目の発言は
data.text
ではなく
data[0].text
あとはこれをforで回してあげて

$(document).ready(function(){
var url = http://twitter.com/statuses/user_timeline/suzrin.json?callback=?;
var param='jquery';
$.getJSON(url,param,function(data){
var twit = '';
for (i=0;i<data.length;i++){
twit += '<li>'+data[i].text+'</li>'
}
$('div').html('<ol>'+twit+'</ol>');
}
)
});

以上で取得、簡単な加工完了！
つっかれたーーーー
けど勉強になりました
少し時間取れたらUI作ってブログにくみこもうっと

追記！！！
var userName = 'あなたのアカウント名'
var url = http://twitter.com/statuses/user_timeline/'+userName+'.json?callback=?;
と言う感じにsuzrinの部分をお目当てのアカウント名にしないと私の発言を取得してしまうので注意してくださいね！！