サイトアイコン Lonely Mobiler

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

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

それがコレ -> http://loumo.jp/bookmark

作ったものは

の三つ。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は後で変えるかもしれないけど、こんな感じで作れますよっと。

Sponsored Link
モバイルバージョンを終了