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 で複数のブログからフィードを取得して、しかも日付順に並び替えるコード – くらげだらけ
なにか不具合等ありましたらご連絡ください。