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

第21回 jQueryでAJAX入門:Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み

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

Google AJAX Feed APIを使って取得したデータをjQueryを使ってページ内に表示させる

以上をふまえて,第18回で作成したサンプルデータを書き換えてみましょう。

$.ajax()で取得していた部分をfeed.load()に置き換えてその後の処理もGoogle AJAX Feed APIにあわせて書き換えています。

// Feed APIのロード
google.load('feeds', '1');

jQuery(function($){

    // ロードしたRSSを表示するブロック
    var rssBlock = $('#rss').append('<ul/>');

    // Feedインスタンスの生成
    var feed = new google.feeds.Feed('http://rss.rssad.jp/rss/gihyo/design/feed/rss2');
    
    // Feedの取得 / load( callback ) callbackの引数resultでFeedを受け取る
    feed.load(function(result) {
    
        // エントリーをitemsとする
        var items = result.feed.entries;
        
        // エントリーがない場合は,ありません表示
        if( items.length<1 ) {
            $('ul', rssBlock).append('<li>記事がありません。</li>');
            return false;
        }
    
        // items の個数分処理を繰り返す
        $(items).each(function(i) {
        
            // ul に追加していく
            $('ul', rssBlock).append(
                $('<li/>').append(
                    $('<a/>', {
                        // link は .link
                        href: this.link,
                        // title は .title
                        text: this.title
                    })
                )
            );
        });
    });
});

プラグインへの組み込み

18回の2つ目のサンプルと上記のサンプルコードを併せるだけですが,その前に取得するデータの件数の変更方法を確認しておきましょう。

といっても,とても単純で,インスタンスに対して.load()を実行する前に.setNumEntries()で取得数を指定するだけです。

// Feedのインスタンスの生成
var feed = new google.feeds.Feed(URL);

// 10件取得
feed.setNumEntries(10);

プラグインにする際の留意点

まず,APIがロードされていなければ何もできないため,以下の一文のプラグインの頭に入れておきます。

// APIがロードされていない場合は何もしない
if ( !window.google ) return false;

また,Feed APIが読まれていない場合も何もできないので,前もってロードしておきます。

// Feed APIがロードされていない場合はここでロード
if ( !google.feeds ) google.load('feeds', '1');

あとは,前と同じように,オプションでURLと表示件数を渡せるようにしておき,件数を受け取った場合はその件数分表示できるように,さきほどの.setNumEntries()を入れておきます。

著者プロフィール

長谷川広武(はせがわひろむ;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/