このエントリーをはてなブックマークに追加

Memo

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

2014/07/24
Memo

RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれ

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

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

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

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = new Array(		//feedのURL
	"http://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を読み込む部分を関数化し、読み込むファイルが増えたらその分読み込んで出力を繰り返す、という感じです。
スクリプトを短くしたりしたい場合に使えると思います。

サンプル1

/* 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
	["http://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をそれぞれ見比べてみてくださいね。

サンプルその1-2

/* 追記ここまで */

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

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

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = new Array(		//feedのURL
	"http://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

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

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

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

Category : MemoTags : , ,

関連記事

1 Response

  • saya より:

    いつもお世話になっております。
    こちらのjavascriptを参考に、外部のRSSを日付順に並び替え表示させていただいております。
    その中で一つ、日付順に表示しているはずなのに更新ボタンを押してしまうと、日付の並びがバラバラになってしまうのです。
    また、更新ボタンを押し続けると表示件数を設定してるにもかかわらず増減してしまいます。(8件表示にしているにもかかわらず、更新してしまうと3件表示になるのです)

    こちらに提示されているサンプルの方でも試させていただいたのですが、似たような現象が起こりました。
    もしなにか原因等わかりましたら、ご教授頂けますと幸いです。
    よろしくお願いいたします。

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく