Google Feed APIを使って複数RSSフィードをまとめて昇降順に表示する

Publish:

Category:JavaScript

Tag:

  • Hatena Bookmark:
  • Twitter:

とある案件で、各事業所が運営しているブログのそれぞれの更新状況を、まとめて降順に表示したいと要望があったのでその時の記述…自分コピペ用。

ページ内の見出し一覧

複数のRSSフィードをまとめて降順に表示

RSSフィードの取得最大値を自動で取得できないみたいなので手動で設定する必要がある。
ここちょっとモサイけど現状これで。

JavaScript(2011-08-27修正)

var getRssFeeds = function (_id, _urls, _maxLength) {
	if(!_id || !_urls || (!(_urls instanceof Array)))	return;
	var entryNum = 10;//各RSSの読み込みエントリー数
	var maxLength = (_maxLength)? 	_maxLength : 0 ;
	//総エントリー表示数(0はすべて表示)
	//変数定義
	var entriesArray = new Array();
	var complete = 0;
	
	//初期化
	var init = function () {
		for(var i=0 ; i < _urls.length ; i++){
			//RSS読み込み
			var feed = new google.feeds.Feed(_urls[i]);
			feed.setNumEntries(entryNum);
			feed.load(function(result) {
				if (!result.error) {
					for (var i = 0; i < result.feed.entries.length; i++) {
						var entry = result.feed.entries[i];
						entriesArray.push(entry);
						var pdate = new Date(entry.publishedDate);
						var arr = entriesArray[(entriesArray.length-1)];
						arr.sortDate = pdate.getTime();
						arr.siteTitle = result.feed.title;
					}
				}
				complete++;
				if(_urls.length == complete)	echo();
			});
		}
	};
	//表示
	var echo = function () {
		entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順ソート
		//this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順ソート
		var feedLength = (_maxLength)? _maxLength : entriesArray.length;
		var container = document.getElementById(_id);
		var html='<dl>';
		for (var i = 0; i < feedLength; i++) {
			var entry = entriesArray[i];
			var pdate = new Date(entry.publishedDate);
			var Y = pdate.getFullYear();
			var m = pdate.getMonth() + 1;
			m = (m < 10)? "0" + m:m;//月数字を2桁に
			var d = pdate.getDate();
			d = (d < 10)? "0" + d:d;//日数字を2桁に
			var date = Y + "年" + m + "月" + d + "日";
			
			html += '<dt>' + date + '</dt>';
			html += '<dd><a href="' + entry.link + '" target="_blank">' + entry.title + '</a>(' + entry.siteTitle + ')</dd>';
		}
		html += '</dl>';
		container.innerHTML += html;
	};
	
	google.setOnLoadCallback(init);
};

関数の実行方法

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

デモを確認する

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

指定日数前までに更新されたエントリーに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 >= entry.sortDate && now <= (entry.sortDate + pastTime)){
	//newマークの追加
	html += '<strong style="color:red">new!</strong>';
}

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

おまけ:サイトのアイコン(favicon.ico)を表示する

リンク先のFaviconを取得・表示できるWebサービス(API)とJavaScript・プラグインまとめ : web memo.Ver.2で詳しく調べられているのを読んで、非公式サービスみたいなので突然サービスが提供されなくなる恐れがあるけれど、実装してみた。

デモを確認する

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

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

RSSフィードを読み込む度に各RSSファイルへアクセスしにいくので、どちらかといえばこのJavaScriptを使わず各RSSファイルを一定期間キャッシュし、表示するようなPHPやサービスなんかを使用する事をおすすめします。

一応、関数オブジェクトにしているので、1個1個オブジェクト化してあげることで複数表示ができる。

実行方法

var feeds1 = new getRssFeeds("表示エレメントのID", [
	"RSSフィードのURL1",
	"RSSフィードのURL2"
], 表示フィード数);

var feeds2 = new getRssFeeds("表示エレメントのID", [
	"RSSフィードのURL1",
	"RSSフィードのURL2",
	"RSSフィードのURL3"
], 表示フィード数);

デモを確認する

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

Comment [9]

「複数のRSSフィードをまとめて降順に表示」を拝見し、使わせてもらったのですが、これを「ページ内の複数の場所に設置」するにはどうすればよいのでしょうか?

「ページ内の複数の場所に設置」を参考にして追加しただけではうまく表示できませんでした。

zeark

>zearkさん
「ページ内の複数の場所に設置」とは前のエントリの分でしょうか?
別スクリプトなので、本投稿分では複数表示は対応していません。

アフィブログでRSSを表示する場合は「画RSS」や「Blog Roll」等のサービスの方が簡単に設置やカスタマイズできると思いますよ。

indigo

それらのサービスが時々落ちるので自作しようと思ったのですが難しそうですね
おとなしくブログロールを使おうと思います。

zeark

>zearkさん
そうなんですか。
ブログロールなんかは「ピーク時もサクサク」って書いてあるのに…。
まあ、また時間できたときにでも複数設置改造します。

indigo

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

zeark

こんにちは。

「複数のRSSフィードをまとめて降順に表示」を使わせていただこうと思い、動作をテストしています。
求めている機能は「それぞれのフィードから●件取得し、表示するのは全体の中から最新の◎件」といったかんじです。

この場合は、4行目の
_maxLength : 0 ;
の0を表示したい件数(◎)に変更すればよいのでしょうか?

こちらでテストしたのですが、何をいれても取得分全てが表示されてしまいました。

もしかして、変更場所が間違っているんですかね…。

お手数ですが、ご教授願います。

radiorocks

こちらを拝見し、スマートフォン用に最適化して、公開しています。ありがとうございました。セレクトメニューから、RSSを絞りこんで表示したいのですが、なかなかうまくいきません。お暇な時に、上記のソースを改造して知らせていただけるとありがたいです。

riverforest

はじめましてこんにちは
まさにこの表示方法を探していたところです。
とても参考になりました。ありがとうございます!

starry_sky

やっと見つけました。理想の形。
記事のように設置することすら難しかったくらい初心者ですが、
無事にnewマーク、新着順、複数のブログの取得などなんとかうまく動作しました。
あと、こちらにアメブロ特有のPR文を削除するため、試行錯誤しましたが全くカスりもせず・・・。
さらに本文の抜粋表示とfavicon表示ではなく、それぞれのブログに対応した任意のアイコンをつけたいのですが。。。なんとかなりますでしょうか?
どうかよろしくお願い致します

shou

Post Comment

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

Return to page top