del.icio.us の api 使ってみた。

ryomatsu

16年前

del.icio.us使ってみたらすごく便利だったので、さらに活用しようとちょろっと PHP とJavaScript で書いてみた。

作ったものは

最新ブックマークリスト
タグの一覧
各タグのブックマークリストを噴出しで表示

の三つ。del.icio.us のサイトはタグ毎に画面遷移が発生して見にくいなーと思ったので噴出しで作ってみたわけだ。JavaScriptがOFFの環境では3つ目は使えず、リンクになる。

そんではソース晒し、まずは最新ブックマークリストの部分。RSSの習得に lastRSS を使用。すごくシンプルで使いやすい。タグの一覧はほとんど同じ事やってるので省略。

include 'prog/lib/lastRSS/lastRSS.php';
$rss = new lastRSS;
$rss->cache_dir = './prog/lib/lastRSS/cache';
$rss->cache_time = 3600;
$rsEntry = $rss->get('http://feeds.delicious.com/rss/jklryo');
if ($rsEntry) {
	printf('<ul>');
	foreach ($rsEntry['items'] as $val) {
		printf('<li><a href="%s">%s</a></li>', $val['link'], $val['title']);
	}
	printf('</ul>');
}

次に各タグのブックマーク一覧。jQueryを使って getJSON で習得したデータを表示してる。del.icio.us / help / json のあたりに使い方が載ってるのだけど、指定されたURLの del.icio.us/feeds/json/hoge でアクセスすると、feeds.delicious.com/feeds/json/hoge にリダイレクトされたので予めソッチを指定しとく。スクリプトは$.getJSON(url, [data], [callback]) [ jQuery ] - StackTraceを参考にした。

$(function() {
$(".delicioustag").click(function() {
	var a = $(this);
	var tag = a.text();
	var offset = a.offset();
	a.removeAttr('href');
	$.getJSON(
		"http://feeds.delicious.com/feeds/json/jklryo/" + tag + "?callback=?",
		function(data, status) {
			if ($(".tagEntry").size() == 0) {
				$('body').append($('<div/>').addClass('tagEntry'));
			}
			$(".tagEntry").empty(".tagEntry")
				.css({'top':offset.top + a.height() + 2,'left':offset.left,'display':'block'})
				.append($("<p/>")
				.append($('<a/>').attr('href','http://del.icio.us/jklryo/'+tag)
				.append("del.icio.us / jklryo / " + tag)))
				.append($("<ul/>"))
				.click(function(){});
			$.each(data, function(i, item) {
				$("<li/>").append($("<a/>").attr("href", item.u)
					.append(item.d)).appendTo(".tagEntry ul");
				});
			a.attr('href','#');
		}
	);
}).attr('href','#');
	$('body').click(function(){$('.tagEntry').remove()});
});

.tagEntry {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	background-color: #ffffff;
	border: 1px #000000 solid;
	text-align: left;
}
.tagEntry p {
	margin: 10px 5px;
}

テストはFx3とIE7でチェックした。jQueryだから最近のブラウザなら大抵OKだろうと勝手に思ってる。

jQuery は数珠繋ぎでどんどん書けるのが楽で、後から見るとこんなんでいいのか不安になる。HTMLの部分は別に作って display 属性で切り替える、とかしたほうがデザイン作る事を考えるとやりやすいかな。個人で小さいもの作る分にはいいかもだけど。

CSSは後で変えるかもしれないけど、こんな感じで作れますよっと。