RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれへ定期的に「複数の場合はどうしたらいいですか?」と質問をいただくので、記事にしておきます。
一応サンプルもつくったんですが、複数となるとちょっとコツがいりますね(そら質問がよくくるわけだ…)
1年以上前の記事です。情報が古くなっている可能性があります。
現在Google Feed APIが使えなくなっています。
複数のXMLファイルをまとめて読み込み、それぞれ表示する
1つの読み込み用関数で、複数のブログ記事をそれぞれ表示させる方法です。
<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を指定し、それぞれ読み込んで出力、を繰り返す感じになります。
サンプルも作ったので、1と1-2をそれぞれ見比べてみてくださいね。
/* 追記ここまで */
複数の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の多次元連想配列はむずかしいですね…(多次元連想配列自体がややこしい…)
サンプル2の方はそのままコピペして、上部のURLや出力箇所のID等に設定を変更すれば使えると思います。
参考)
・Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード – くらげだらけ
なにか不具合等ありましたらご連絡ください。