RSSフィードを読み込んでサイトに表示する方法

注意）コード中で使用している「Google Feed API」のサービスは終了しています。

RSSデータを読み込んで自分のサイトに表示する方法です。ここではAmazonのベストセラーを例にして取得・表示方法の紹介をします。

まず、Amazonでサイトに表示したいランキングのページへ移動します。

移動したら、下の方に「RSSフィード」とあり、RSSフィードアイコンとカテゴリのリンクがあるので、そのリンクをクリックするとRSSデータのURLに遷移して、ブラウザ上にRSSデータが表示されます。

プログラムでは、このURLを指定してRSSデータを読み込みます。

URLの例：https://www.amazon.co.jp/gp/rss/bestsellers/dvd/562020/ref=zg_bs_562020_rsslink

下記のコードはRSSフィード関連で必要な個所を抜粋していて、そのままでは動作しないので注意してください。

var myApp = angular
    .module('testApp', ['ngSanitize', 'ngResource']);

myApp.factory('FeedLoader', function ($resource) {
    return $resource('https://ajax.googleapis.com/ajax/services/feed/load', {}, {
        fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
    });
});

myApp.controller('feedCtrl', function ($scope, FeedLoader) {
    var rssUrl = https://www.amazon.co.jp/gp/rss/bestsellers/dvd/562020/ref=zg_bs_562020_rsslink + "?tag=" + 自分のトラッキングID;

    FeedLoader.fetch({q: rssUrl, num: 10}, {}, function (data) {
        var feed = data.responseData.feed;
        var products = [];
        feed.entries.forEach(function(item, i){
            // タイトルやリンクの取得であれば下記のような指定で取得可能
            // item.title
            // item.link
            // item.publishedDate

            // 画像のURLを取得したい場合、content（HTMLデータ）からURLを抽出する
            var data = convertRssData(item.content);
            products.push(data);
        });
        $scope.products = products;
        $scope.rankingLastUrl = feed.link;
    });

    // 取得したRSSデータのコンテンツ（HTMLデータ）から必要な情報を抽出
    function convertRssData(content) {
        var data = {};
        data.title = "";
        data.link = "";
        data.image = "";
        data.review = "";
        data.priceOrg = "";
        data.priceAct = "";

        var titleArr = content.match(/<span><a href\=\"(.*?)\">(.*?)<\/a><\/span>/);
        if (titleArr !== null && titleArr.length > 2) {
            data.title = titleArr[2];
        }

        var linkArr = content.match(/<a href\=\"(.*?)\">/);
        if (linkArr !== null && linkArr.length > 1) {
            data.link = linkArr[1];
        }

        var imageArr = content.match(/<img src\=\"(.*?)\" /);
        if (imageArr !== null && imageArr.length > 1) {
            data.image = imageArr[1];
        }

        var reviewArr = content.match(/<img src\=\"(.*?)<br>/g);
        if (reviewArr !== null && reviewArr.length > 1) {
            data.review = reviewArr[1];
        }

        var priceOrgArr = content.match(/<strike>(.*?)<\/strike>/);
        if (priceOrgArr !== null && priceOrgArr.length > 1) {
            data.priceOrg = priceOrgArr[0];
        }

        var priceActArr = content.match(/<font(.*?)<\/font>/);
        if (priceActArr !== null && priceActArr.length > 1) {
            data.priceAct = priceActArr[0];
        }
        return data;
    }
});

上記の抽出方法では、評価と価格をHTMLタグごと取得しているので、出力する際は以下のような感じにします。

<div class="ranking_list">
    <a class="ranking_item" ng-repeat="product in products" ng-href="{{ product.link}'+ '}' }}" target="_blank">
        <div class="product_image">
            <img ng-src="{{ product.image}'+ '}' }}" />
        </div>
        <div class="product_info">
            <div class="info_content"><span ng-bind="product.title"></span></div>
            <div class="info_review"><span ng-bind-html="product.review"></span></div>
            <div class="info_footer"><span ng-bind-html="product.priceOrg"></span><span ng-bind-html="product.priceAct"></span></div>
        </div>
    </a>
</div>

• Amazon.co.jp ヘルプ: RSSフィードについて
• フィードからタイトルやエントリを取得 - Google AJAX Feed API入門