モノノフ日記

普通の日記です

jQueryを使ってTwitterをおいしくマッシュアップを試してみた

javascript

jQueryを使ってTwitterをおいしくマッシュアップ （1/4） ─ ＠IT

約1年前の記事で今更感ありまくりですが、del.icio.usのhotlistに上がってたのを見つけたので勉強がてら試してみました。記事ではjQuery1.1.3.1を使ってますが最新版の1.2.3で試してます。

public_timeline_controller.js

これはそのまま。変更した点は

  • readyメソッドを省略形に
  • 30秒ごとにcallしていたのを60秒に

datetimeはfriends_timeline APIを使おうと思って試行錯誤した後です。

var twitter = new Object();

twitter.publicTimelineController = function() {
    this.documentReady();
}

twitter.publicTimelineController.prototype = {

    documentReady: function() {
        $(function() {
            twitter.controller.publicTimeline = new twitter.publicTimeline();
            twitter.controller.callJsonp();
        });
    },

    jsonpCallback: function(statuses) {
        var since_id = statuses[0].id;
//        var datetime = (new Date()).toString();
        twitter.publicTimelineView.render(statuses);
        setTimeout(function() {
            twitter.controller.callJsonp(since_id);
        }, 60000);
    },

    callJsonp: function(since_id) {
        this.publicTimeline.since_id = since_id;
        this.publicTimeline.jsonp(function(statuses) {
            twitter.controller.jsonpCallback(statuses);
        });
    }
}

twitter.controller = new twitter.publicTimelineController();

public_timeline.js

jQuery1.2.XからネイティブでJSONPに対応してるので、pluginは使ってません。
controller同様、sinceはfriends_timelineを弄ぼうしてた残骸。

// constructor
twitter.publicTimeline = function() {
    this.since_id = '';
//    this.since = '';
}

twitter.publicTimeline.prototype = {
    jsonp : function(callback)  {
        var url = "http://twitter.com/statuses/public_timeline.json?since_id="+ this.since_id +"&callback=?";
//            var url = "http://twitter.com/statuses/friends_timeline/Kiske.json?since="+ this.since +"&callback=?";
        $.getJSON(url, callback)
    }
}

public_timeline_view.js

変更点はパラメータ変えてるだけです。

  • 15秒→30秒に
  • 表示結果を5件→10件に
twitter.publicTimelineView = {
    render: function(statuses) {
        if(statuses.length > 0) {
            var status = statuses.pop();
            $("#statuses").after(
                $("<div class='status' id='status" + status.id + "'><a href='http://twitter.com/"+ status.user.screen_name+"'>" +
                "<img src='"+ status.user.profile_image_url +"'/></a><div class='comment'><p class='text'>" + status.text + "</p>" +
                "<cite class='user'>Twit from <a href='http://twitter.com/"+ status.user.screen_name +"'>" + status.user.name +
                "</a></cite></div></div>")
            );

            setTimeout(function() {
                twitter.publicTimelineView.render(statuses);
                $(".status:gt(9)").remove();
            }, 3000);
        }
    }
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Twitter Public Timeline Checker</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/application.css">
    <script type="text/javascript" src="js/jquery-1.2.3.js"></script>
    <script type="text/javascript" src="js/controllers/twitter/public_timeline_controller.js"></script>
    <script type="text/javascript" src="js/models/twitter/public_timeline.js"></script>
    <script type="text/javascript" src="js/views/twitter/public_timeline_view.js"></script>
</head>
<body>
    <!-- displayed recent statuses -->
    <div id='statuses'></div>
</body>
</html>

とりあえず動いてることを確認できた。今度はこれをカスタマイズしてfriends_timelineをひっぱってくるようにしてみる。