201407/24 Memo

複数のRSSなどのxmlファイルを静的なHTMLに表示させる方法（2014.8.20追記）

RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれへ定期的に「複数の場合はどうしたらいいですか？」と質問をいただくので、記事にしておきます。
一応サンプルもつくったんですが、複数となるとちょっとコツがいりますね（そら質問がよくくるわけだ…）

１年以上前の記事です。情報が古くなっている可能性があります。
現在Google Feed APIが使えなくなっています。

複数のXMLファイルをまとめて読み込み、それぞれ表示する

１つの読み込み用関数で、複数のブログ記事をそれぞれ表示させる方法です。

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = new Array(		//feedのURL
	"https://memo.ark-under.net/feed",
	"http://book.ark-under.net/feed",
	"http://arca-works.com/feed"
);

var getNum = 10;	//feedの取得件数
var setNum = 10;	//表示件数
var setID = "feed";	//表示させる箇所のID
google.load("feeds", "1");
var html = '';

function initialize() {
	for(var k = 0; k < xmlUrl.length; k++){
		feedAdd(xmlUrl[k]);
	}
}

function feedAdd(rssUrl) {
	var feed = new google.feeds.Feed(rssUrl);
	feed.setNumEntries(getNum);	
	feed.load(function(result) {
        if (!result.error){
			var blogname = result.feed.title;
			html += '<li class="title">'+blogname+'</li>';
			if(getNum < setNum) enLength = getNum; else enLength = setNum;
			for (var i = 0; i < enLength; i++) {
				var entry = result.feed.entries[i];
				var title = entry.title;	//記事タイトル取得
				var link = entry.link;		//記事のリンクを取得
				//日付を取得し年月日を整形
				var publishedDate = entry.publishedDate;
				var pubDD = new Date(publishedDate);
				yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
				mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
				var pubDate = yy +'年'+ mm +'月'+ dd +'日';

				//表示する部分を整形
				html += '<li><a href="'+link+'">'+title+'</a>（'+pubDate+'）</li>';
			}
			//フィードの出力
			var container = document.getElementById(setID);
			container.innerHTML = html;
        }
    });
}
google.setOnLoadCallback(initialize);
</script>

feedを読み込む部分を関数化し、読み込むファイルが増えたらその分読み込んで出力を繰り返す、という感じです。
スクリプトを短くしたりしたい場合に使えると思います。

サンプル１

/* 2014.08.20 追記 */

それぞれ違うIDに表示させたい場合

それぞれ違うIDを付与して表示させたい場合、

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = [		//feedのURL, 表示させるID
	["https://memo.ark-under.net/feed","feed-memo"],
	["http://book.ark-under.net/feed","feed-book"],
	["http://arca-works.com/feed","feed-arca"]
];

var setNum = 10;	//表示件数
google.load("feeds", "1");

function initialize() {
	for(var k = 0; k < xmlUrl.length; k++){
		feedAdd(xmlUrl[k][0],xmlUrl[k][1]);
	}
}

function feedAdd(rssUrl, rssID) {
	var feed = new google.feeds.Feed(rssUrl);
	var html = '';
	feed.setNumEntries(setNum);
	feed.load(function(result) {
		if (!result.error){
			for (var i = 0; i < setNum; i++) {
				var entry = result.feed.entries[i];
				var title = entry.title;	//記事タイトル取得
				var link = entry.link;		//記事のリンクを取得
				//日付を取得し年月日を整形
				var publishedDate = entry.publishedDate;
				var pubDD = new Date(publishedDate);
				yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
				mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
				var pubDate = yy +'年'+ mm +'月'+ dd +'日';

				//表示する部分を整形
				html += '<li><a href="'+link+'">'+title+'</a>（'+pubDate+'）</li>';
			}
			//フィードの出力
			var container = document.getElementById(rssID);
			container.innerHTML = html;
		}
	});
}
google.setOnLoadCallback(initialize);
</script>

多次元連想配列でFeedとIDを指定し、それぞれ読み込んで出力、を繰り返す感じになります。
サンプルも作ったので、１と１-２をそれぞれ見比べてみてくださいね。

・サンプルその１-２

/* 追記ここまで */

複数のXMLファイルをまとめて日付順に表示する

よく質問されるのがこのパターンでした。
実際にサンプル作ってみると、意外とややこしかったです。

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = new Array(		//feedのURL
	"https://memo.ark-under.net/feed",
	"http://book.ark-under.net/feed",
	"http://arca-works.com/feed"
);
var getNum = 5;	//feedの取得件数
var setNum = 15;	//表示件数
var setID = "feed";	//表示させる箇所のID

google.load("feeds", "1");
var entryArray = new Array();
var entryNum = 0;

function initialize() {
	//var feed = new google.feeds.FeedControl();
	for(var k = 0; k < xmlUrl.length; k++){
		if(k == xmlUrl.length - 1) feedAdd(xmlUrl[k], 1); else feedAdd(xmlUrl[k], 0);
	}
}

function feedAdd(rssUrl, boolNum) {
	var feed = new google.feeds.Feed(rssUrl);
	feed.setNumEntries(getNum);	
	feed.load(function(result) {
        if (!result.error){
			for (var i = 0; i < result.feed.entries.length; i++) {
				entryArray.push(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(setID, setNum);//フィードの出力
			}
        }
    });
}
// 出力
function feedOutput(feedId, listNum){
	var useFeed = "";
	var container = document.getElementById(feedId);
	entryArray = asort(entryArray, "sortDate");//日付でソート
	if(listNum == 0 || listNum > entryNum) listNum = entryNum;
	for (var l = 0; l < listNum; l++) {
		var entry = entryArray[l];
		var title = entry.title;	//記事タイトル取得
		var link = entry.link;		//記事のリンクを取得
		//日付を取得し年月日を整形
		var publishedDate = entry.publishedDate;
		var pubDD = new Date(publishedDate);
		yy = pubDD.getYear();if (yy < 2000) { yy += 1900; } mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
		var pubDate = yy +'年'+ mm +'月'+ dd +'日';
		useFeed += '<li><a href="'+link+'">'+title+'</a> - '+entry.blogName+'（'+pubDate+'）</li>';
	}
		container.innerHTML = useFeed;
}
// ソート関数
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>

一度それぞれのXMLファイルのデータを取得し、日付順にソート → ソートしたデータを設定した数だけ表示、という感じです。
XMLファイルのデータを一度表記できるように展開してからだと上手くソートが出来ませんでした。
こちらの記事を参考に書いてます。
JavaScriptの多次元連想配列はむずかしいですね…（多次元連想配列自体がややこしい…）

サンプル２

サンプル２の方はそのままコピペして、上部のURLや出力箇所のID等に設定を変更すれば使えると思います。

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

なにか不具合等ありましたらご連絡ください。