del.icio.us JSON Feedsを使ってブックマークをサムネイル付きで表示する

「del.icio.us JSON Feeds」を使ってブックマークをサムネイル付きで表示してみました。↓こんな感じです。

View example

ブックマークのサムネイルは「MozShot」というサービスを使って表示しています。ほかにもサムネイルを生成するサービスはありますが、「MozShot」のサムネイルは、周囲がボヤ～と浮いたような影になるので、そのデザインが気に入って使ってみました。

ブックマークを表示するJavaScriptコードは「JSON Post Feeds」のexampleを改造したものです。

JSON Post Feedsは次のようなscript要素を使って取り込みます。アドレスの「developmentor」はdel.icio.usの「username」に対応しますので、あなたのusernameに置き換えてください。「count」は取り込むブックマークの数を表します。最大は100件までみたい。

<script type="text/javascript"
  src="http://del.icio.us/feeds/json/developmentor?count=20"></script>

このscript要素は次のようなJavaScriptコードを出力します。「Delicious.posts」という配列にブックマークのオブジェクトが新しい順序で格納されます。

if(typeof(Delicious) == 'undefined') 
  Delicious = {}; 
Delicious.posts = [{
  "u": "http://astore.amazon.co.jp/",
  "n": "11月15日から正式版がスタートしました。自由度も上がって使ってみたい気にさせます。",
  "d": "Amazonアソシエイト・プログラム　インスタントストア",
  "t": ["amazon", "affiliate"]
  },
  ...
];

ブックマークのオブジェクトは次のプロパティを持ちます。プロパティの文字コードはUTF-8です。ただし、JavaScriptエンコードされていませんので、状況によっては都合が悪いこともあるかもしれません。

u

ブックマークのURLです。ブックマークをpostするときのurlに対応します。

d

ブックマークのタイトルです。ブックマークをpostするときのdescriptionに対応します。

n

ブックマークのメモです。ブックマークをpostするときのnotesに対応します。notesを省略したブックマークはこのプロパティを持たずundefinedになります。

t

ブックマークのタグです。ブックマークをpostするときのtagsに対応します。このプロパティは配列です。またtagsを省略したブックマークはこのプロパティを持たずundefinedになります。

JSON Post Feedsはコールバックを使った取り込み(JSONPという仕組み)にも対応しています。JSON Post Feedsのコールバックの使い方は、後日紹介しようと考えています。