外部からRSSを複数取得して新着順に並べる

2011年05月22日(日)

Category: IT関係, こだわり, プライベート

完全にマニアックネタですみません。私のための記録用に記事にさせて頂きます。

外部からRSSを複数取得して新着順に並べるには、「Google AJAX Feed API」を使います。GoogleからAPIキーを取得してキーを一番上に入力します。そして取得したいRSSフィードのURLを入力します。
基本的にはこれだけです。それにしてもなんと多くのサンプルがあることか。しかも人が作っているので記述方法はさまざま。理解するのに大変でした。といっても完全に理解できていない。。。

私がアレンジしたのは、後で記事ごとに対応する画像を表示させるために、0から順番に番号も付けておくこと。投稿1日以内の記事には、新着記事と表示するようにしたことです。
この画像を表示させるために取得する関数などコードを書くために、4時間も試行錯誤しました。

後は、整形するためにCSSを書くだけです(ここまだやってません)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したもの入力"></script>
<script type="text/javascript">
<!--
//順番に0から記入
var blogerlist = {
	'http://www.kinkodo.jp/blog/atom.xml':0,
	'http://rss.exblog.jp/rss/exblog/moroeya/atom.xml':1,
	'http://blog.hotta-megane.co.jp/feed':2,
	'http://rss.exblog.jp/rss/exblog/eightbl/atom.xml':3,
	'http://rss.exblog.jp/rss/exblog/nurimono/atom.xml':4,
	'http://rss.exblog.jp/rss/exblog/carlo/atom.xml':5,
};
var RSSurl = new Array();
for( var i in blogerlist){
	RSSurl.push({url:i,val:blogerlist[i]});
}
var len = RSSurl.length;
 
function rssFeeds(){
	this.rssArray = new Array();
}
 
function strFeeds(fe,date,_v){
	this.feedStructure = fe;
	this.mDate = date;
	this.infoVal = _v;
}
var RssData = new rssFeeds();
 
google.load("feeds", "1");
 
function sortFeed(arr,key){
	arr.sort( function(b1, b2){ return b1[key] < b2[key] ? 1 : -1; } );
}
 
function dateToString(date){
	//var wArray = new Array("日","月","火","水","木","金","土");
	//var week = wArray[date.getDay()];
	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
	var hour = date.getHours();
	var minutes = date.getMinutes();
	var seconds = date.getSeconds();
 
	if(month < 10){month = "0" + month;}
	if(day < 10){day = "0" + day;}
	if(hour < 10){hour = "0" + hour;}
	if(minutes < 10){minutes = "0" + minutes;}
	if(seconds < 10){seconds = "0" + seconds;}
 
	var dateStr = "【" + year + "/" + month + "/" + day + " " + hour + ":" + minutes + "】";
 
	return dateStr;
}
 
function displayFeed(rFeed,n){
 
	var structure = 0;
	var val = 0;
	var title ="";
	var link = "";
	var description ="";
	var author ="";
	var classArray = new Array("kinkodo.jpg","moroe.gif","hotta.jpg","hatta.jpg","ishida.jpg","campagne.jpg");
	var htmlstr = "";
 
if(rFeed.rssArray[n]){
	if(rFeed.rssArray[n].feedStructure){
		structure = rFeed.rssArray[n].feedStructure;
	}
	if(rFeed.rssArray[n].infoVal){
		val = rFeed.rssArray[n].infoVal;
	}else if(rFeed.rssArray[n].infoVal == 0){
		val = 0;
	}
}
 
if(structure.feed){
	title = structure.feed.title;
	link = structure.feed.link;
	description = structure.feed.description;
	author = structure.feed.author;
 
	htmlstr += '<ul><img src="http://blog.hotta-megane.co.jp/">';
 
	for (var k = 0, strLength = structure.feed.entries.length; k < strLength; k++) {
		htmlstr += '<li>';
		htmlstr += '<p><a href="http://blog.hotta-megane.co.jp" target="_blank">' + title + '</a></p>';
		htmlstr += '<p>' + description + '</p>';
 
		var entry = structure.feed.entries[k];
		var entryTitle = entry.title;
		var entryLink = entry.link;
		//	var entryDesc = entry.content;
		var entrySnippet = entry.contentSnippet;
		//	var entryCategory = entry.categories;
		var publishedDate = entry.publishedDate;
		var pDate = new Date(publishedDate);
 
		var limit = 1; //1日以内の記事ならNEWマーク
		var entdate = new Date(entry.publishedDate).getTime();
		var newmark = '';
		var now = (new Date()).getTime();
		if (now >= entdate && limit >= ((now - entdate)/86400000)) {
		newmark = '<span style="color:red;">新着記事!<\/span>'; //「NEWマーク」のタグ
		}
 
		htmlstr += dateToString(pDate) + newmark + '<dl><dt><a href="http://blog.hotta-megane.co.jp" target="_blank">' + entryTitle + '</a></dt><dd>' + entrySnippet + '…</dd></dl>';
		htmlstr += '</li>';
	}
	htmlstr += '</ul>';
}
return htmlstr;
}
 
function setRSS(num, iVal){
	var sortDate;
	var container = document.getElementById("feed");
	var outstr = "";
 
	return function(result){
		if (!result.error) {
			sortDate = (new Date(result.feed.entries[0].publishedDate)).getTime();
			RssData.rssArray.push( new strFeeds(result,sortDate,iVal));	
			}else{
			alert(result.error.code + ":" + result.error.message);
			}
			if(num == len - 1){	//最後のフィード追加が終ったら出力する
				sortFeed(RssData.rssArray,'mDate');	
				for(var j=0; j < len ; j++){
					outstr += displayFeed(RssData,j);
				}
				container.innerHTML = outstr;
			}
	}
}
 
function initialize() {
	for(var i=0; i < len; i++){
		var feed = new google.feeds.Feed(RSSurl[i].url);
		feed.setNumEntries(1); //サイトから取得する記事数
		feed.load(setRSS(i,RSSurl[i].val));
	}
}
google.setOnLoadCallback(initialize);
//-->
</script>
<div style="width:600px; overflow:auto;" id="feed">Loading...</div>

どのように表示されるかは、まだテスト中のサイトで作っている段階なので、お見せできませんが、できたらサンプルを載せたいと思います。

外部からRSSを複数取得して新着順に並べる」への1件のフィードバック

  1. じゅん

    まさに理想の形ですね。
    こういうの探してたので重宝します!!
    これをさらに全体での日付順ソートが出来れば最高なんですが。
    理想としては全体で15件の表示、全体での新着順に並べば・・・

    試行錯誤しましたが、全くわからず・・・
    出来れば教えて頂ければとおもいます。
    よろしくお願いします。
    またCSSでの整形サンプルなどもあれば嬉しいです

コメントを残す

メールアドレスが公開されることはありません。