RSS をだらだら表示してみる

RSSを自動で定期的に取得し、画面に表示します。

ソース

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//Google AJAX Feed API 利用してRSSを変換
google.load("feeds", "1");
//取得先RSSリンク一覧
function initialize() {
	var feedurl = [
	"http://www3.nhk.or.jp/rss/news/cat1.xml"
	,"http://www3.nhk.or.jp/rss/news/cat3.xml"
	,"http://www3.nhk.or.jp/rss/news/cat4.xml"
	,"http://www3.nhk.or.jp/rss/news/cat5.xml"
	,"http://www3.nhk.or.jp/rss/news/cat6.xml"
	,"http://fullrss.net/a/http/rss.asahi.com/rss/asahi/newsheadlines.rdf"
	,"http://fullrss.net/a/http/rss.dailynews.yahoo.co.jp/fc/rss.xml"
	];


	//ニュース取得
	var index=0;
	var getNews = function(){
		var def = $.Deferred();
		var url = feedurl[index++];
		if(index>feedurl.length-1) index=0;
		$("#url").text(url);
		var feed = new google.feeds.Feed(url);
		feed.setNumEntries(10);//取得データ10件に制限
		feed.load(function (result){
			$('#feed').fadeOut(function(){
				$('#feed').children().remove();
				if (!result.error){
					for (var i = 0; i < result.feed.entries.length; i++) {

		var entry = result.feed.entries[i];
		var title = '<li><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></li>';
		var conte = '<li>' + entry.content + '</li>';
		var dates = '<li>' + entry.publishedDate + '</li>';
		$('#feed').append('<li class="post"><ul>' + title + conte + dates + '</ul></li>');

					}
					$('#feed').fadeIn(function(){def.resolve();});
				}else{
					$('#feed').fadeIn(function(){
						$('#feed').append('<li class="post">' + result.error.code+":"+result.error.message + '</li>');
						def.reject();
					});
				}
			});

		});
		return def.promise();
	}
	
	//ループ実行	
	var loop = function(){
		var wait = function(){
			var def2 = $.Deferred();
			setTimeout(function(){def2.resolve();},5*1000);
			return def2.promise();
		}
		getNews().then(wait).then(loop);
	}
	loop();
	
	
}
google.setOnLoadCallback(initialize);
</script>

</head>
<body>
<h3>Demo</h3>
<p id="url"></p>
<ul id="feed">
</ul>



Demo