Google Feed APIの利用

Webサイトを作成していると、他のサイトのRSSを読み込んで自分のサイトに表示したい場合があります。今回は「Google Feed API」を利用してRSSデータの表示を行ってみました。

※ こちらの記事は古いので、Google Feed APIが使えなくなっていたのでPHPで代替を参照してください。

まず、以下のファイルを読み込みます。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

そして、JavaScriptで次のコードを書きます。

<script>
    // 安定版のfeeds APIを読み込む
    google.load("feeds", "1");

    function showRss(){
        // 1時間毎にRSSデータを更新するための文字列作成
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        var hour = now.getHours();
        var dateStr = "";
        dateStr += year.toString();
        dateStr += month.toString();
        dateStr += day.toString();
        dateStr += hour.toString();

        // amazonランキングのURLを設定（「Kindle本-プログラミング」のランキング用RSS）
        var rssURL = 'https://www.amazon.co.jp/gp/rss/bestsellers/digital-text/2291769051/ref=zg_bs_2291769051_rsslink';

        // 自分のトラッキングIDをセット
        rssURL += '?tag=*****';

        // 通常だと更新のタイミングが遅いので、1時間単位で更新されるように文字列追加（googleの方でキャッシュされるため）
        rssURL += '&' + dateStr;

        // インスタンス作成
        var feed = new google.feeds.Feed(rssURL);

        // 取得する件数の設定
        feed.setNumEntries(10);

        // RSSデータの読み込み、HTML出力処理
        feed.load(function(result) {
            if (!result.error) {
                var liHtml = '';
                for (var i = 0; i < result.feed.entries.length; i++) {
                    liHtml += result.feed.entries[i].content;
                    liHtml += "<div style='clear:both;height:10px;'></div>";
                }
                liHtml += "<div>このランキングの最新情報は<a href='" + result.feed.link + "'>こちら</a>を参照。</div>";

                // HTML出力
                $('#feed').html(liHtml);
            }
        });

    }

    // ページロード時に実行
    google.setOnLoadCallback(showRss);
</script>

最後に表示したい場所へ以下のタグを配置。

<div id="feed"></div>

今回は取得したコンテンツデータをそのまま表示している。

表示をカスタマイズしたい場合、取得したコンテンツデータを分解して、新しくHTMLを作成してやる必要がある。

なお、「Google Feed API」の利用については、下記の参考リンクで詳しく記載されていたので、そちらを参照。

• APIの読み込みなどAPIを利用したスクリプトの構成 - AjaxTower