Google Feed APIを使って複数RSSフィードを表示する【カスタマイズ版】

Publish:

Category:JavaScript

Tag:

  • Hatena Bookmark:
  • Twitter:

Google Feed APIのfeedControlの表示だと満足できないことがあって、表示の位置やマークアップを変更したい時の記述…自分コピペ用。

ページ内の見出し一覧

複数のRSSフィードを読み込む

RSSフィードに記載されているサイト名をそのまま表記に使用。更新日は二桁表記に。
以下は更新日とタイトルをリスト化したもの。
他の要素はGoogle Feed API Developer’s Guide (Result objects)を参考に。
関数の第二引数は配列なので、下記のように記述することで複数のRSSフィードを取得することができる。

JavaScript

var getRssFeed = function (_id, _urls, _length) {
	if(!_id || !_urls || (!(_urls instanceof Array)))	return;
	//変数
	var entriesArray = new Array();
	var complete = 0;
	//読み込み
	var init = function () { for (var e = 0; e < _urls.length; e++) getFeed(_urls[e], e)};
	
	function getFeed(_url, _num) {
		var feed = new google.feeds.Feed(_url);
		if(_length)	feed.setNumEntries(_length);
		feed.load(function(result) {
			if (!result.error) {
				html = '<h2>' + result.feed.title + '</h2>';
				html += '<ul>';
				for (var i = 0; i < result.feed.entries.length; i++) {
					var entry = result.feed.entries[i];
					var pdate = new Date(entry.publishedDate);
					var Y = pdate.getFullYear();
					var m = pdate.getMonth() + 1;
					m = (m &lt; 10)? '0' + m:m;//月数字を2桁に
					var d = pdate.getDate();
					d = (d &lt; 10)? '0' + d:d;//日数字を2桁に
					var date = Y + '年' + m + '月' + d + '日';
					html += '<li>'+ date +' <a href="' + entry.link + '" target="_blank">' + entry.title + '</a></li>';
				}
				
				html += '</ul>';
				entriesArray[_num] = html;
				complete++;
				if(complete == _urls.length){
					echo();
				}
			}
		});
	};
	//出力
	var echo = function () {
		var container = document.getElementById(_id);
		for (var e = 0; e < _urls.length; e++) 	container.innerHTML += entriesArray[e];
	};
	
	google.setOnLoadCallback(init);
};
getRssFeed('表示エレメントのID', [
	'1つ目のRSSフィードのURI',
	'2つ目のRSSフィードのURI'
], 取得エントリー数);

関数の実行方法

getRssFeed('表示エレメントのID', ['RSSフィードのURI'], 取得エントリー数);
表示エレメントのID[文字列]
RSSフィード取得結果を表示するエレメントのIDの名前を入力(必須)。
RSSフィードのURI[配列]
取得したいRSSフィードのURIを入力(必須)。
取得エントリー数[数字]
省略可
取得したいRSSフィードのエントリー数を入力。

デモを確認する

デモを別ウィンドウで確認する

ページ内の複数の場所に設置する

関数オブジェクトになっているので、1個1個オブジェクト化してあげる。

実行方法

var feed1 = new getRssFeed("feed1", ['http://indigonote.com/feed/']);
var feed2 = new getRssFeed("feed2", ['http://indigonote.com/feed/'], 10);

デモを確認する

デモを別ウィンドウで確認する

指定日数前までに更新されたエントリーにnewマークをつける

newマークを付けたいと言われた事があったので、以下を追加してnewマークをつけた。

JavaScript

判定用に現在の時間とnewマークをつける期間の時間を算出する。

var pastDay = 15;//何日数前までnewマークをつけるか指定
var now = (new Date()).getTime();//現在の時間
var pastTime = pastDay * 24 * 60 * 60 * 1000;//newマークをつける期間の時間

出力するエントリーの時間と比較して、指定日内の更新であればnewマークをつける。

var entryTime = new Date(entry.publishedDate).getTime();//エントリーの時間
//指定日数以内の場合
if(now >= entryTime && now <= (entryTime + pastTime)){
	//newマークの追加
	html += '<strong style="color:red">new!</strong>';
}

デモを別ウィンドウで確認する

Comment [6]

こちらのソースを拝見し、活用させていただきました。ありがとうございます。
「複数のRSSフィードを読み込む」をやってみました。
デモのように2つなり3つなり、きちんと表示はされているのですが、
ページをリロードするたびに、表示順が変わっています。
(デモページも、試してみたところ、表示順が変わります)
これを固定することは可能なものでしょうか?

とっても困っているわけではないのですけれども、できれば方法を知りたいと思ってご連絡しました。

SaYaKa

>SaYaKaさん
そうですね、予想通りの結果にならないと気になりますよね。
RSSフィードの読み込んだ順番に出力する作りだったのを
配列の順番に表示していくよう変更しておきました!

indigo

返信遅くなってしまいました。
すばらしいですね! 技術的なことはわからずに人に頼るしかない私ですので、
このように対応してくださると大変感激です!
自分のサイトも修正しました。ありがとうございました。

SaYaKa

素晴らしいプログラムをありがとうございます。
RSS複数表示でようやく理想のものに出会えました!

そこで早速導入させていただいたのですが、
他のブラウザでは問題なかったのですが、
何故かIE ver8.0では表示されないという現象が起きました。
ちなみに、javascriptはonにしてあります。

環境によって動作しない等の現象が起きるものなのでしょうか?
お時間のある時で結構ですので、ご教示いただければ幸いです。

よろしくお願いいたします。

Toyo

>Toyoさん
自分のIE8だと動いているのですが、オリジナルサイトへJS導入後のことでしょうか?
もし、導入後にエラーが出ている場合は導入の仕方にもよりけりなので何とも言えません…。
ですが、IE8からJavaScriptのデバッガーがブラウザに追加されていますので、一度そちらでエラーの原因を調べてみてくださいっ。

indigo

indigoさん、早速ありがとうございます。

オリジナルサイトへJS導入後ですが、
JavaScriptのデバッガーでチェックしてみます!

ありがとうございました。

Toyo

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top