トップ > jQuery > jQueryではてなダイアリーのRSSを読み込んで表示させる

jQueryではてなダイアリーのRSSを読み込んで表示させる

jQuery

こんなの(↓)を作ってみた。

ソースはこんな(↓)感じ。IE7だと動いたけど、Firefoxではエラーが出て動かなかった。セキュリティの問題？まだ保留。

<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
function Item(item) {
	if(item) this.parse(item);
}
Item.prototype = {
	title: '',
	link: '',
	description: '',
	content: '',
	parse: function(item) {
		var i = $(item);
		this.title = i.find('title').text();
		this.link = i.find('link').text();
		this.description = i.find('description').text();
		this.content = i.find('[nodeName="content:encoded"]').text();
	}
}
$(document).ready(function(){
	$.get(
		// ここを変える
		'http://d.hatena.ne.jp/hiro_nemu/rss',
		{},
		function(data) {
			//alert($(data).find('title').length);
			$(data).find('title').each(function(i, title) {
				//alert($(title).text());
				$('#title_list').append("<li>" + $(title).text() + "</li>");
			});
			$(data).find('item').each(function(i, item) {
				//alert($(item).find('title'));
				var pItem = new Item(item);
				$('#all_list').append('<p>');
				$('#all_list').append('<div class="title">' + pItem.title + "</div>");
				$('#all_list').append("----- " + pItem.description + "<br />");
				$('#all_list').append('<div class="next"><a href="#">つづきを読む</a></div><div class="content" style="display:none">' + pItem.content + '</div>');
				$('#all_list').append('</p>');
			});
			$(".next").click(function() {
				$(this).next().slideToggle('slow');
			});
		}
	);
});
  </script>
<style type="text/css">
.title {
  background-color: #ffccff;
}
.content {
  background-color: #ccccff;
}
</style>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>

<ul id="title_list">
</ul>
<div id="all_list">

</div>
</body>
</html>

下の部分はjFeedを参考にしてやってみた。ただ、クラスっぽいItemというやつを作ってparseでフィードのの中身をひとつづつ変数に入れていくという単純なもの。

// Itemクラスの定義
// コンストラクタとして使われる。
function Item(item) {
	// prototypeで宣言したparseメソッドを読み込む
	if(item) this.parse(item);
}
Item.prototype = {
	title: '',
	link: '',
	description: '',
	content: '',
	parse: function(item) {
		var i = $(item);
		this.title = i.find('title').text();
		this.link = i.find('link').text();
		this.description = i.find('description').text();
		this.content = i.find('[nodeName="content:encoded"]').text();
	}
}

ちょいはまったのが、フィードのcontent:encodedっていう要素の値をとるときは、↓こうしないとだめっぽい。

this.content = i.find('[nodeName="content:encoded"]').text();

で、したの部分はclass="next"となっている部分をクリックしたら、その次の要素をトグルするようにしている。妙にピクピク動いてあれだけど。まぁ、最初はこんなところで。。。

$(".next").click(function() {
	$(this).next().slideToggle('slow');
});

ほんとは、Google Calendarの一覧を読み込んでとかやりたかったんだけど、Atomの解析がうまく出来ずに挫折。とりあえず、出来そうなやつからやってくか。