2007/4/12 木曜日

TwitterでAJAX

カテゴリー: おぼえ書き — ryu @ 21:05:34

なんかTwitterのバッチ貼りたいんだけどでかいなぁと思ってて。
これはひとつAJAXはじめた事だしIFRAMEでいいから何か作るか~と思ったときの話。

ちなみに右下に張り付いてるのがその時に作ろうと思ってたもののとりあえずの完成品。

APIはAPI Documentationで公開されています。
で、XML使えるならXSLTだよなぁと思い。scriptとXSLTを作成。
とりあえずローカルに置いてるXMLでテスト。
一通り動いてるみたいなのでtwitter.comから動的に取得するようにするとアクセス違反。
うひ~、クロスサイトか~。普段Java+Swingでリッチクライアントなだけに意識せず(w

じゃぁってことで、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をパラメータに与えてやればOK。
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のアイコンも何とかしたいけど(w

誰か~。

274 件のコメント

  1. AGENT: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
    KengoさんのGoing My Wayで
    「Twitter の Status を自分のブログに貼り付け可能な Javascript Badge」
    http://kengo.preston-net.com/archives/003154.shtml
    が紹介されてるorz

    コメント by rゆ — 2007/4/12 木曜日 @ 21:31:00

  2. AGENT: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
    って公式にもJavaScriptの有るしorz
    http://twitter.com/account/badge

    コメント by rゆ — 2007/4/12 木曜日 @ 21:36:00

このコメント欄の RSS フィード トラックバック URL

コメントフォームは現在閉鎖中です。

37 queries. HTML convert time: 0.245 sec. Powered by WordPress 2.8