Google AJAX Feed APIを使ってサイドバーにブログロール(相互RSS)を作る : Web Memo. SE

Google AJAX Feed APIを使ってサイドバーにブログロール(相互RSS)を作る

Web・Blog
Webサービス
2009年12月04日 04時42分

最近話題になることはほとんどないんだけれど、BlogPeopleというポータルサイトがあってランキングや検索サービスなんかを提供している。あまり便利に感じたことはないのでほとんど使っていないものの、自分で登録したブログやサイトの更新情報受信機能と、リンク集（いわゆる「柱リンク」）機能を同時に兼ねた「リンクリスト」というサービスだけはずっと使っていた。全自動で更新し続けるため、あっても邪魔にならなかったというのも大きい。（Blog Peopleのリンクリストの例。）

ところが先日、かなり久しぶりにBlogPeopleにログインしてみたところ、被リンクリストがスパムや小規模商用サイトで埋まっていたのを発見。「片っ端から登録してリンク返しを狙おう！」みたいなスパムまがいのグレーなテクニックが横行してるのかもしれない。別にこれだけだと大した問題ではないけど（無視すれば何の実害もない）、それ以外にも前から以下のような気になる点があった。

わざわざサービスにログインしないとリストをメンテできないので、不便。
サイトを登録してもそこがBlogPeopleにPINGを飛ばしていないと、更新情報は受信できない。
BlogPeople自体が重いことがある。（結果としてページの読み込み速度が遅くなる。）

まあせっかくの機会だということで、BlogPeopleのリンクリスト機能を使うのをやめて、今個人的にいじっているGoogle AJAX Feed APIで代用できないかと考えた。Google AJAX Feed APIはRSSフィードを読み込んで簡単にWebページに表示できるサービスで、上手く使えばかなり色々なことがJavaScriptだけで実現できるのが特徴。詳細は以下のサイト・ページを読めばわかるはず。

ひとつのフィードを読み込んで表示させるなら（Web上に参考になる解説やサンプルも多いので）そんなに難しくないんだけど、リンクリストを作るとなると複数のフィードを読み込めないといけない。というわけで検索してみると、ありがたいことにほぼそのまま使えそうなスクリプトが公開されていた。

Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード - くらげだらけ

詳しい使い方は元のサイトを見てもらうとして、自分のサイトでは（サイドバーに置いても違和感がないように）HTMLの出力部分をカスタマイズをして使うことに。以下が実際に動作しているデモページ。デモ用に表示件数を増やしただけで、現時点でサイドバーに設置してあるものとまったく同じもの。（将来的にはもう少し手が加わるかもしれない。）

Google Ajax Feed APIをBlog Peopleの代わりに使うデモページ

コードは例えば以下のような形になる。

<script type="text/javascript">
<!-- 
google.load("feeds", "1");
var entryArray = new Array();
var entryNum = 0;

function initialize() {
	feedAdd("http://feeds.feedburner.com/GoogleJapanBlog", 0);
	feedAdd("http://blog.fc2.com/info/?xml", 0);
	feedAdd("http://blog.livedoor.jp/staff/index.rdf", 1);
}

//取得するフィードの追加（rssUrl：フィードのURL , boolNum：追加するフィードURLが最後の場合「1」を入れる）
function feedAdd(rssUrl, boolNum) {
	var feed = new google.feeds.Feed(rssUrl);//フィードの取得
	feed.setNumEntries(4);//ブログ1つあたりの取得するフィード数
	feed.load(function(result) {
		if (!result.error) {
			for (var i = 0; i < result.feed.entries.length; i++) {
				entryArray[entryNum] = result.feed.entries[i];
				var date = new Date(result.feed.entries[i].publishedDate);
				entryArray[entryNum].sortDate = ( date.getFullYear()*10000 ) + ( (date.getMonth() + 1)*100 ) + date.getDate();//ソート用（日付）を連想配列に代入
				entryArray[entryNum].blogName = result.feed.title;//ブログ名を連想配列に代入
				entryNum+=1;
			}
		}
		if(boolNum==1){
			feedOutput("feed", 20);//フィードの出力
		}
	});
}

//フィードの出力（feedId：出力するオブジェクトのID , listNum：出力するリスト数。「0」の場合全て）
function feedOutput(feedId, listNum){
	var useFeed = "";
	var container = document.getElementById(feedId);//表示部分を選択
	entryArray = asort(entryArray, "sortDate");//日付でソート
	if(listNum==0){
		listNum = entryNum;
	}
	for (var i = 0; i < listNum; i++) {
		var entry = entryArray[i];
		var date = new Date(entry.publishedDate);//日付の表示変更
		useFeed += '<li style="list-style-image:url(http://favicon.st-hatena.com/?url=' + encodeURIComponent(entry.link) + ');"><a href="' + entry.link + '" target="_blank" rel="nofollow" title="' + entry.blogName +' - ' + entry.title + '">' + entry.title + '</a> <span class="linkListDate">' + date.getFullYear() + '年' + (date.getMonth() + 1 ) + '月' + date.getDate() + '日</span></li>';//HTMLで書き出し
	}
	container.innerHTML = '<ul>' + useFeed + '</ul>';
}
function asort(myArray, key){
	//return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1; } );//昇順
	return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );//降順
}

google.setOnLoadCallback(initialize);

// -->
</script>

変更点は前に紹介したFavicon取得サービスでリンク先のFaviconを表示するようにしたのと、サイト（ブログ）名の表示場所をTitle要素に変更しただけ。あとはリストを表示したい場所に以下のような「feed」というIDの付いたDIVタグを書き込めば、設定したサイトのRSSを自動的に読み込んでGoogle AJAX Feed APIを利用したリンクリストが完成する。