忍者ブログ

suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
<< 祝三万! HOME 日帰りドライブ!その3 >>

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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

条件
忍者ブログはサーバーサイドスクリプトが使えないし自分も書けないので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にデータは入ってるので展開してみてみたら謎の0~20の数字の中にデータが入っている!
・・・・・!?これって最新の20発言がまとめて帰ってきてたのね・・・・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の部分をお目当てのアカウント名にしないと私の発言を取得してしまうので注意してくださいね!!

PR
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
ブログ内検索
ツイッター
フリーエリア
18歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。 詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
最新コメント
[06/24 kz]
[10/16 haru]
[10/12 haru]
[06/08 nshi]
[11/15 まつかわ]
最新トラックバック
カウンター
クロシェットさんの新作プリズムリコレクションからアイナちゃん!
【プリズム◇リコレクション!】情報ページ公開中!
ストレガさんの新作木洩れ陽のノスタルジーカのフロゥちゃん\(>ヮ<)/
『木洩れ陽のノスタルジーカ』応援中です!
はいぺりよんさんのシストリのるなちー
シストリ抱き枕注文受付中!
フェイバリットさんの新作色とりどりのひかり!
いろとりどりのヒカリ 応援中!!
Chuableさんの新作アステリズム 応援CHU
姉さんに恋をして、姉さんも恋をして、姉さんと恋をした。 アステリズム 応援中!
AXLさんの新作から月海ちゃん応援中!
AXL新作第8弾 2012年春発売予定!
Meteorさんの新作Princess-Styleから一宮菖蒲ちゃん応援中!
『Princess-Style』応援中です
YUZU SOFTさんの新作とSAGAPLANETSさんの新作応援中!
はつドラ合同バナーキャンペーン開催中
loseさんの新作『ものべの』応援中!
ものべの - 夏葉
Favoritさんの新作いろとりどりのセカイ
いろとりどりのセカイ 応援中!!
<< 祝三万! HOME 日帰りドライブ!その3 >>
忍者ブログ [PR]