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

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

jQueryでAJAX入門2回目:JSON形式を扱う

前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON(ジェイソン)と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます

JSON?

JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。

JSONサンプル
[
    {
        "name": "技評太郎",
        "age" : 26,
        "skills":["PHP" , "JavaScript"]
    },
    {
        "name": "長谷川広武",
        "age":25,
        "skills":["HTML" , "CSS"]
    },
    {
        "name": "徳田和規",
        "age":26,
        "skills":["JavaScript" , "jQuery"]
    }
]
  • オブジェクトは{}で全体を囲む
  • キーと値のペアはコロン(:)で区切る
  • 複数指定はカンマ(,)で区切る
  • キーには文字列のみ使用可能

JSONの例

JavaScriptのオブジェクトと配列の構造と同じですが、例を見てみましょう。

オブジェクト例

オブジェクト例
{
    "name" : "長谷川広武" ,
    "age" : 25
}

配列の例

配列の例
["JavaScript" , "jQuery" , "HTML" , "CSS"]

それでは早速先ほどのサンプルを表示させる簡単なサンプルを見てみましょう。

JSONをリストで表示させるサンプル

JSONは先ほどJSONサンプルを利用して、その中身をリストに入れて表示してみることにします。

$.getJSON()メソッド

JSON形式を取得する場合は、前回でも利用した$.ajax()メソッド利用でも実現可能なのですが、JSONでは、専用に$.getJSON()メソッドが用意されています。

$.getJSON("js/sample01.json",function(data){
    // ここに実行したい処理を書く
});

$.ajax()メソッドを使うよりも手続きが簡単です。

早速サンプルを見てみましょう。

jQuery(function(){
    $.getJSON("js/sample01.json",function(data){
        $('p','#demo').remove();
        $('#demo').append('<ul/>');
        $.each(data,function(i,items){
            $("<li/>",{
                text:'名前:'+items.name+' 年齢:'+items.age+' スキル:'+items.skills.join(',')
            }).appendTo('ul','#demo');
        });
    });
});

前回のXMLのサンプル時には、コード内でloading中の表示をさせましたが、今回はHTML側にloading中の画像をいれておき、$.getJSON()メソッドの最初で、その画像部分を.remove()メソッドで削除しています。その後、リストを表示させるためのUL要素を追加し、itemsごとにLI要素に入れてUL要素へ追加していくようにしました。

items中の複数の中身を一つのリスト中に入れてしまっているのですが、今回のサンプル用に簡易的に表示させたものです。

スキルだけ「.join(',')」を使っているのですが、これはスキルの項目のみ配列で複数中身があるので、それを一度に表示させるために中身を.join(',')で結合させているためです。

$.getJSON()を使わない場合

JSONデータはJavaScriptで簡単に扱えるようになっているデータでもあるので、$.getJSON()で利用せずとも、データの形によっては、HTMLのSctiptタグで読み込み利用する方法もあります。下記のように、変数として指定しておきます。

JSONサンプル
//変数とする
var jsonData = [
        {
            "name": "技評太郎",
            "age" : 26,
            "skills":["PHP" , "JavaScript"]
        },
        {
            "name": "長谷川広武",
            "age":25,
            "skills":["HTML" , "CSS"]
        },
        {
            "name": "徳田和規",
            "age":26,
            "skills":["JavaScript" , "jQuery"]
        }
    ]

上記のデータをScriptで読み込みます

<script type="text/javascript" src="js/sample02.json"></script>

これでデータを扱う準備ができたので、あとは通常通りコードで扱うだけです。

jQuery(function(){
        $('p','#demo').remove();    
        $('#demo').append('<ul/>');        
        $.each(jsonData,function(i,items){
            $("<li/>",{
                text:'名前:'+items.name+' 年齢:'+items.age+' スキル:'+items.skills.join(',')
            }).appendTo('ul','#demo');
            if ( i == 4 ) return false;
        });
});

この方法だと、$.getJSON()や$.ajax()を使わずとも表示が可能です。

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;
        });
    });
});

プラグイン化

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をよく利用して、その投稿内容をサイトにも表示しておきたいような場合にぜひご利用下さい。

おすすめ記事

記事・ニュース一覧