javascriptのみでクロスドメインのRSSを取得する方法

program

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>