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

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

画像

18回からjQueryを利用したFeedの読み込みや、Twitterのタイムライン読み込みなどを行ってきましたが、今回は少し話を戻して第18回 jQueryでAJAX入門:RSSをAJAXで取得してリストに表示するの続きで外部RSSフィードをGoogle AJAX Feed APIを利用して読み込んでみましょう。jQueryとの絡め方も少し説明しています。

Google AJAX Feed API

18回でも少し紹介した通り、Google AJAX Feed APIを使えばクロスドメインの制約を超えて、外部RSSを読み込むことができます。利用するには、Google Maps APIと同じように、Googleアカウントが必要なので、取得していない方はまずGoogleアカウントを取得しておいてください。

APIキーの取得

キーの取得方法はおなじみGoogle Maps APIと同じで、利用したいドメインを入力してキーを取得します。

Google AJAX Feed APIのサインアップページ

URLはサンプルファイル用のドメインです
URLはサンプルファイル用のドメインです
キーはサンプルファイル用です
キーはサンプルファイル用です

APIの読み込み

APIキーを取得したら、読み込みましょう。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAttrn24k4yq5IZa1QwAH1phSX4GPXWjxz58tiRPyf1JSOBmEb7hSWuX3JPNgGyIoMLY00-8tj1ngDKQ"></script>

以上で、APIが使える状態になりました。実際にFeed APIを使うには、Feed APIをロードする必要があります。

Feed APIの読み込み

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

この後にすることのポイントは以下の2点です。

  1. 取得したいRSSのURLでインスタンスを初期化
  2. RSSの取得

取得したいRSSのURLでインスタンスを初期化

まずはRSSを読み込むために、インスタンスを初期化します。
new google.feeds.Feed(RSSのURL)で初期化します。

// Feedインスタンスの生成
var feed = new google.feeds.Feed('http://rss.rssad.jp/rss/gihyo/design/feed/rss2');

渡すRSSの種類はRSS1, RSS2, Atomとどれを渡してもGoogle AJAX Feed API側で処理して返されるため、渡すフィードの種類を気にしなくていい点も便利です。

対応しているフィード形式

公式ドキュメントによればGoogle AJAX Feed APIが対応しているフィード形式は以下の通りです。

  • Atom 1.0
  • Atom 0.3
  • RSS 2.0
  • RSS 1.0
  • RSS 0.94
  • RSS 0.93
  • RSS 0.92
  • RSS 0.91
  • RSS 0.9

RSSの取得

インスタンスを初期化したら、Feedの読み込みを行います。
Feedの取得には.load()メソッドを利用します。

// Feedの取得 / load( callback ) callbackの引数resultでFeedを受け取る
feed.load(function(result) {
	// 実行したい処理
});

これで、load()メソッドのresult部分でRSSを受け取ることができます。ポイントは受け取ったFeedはJSON形式で返されるという点です。オプションを使うことで、XML形式で返すこともできますが、JSONのほうがアクセスしやすいので、今回はこのままJSONを利用します。

取得した情報へのアクセス

取得したデータは、実際にはJSONPで返されるので、Firebugのコンソールには表示されず、接続タブで確認することができます。

画像

JSON形式ですので、それぞれはプロパティとしてアクセスすることができます。具体的には、エントリーは以下のように.feed.entriesでアクセスできます。

デフォルトの設定ではエントリーは4件読み込む設定になっています。後で説明しますが、この件数は変更することができます。

result.feed.entries

entriesは配列になっているので、for()や.each()でループさせて処理します。せっかくjQueryを使っているので.each()で例をあげてみます。

各entryのタイトルとURLはそれぞれ、.title, .linkでアクセスすることができます。

// entries の個数分処理を繰り返す
$(result.feed.entries).each(function() {
    console.log('href: ' + this.link + '\n' + 'text: ' + this.title);
});

アクセスできる要素

今回はtitleとlinkしか使いませんが、その他 entries のループ内でアクセスすることができる要素(プロパティ)は以下の通りです。

プロパティ内容
titleエントリーのタイトル
linkエントリーのリンク
content記事の本文(HTMLタグありで返される)
contentSnippet120文字未満のcontent(HTMLタグは外れた状態のも)
publishedDate公開日
categoriesカテゴリー(配列で返される)

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()を入れておきます。

プラグインソース

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 クラス リファレンス

おすすめ記事

記事・ニュース一覧