http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/
JavaScriptのみで他のサイトの情報を取得する場合、XmlHttpRequestオブジェクトはクロスドメインを許可しないため、JSONPを利用して取得するのが基本である。
本来ならJSONPを利用するためには、サーバ側がJSONPに対応したAPIを持っているか、RSSをJSONPに変換する作業が必要である。しかし、Googleが公開しているGoogle Ajax Feed API というAPIを利用すれば、JSONPの変換・取得が簡単に扱える。
以下に、具体的にはどう使うかを示す。
Google Feed APIのみを利用する場合
<html><head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); var rssFeedUrl = "http://weather.livedoor.com/forecast/rss/34/90.xml"; function initialize() { var feed = new google.feeds.Feed(rssFeedUrl); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); var html = ""; for (var i = 0; i < result.feed.entries.length; i++) { html += "<li>" + result.feed.entries[i].title; } container.innerHTML = html; } }); } window.onload = initialize; </script> </head> <body><div id="feed"></div></body> </html>
jQueryとの合わせ技
<html><head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> google.load("feeds", "1"); var rssFeedUrl = "http://weather.livedoor.com/forecast/rss/34/90.xml"; // gFeed plugin : via http://yas-hummingbird.blogspot.com/2009/05/jquery-google-ajax-feed-api.html $.gFeed = function(url, options, callback){ var opt = $.extend({q: url, v: '1.0', num: 10}, options); if (!opt.q) return false; $.getJSON('http://ajax.googleapis.com/ajax/services/feed/load?callback=?', opt, function(data){ if (data) callback.call(this, data.responseData.feed); } ); } $(function() { $.gFeed(rssFeedUrl, {}, function(feed){ $(feed.entries).each(function() { $("#feed").append("<li>"+this.title); }); } ); }); </script> </head> <body><div id="feed"></div></body> </html>