TumblrのRSSを取得してみる

TumblrのRSSを取得してみます。
クロスドメインになるので、以前紹介したphpを使った方法を使用します。

サンプルコード

HTML

<div id="sample"></div>

JavaScript

// 日付の変換
var weeks = ['日', '月', '火', '水', '木', '金', '土'];
function dateFormat(date) {
	var dateStr = new Date(date);
	var year = dateStr.getFullYear();
	var month = dateStr.getMonth() + 1;
	var day = dateStr.getDate();
	var week = dateStr.getDay();
	var hour = dateStr.getHours();
	var minute = dateStr.getMinutes();
	var second = dateStr.getSeconds();
	return year + '/' + month + '/' + day + '(' + weeks[week] + ') ' + hour + ':' + minute + ':' + second;
}

$(function() {
	$.ajax({
		url: 'get.php',
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = $('item', data).length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += dateFormat(thisItem.children('pubDate').text());
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// 本文の挿入
				insert += '<div class="description">';
				insert += thisItem.children('description').text();
				insert += '</div>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				// カテゴリーの挿入
				insert += '<p class="category">' + thisItem.children('category').text() + '</p>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
			// titleとdescriptionで同じテキストが表示されるので、description内のテキスト削除。
			$('#sample .description p').remove();
		}
	});
});

TumblrのRSSを取得してみるデモページ