Google Feed APIを使用すればJavascriptでRSSの情報を読むことが可能です。
これで自作のRSSリーダが簡単に出来ますね。

Feedの構成はこのようになっています。
Feed
├エントリ
├エントリ
├エントリ
└エントリ

Feedの情報

Feedの基本情報を取得するスクリプト

var feed = new google.feeds.Feed("http://scrap.php.xdomain.jp/feed/");
feed.load(function (result){
	if (!result.error){
		// Feed タイトル
		var title = result.feed.title;
		// Feed リンク
		var link = result.feed.link;
		// Feed 説明
		var description = result.feed.description;
		// Feed 作成者
		var author = result.feed.author;
	}
});

上記のスクリプトで、Feedのタイトル、リンク、説明、作成者が取得できます。

エントリ情報の取得

Feed下部のエントリ情報を取得するスクリプト

var feed = new google.feeds.Feed("http://scrap.php.xdomain.jp/feed/");
feed.load(function (result){
	if (!result.error){
		for (var i = 0; i < result.feed.entries.length; i++) {
			var entry = result.feed.entries[i];
			// エントリ タイトル
			var title = entry.title;
			// エントリ リンク
			var link = entry.link;
			// エントリ 本文
			var content = entry.content;
			// エントリ 概要
			var contentSnippet = entry.contentSnippet;
			// エントリ 日付
			var publishedDate = entry.publishedDate;

			// エントリ カテゴリ
			for (var j = 0; j < entry.categories.length; j++) {
					var categorie = entry.categories[j];
			}
		}
	}
});

上記のスクリプトでFeed下部のエントリのタイトルやリンクの取得が出来ます。

サンプル

Feedとエントリの情報を出力する

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");

function initialize() {
	var feedurl = "http://scrap.php.xdomain.jp/feed/";	// FeedのURL
	var feed = new google.feeds.Feed(feedurl);
	feed.setNumEntries(3);					//表示させる件数
	feed.load(function (result){

		if (result.error){
			alert(result.error.code + ":" + result.error.message);
			return;
		}

		htmlstr = "";
		htmlstr += '<h1><a href="' + result.feed.link + '">' + result.feed.title + '</a></h1>';
		htmlstr += '<p>説明 :' + result.feed.description + '</p>';
		htmlstr += '<p>作成者 :' + result.feed.author + '</p>';

		for (var i = 0; i < result.feed.entries.length; i++) {
			var entry = result.feed.entries[i];

			htmlstr += '<h2><a href="' + entry.link + '">' + entry.title + '</a></h2>';
			htmlstr += '<p>' + entry.contentSnippet + '</p>';
			htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
			htmlstr += '<p>カテゴリ :';
			for (var j = 0; j < entry.categories.length; j++) {
				htmlstr += '[' + entry.categories[j] + ']';
			}
			htmlstr += '</p>';
		}

			document.getElementById("feed").innerHTML = htmlstr;
	});
}
google.setOnLoadCallback(initialize);
</script>
Feed表示
<hr />
<div id="feed"></div>
<hr />

Feed表示

---

---

エントリ情報のみを出力

エントリをアンテナ風に表示

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");

function initialize() {
	var feedurl = "http://scrap.php.xdomain.jp/feed/";	// FeedのURL
	var feed = new google.feeds.Feed(feedurl);
	feed.setNumEntries(10);					//表示させる件数
	feed.load(function (result){

		if (result.error){
			alert(result.error.code + ":" + result.error.message);
			return;
		}

		htmlstr = "";
		for (var i = 0; i < result.feed.entries.length; i++) {
			var entry = result.feed.entries[i];

			htmlstr += '<p><a href="' + entry.link + '" title="' + entry.title + '">' + entry.title + '</a></p>';
		}

			document.getElementById("entry").innerHTML = htmlstr;
	});
}
google.setOnLoadCallback(initialize);
</script>
<style>
#entry{
	white-space: nowrap;
	width: 300px;
	height: 105px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid;
}
</style>
新着記事の表示<br />
<div id="entry"></div>

新着記事の表示

自分専用のRSSリーダを簡単に作れそうですね。
あと、自分のサイトの新着記事の一覧も簡単に表示出来ます。


«前の記事：Google Chart APIで「QRコード」を生成する方法顧客が本当に必要だったもの：次の記事»