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

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

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

プラグインソース

18回で作成した,rss2render.jsと今回のgRSSRender.jsのソースコードを見比べると違いがすぐ分かると思います。

(function($){

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

    // Extend the jQuery fn namespace
    $.fn.extend({
        // RSS Render with Google Ajax Feed API
        gRSSRender: function(options) {
            // 今回使う変数たち
            var self = $(this),
                c = $.extend({
                    url: null,
                    number: 10
                },options || {});
                
            // URLがなければ処理を終了する
            if( !c.url ) {
                return false;
            }
            
            // Feedのインスタンスの生成
            var feed = new google.feeds.Feed(c.url);
            
            // numberの指定があればロードするエントリー数を指定する
            if( c.number ) feed.setNumEntries(c.number);
            
            // loading文字列とRSSを一覧で表示するためのul要素を入れておく
            self.append(
                '<div id="gRSSloading">loading...</div>',
                '<ul/>'
            );
            
            // Feedの取得 / load( callback ) callbackの引数resultでFeedを受け取る
            feed.load(function(result) {
                
                // ローディングの削除
                $('#gRSSloading').remove();
            
                // エントリーをitemsとする
                var items = result.feed.entries;
                
                // エントリーがない場合は,ありません表示
                if( items.length<1 ) {
                    $('ul', self).append('<li>記事がありません。</li>');
                    return false;
                }
            
                // items の個数分処理を繰り返す
                $(items).each(function(i) {
                
                    // ul に追加していく
                    $('ul', self).append(
                        $('<li/>').append(
                            $('<a/>', {
                                // link は .link
                                href: this.link,
                                // title は .title
                                text: this.title
                            })
                        )
                    );
                });
            });
        }
    });
})(jQuery);

jQuery(function($){
    
    $('#rss').gRSSRender({
        url: 'http://rss.rssad.jp/rss/gihyo/design/feed/rss2',
        number: 10
    });

});

2つ目のサンプルについて

2つ目のサンプルでは,実際にRSSをロードしていることが分かるように,切り替えリンクを用意しました。

画像

あらかじめhrefにRSSのURLを入れてあるので,クリックするとそのURLがgRSSRender()メソッドに渡され,表示領域のデータが更新されます。

JSソース

 <script type="text/javascript">
    jQuery(function($) {
        $('#switchRSS a').click(function() {
            var rss = this.href;
            $('#rss').empty().gRSSRender({
                url: rss,
                number: 10
            });
            
            return false;
        });
    });
</script>

HTMLソース

<ul id="switchRSS">
<li><a href="http://rss.rssad.jp/rss/gihyo/design/feed/rss2">gihyo.jp</a></li>
<li><a href="http://moto-mono.net/feed/atom">5509</a></li>
<li><a href="http://feeds2.feedburner.com/h2ham">THE HAM MEDIA</a></li>
</ul>

まとめ

Google AJAX Feed APIを利用することで,外部のRSSフィードも取得できるようになるので,様々なコンテンツをページに表示することができます。

Google AJAX Feed APIのAPI(メソッド)については以下の公式ドキュメントに記載されているので,興味のある方はご覧になられてはいかがでしょうか。

Google AJAX Feed API クラス リファレンス

著者プロフィール

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