「del.icio.us JSON Feeds」を使ってブックマークをサムネイル付きで表示してみました。↓こんな感じです。
ブックマークのサムネイルは「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のコールバックの使い方は、後日紹介しようと考えています。