Google Feed API を使ってはてブの RSS を表示してみる

今更はてブと RSS かよという感じもするがふと思い立ったのでよくブログのサイドバーに表示してあるはてブの新着エントリ一覧を実装してみた。先に言っておくけど普通にやるならはてなが提供してるブログパーツつけるほうが良いです。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//google.load("jquery", "1.7");
function initialize() {
	var feed = new google.feeds.Feed('http://b.hatena.ne.jp/entrylist?sort=hot&threshold=3&url=http%3A%2F%2Floumo.jp%2F&mode=rss');
	feed.setNumEntries(5);
	feed.load(function(result) {
		if (!result.error) {
		for (var i = 0; i < result.feed.entries.length; i++) {
		var entry = result.feed.entries[i];
		jQuery('#feed-20130815').append(
		jQuery('<div><a href="' + entry.link + '">' + entry.title + '</a>'
			+ '<a href="http://b.hatena.ne.jp/entry/' + entry.link + '">'
			+ '<img src="https://b.hatena.ne.jp/entry/image/'+entry.link+'">'
			+ '</a>'
			+ '</div>')
		);
		}
		}
	});
}
google.setOnLoadCallback(initialize);
</script>
<div id="feed-20130815"></div>

はてブの新着エントリなどは RSS で取得できるのだけど、通常他サイトのRSSはクロスドメイン制約にひっかかる為、JavaScriptで取得する事ができない。

それを解決するのが Google Feed API. この API を使用する事で他ドメインにある RSS を JSONP 形式で取得する事ができる。

注意点としてはサイト独自のフィールドを取得できない。はてブの場合は RSS に各エントリにいくつブクマつけられているかという情報が入っているのだけど、Google Feed API を経由するとそのデータは消えてしまう。

はてブ数を取得するのにはこれとは別にエントリの情報を取得する API があるのだけど面倒くさいから URL 渡すだけでお手軽に使える画像で表示している。

Google Feed API の使い方

基本的には下にあるはてブの新着を読み込むコードを見ればすぐわかると思う。

// Google Feed API を読み込む
google.load("feeds", "1");
// 読み込む Feed を指定
var feed = new google.feeds.Feed("http://example.com/feed/");
// feed を読み込んで console.log に表示
feed.load(function(result) { console.log(result); });

オプションとか

feed を読み込む時に使えそうなオプション類。そんなに種類は多くないですね。

// 読み込むエントリの数を指定
feed.setNumEntries(num);
// フォーマットの指定 XMLとして使える。
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
// 取得した feed に含まれない分の昔のエントリも取得
feed.includeHistoricalEntries();

はてブの新着を読み込むコード

このエントリーの上のほうにある僕のブログの新着はてブを表示するコードです。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jQuery", "1.7");
google.load("feeds", "1");
function initialize() {
	var feed = new google.feeds.Feed('http://b.hatena.ne.jp/entrylist?sort=hot&threshold=3&url=http%3A%2F%2Floumo.jp%2F&mode=rss');
	feed.setNumEntries(5);
	feed.load(function(result) {
		if (!result.error) {
			for (var i = 0; i < result.feed.entries.length; i++) {
				var entry = result.feed.entries[i];
				$('#feed-20130816').append(
					$('<div><a href="' + entry.link + '">' + entry.title + '</a>'
						+ '<a href="http://b.hatena.ne.jp/entry/' + entry.link + '">'
						+ '<img src="http://b.hatena.ne.jp/entry/image/'+entry.link+'">'
						+ '</a>'
						+ '</div>')
					);
				}
			}
		});
}
google.setOnLoadCallback(initialize);
</script>
<div id="feed-20130816"></div>