Google Feed APIで用意されている要素以外の要素にアクセスする方法

Google Feed APIを使ってJavaScriptでRSSを取得して表示する。 – KUMA TYPE

上の記事を踏まえて、Google Feed APIを使って簡単に取得できるFeedの要素はtitle、link、description、author、entriesリストとentriesリストに含まれるtitle、link、content、contentSnippet、publishDate、categoriesである。

それ以外の要素を読み込むには少し複雑になる。


参考リンク

例として楽天市場総合ランキングのRSSフィードを取得してそこから価格や画像の要素を取得したり楽天ウェブサービスで紹介されているアフィリエイトURLの作成方法を使ってアフィリエイトにしてしまうサンプル。

<script src="https://www.google.com/jsapi?key=ABQIAAAALzmN1hgTr2PC_IRwV5lbFRSyNpe6ieGxTDwC7hiaorwE3hy2EhSHZzpjusBl7KtoROnZK4WVyhHARg" type="text/javascript"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
    var feed = new google.feeds.Feed("http://ranking.rakuten.co.jp/rss/weekly/0.xml");
    feed.setNumEntries(5);
    feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
    feed.load(function(result) {
        if (!result.error){
            var container = document.getElementById("feed");
            var items = result.xmlDocument.getElementsByTagName("item");
            var html = ”;
            for (var i = 0; i < items.length; i++) {
                var title   = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
                var link    = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
                var image   = items[i].getElementsByTagName("image128url")[0].firstChild.nodeValue;
                var mobi    = items[i].getElementsByTagName("mobileurl")[0].firstChild.nodeValue;
                var price   = items[i].getElementsByTagName("price")[0].firstChild.nodeValue;
                var ir =  link.match(/(item\.rakuten\.co\.jp.+?)\&/);
                if(ir){
                    link = ‘http://’ + RegExp.$1;
                }
                var affiurl = "http://hb.afl.rakuten.co.jp/hgc/055e513c.82654366.055e513d.27abd89d/?pc="+link+"&m="+mobi
                html += ‘<p style="margin:0; padding:0;"><a href="’ + affiurl + ‘"><img src="’ + image + ‘" alt="’ + title + ‘" border="0" /></a></p>’;
                html += ‘<p style="margin:0; padding:0;"><a href="’ + affiurl + ‘">’ + title + ‘</a></p>’;
                html += ‘<p style="color:#FF0000;">’ + price + ‘ 円</a></p>’;
            }
            container.innerHTML = html;
        }
    });
}
google.setOnLoadCallback(initialize);
</script>
<div id="feed" style="width:200px; line-height:120%;"></div>
<div id="credit">
<!– Rakuten Web Services Attribution Snippet FROM HERE –>
<a href="http://webservice.rakuten.co.jp/" target="_blank"><img src="http://webservice.rakuten.co.jp/img/credit/200709/credit_4936.gif" border="0" alt="楽天ウェブサービスセンター" title="楽天ウェブサービスセンター" width="49" height="36"/></a>
<!– Rakuten Web Services Attribution Snippet TO HERE –>
</div>

実際に上のスクリプトを貼り付けて見たのが下。price要素から価格を取得して表示している。画像もimage128url要素から取得している。リンクはアフィリエイトタグになっている。レンタルブログで楽天アフィリエイトしている人には便利かも知れないが、規約的にどうか分からないので利用する場合は規約を確認したり楽天に問い合わせるなど自己責任でお願いします。

 

楽天ウェブサービスセンター

 

こんな感じでGoogle Feed APIを使えば工夫次第でRSSを使ったマッシュアップが色々出来ると思います。

タグ : ,