もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第19回 jQueryでAJAX入門:JSONを使いサイトにTwitterを表示

この記事を読むのに必要な時間:およそ 7 分

Twitterの自分の発言をサイトに表示させる

ここまで,JSON形式のデータの利用方法や$.getJSON()メソッドの利用方法を説明してきました。今回の最後にこれらの方法を利用してTwitterの自分の発言をサイトに表示させる方法をご紹介します。

Twitter APIの利用

今では日本でも多くの人が利用するようになったTwitterですが,そのTwitterには様々なAPIが用意されています。自分の発言もJSON形式で利用することができるようになっているので,それを利用したサンプルをご紹介します。

特定ユーザーの発言一覧

特定ユーザーの発言一覧を表示させるには,下記URLを$.getJSON()メソッドで読み込むことで利用できます。

http://twitter.com/statuses/user_timeline/h2ham.json?callback=?

上記のURL中のh2hamとなっているところにユーザー名やユーザーIDを入れることで,特定のユーザーを指定できます。また,最後にcallback=?と入れることで,他ドメイン中のJSONデータでも利用できるようになります※1⁠。

jQuery(function(){
    $.getJSON("http://twitter.com/statuses/user_timeline/h2ham.json?callback=?",function(data){
        $('p','#demo').remove();    
        $('#demo').append('<ul/>');
        $.each(data,function(i,items){
            $("<li/>",{
                text:items.text
            }).appendTo('ul','#demo');
            if ( i == 4 ) return false;
        });
    });
});
※1)
この場合はJSONではなくJSONPという形式で,任意のcallback関数を自動が入ることで,クロスドメインでもAjax利用が可能になっています。

プラグイン化

Twitterをリストで表示する,という機能は実装できたので,今回ももっと様々な場面で使えるようにプラグインにしてみましょう。まずは完成したソースコードを見てください。

(function($){
    $.fn.twLine = function(options){ 
        var c = $.extend({
            //ユーザーIDもしくはスクリーン名
            user: null,
            number: 10
        },options || {});
        $(this).each(function(){
            var self = $(this);

        // ユーザー名がなければ処理を終了する
        if( !c.user ) {
            return false;
        }

        // loading文字列とJSONの中身を一覧で表示するためのul要素を入れておく
        self.append(
            '<div class="loading"><img src="images/loading.gif" width="32" height="32" alt="" />loading...</div>',
            '<ul/>'
        );
            
            // JSONの取得
            $.getJSON('http://twitter.com/statuses/user_timeline/' + c.user +'.json?callback=?',function(data){  
                // loading文字列を消去
                $('.loading', self).remove();
                
                // ポストがひとつもなかった場合
                if( data.length < 1 ) {
                    $('ul', self).append('<li>投稿がありません。</li>');
                    return false;
                }
                            
                // item毎に・・・
                $.each(data , function(i , items) {
                    
                    // 指定した数を超えた場合は終了する
                    if( i > (c.number - 1) ) {
                        return false;
                    }
                    
                    // itemの中のtextを抜き出してulに追加する
                    $('ul', self).append(
                        $('<li/>',{
                            text:items.text
                        })
                    );
                });
            });
        });
    }
})(jQuery);

実行する場合は以下のように実行します。

jQuery(function($){ 
    $('#demo').twLine({
        user: '32262053'
    });
    
    $('#demo2').twLine({
        user: 'h2ham',
        number: 5
    });
});

今回は前回利用した書き方ではなく,その前まで利用していた書き方に戻しています。その他の部分は,$.getJSON()メソッドを使う部分や細かい点などは今回用担っていますが,前回の内容と多くは同じになっています。

Twitterの投稿はうまく表示されましたでしょうか?Twitterをよく利用して,その投稿内容をサイトにも表示しておきたいような場合にぜひご利用下さい。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/