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 で複数のブログからフィードを取得して、しかも日付順に並び替えるコード – くらげだらけ
なにか不具合等ありましたらご連絡ください。
いつもお世話になっております。
こちらのjavascriptを参考に、外部のRSSを日付順に並び替え表示させていただいております。
その中で一つ、日付順に表示しているはずなのに更新ボタンを押してしまうと、日付の並びがバラバラになってしまうのです。
また、更新ボタンを押し続けると表示件数を設定してるにもかかわらず増減してしまいます。（８件表示にしているにもかかわらず、更新してしまうと３件表示になるのです）
こちらに提示されているサンプルの方でも試させていただいたのですが、似たような現象が起こりました。
もしなにか原因等わかりましたら、ご教授頂けますと幸いです。
よろしくお願いいたします。