ブックマークリストページ作った

del.icio.usのブックマークした記事リストを表示させる、よくあるリンクロールのページを作りました。今回は勉強という意味でJSONに挑戦することに

3ping.orgさまのページにBookmarkリストを表示させるページがあったので、なんかいいなと思って作ってみることにしました。

さてdel.icio.usには、JSON feedsが用意されてまして、以下のページにて解説があります。

JSON Post Feedsについては以下のページに解説とサンプルコードが掲載されています。

追記：delicious.comになってからJSON Post Feedsの解説ページがなくなりましたので、かわりに以下のページを参考にしてください。

Delicious Help Feeds

追記ここまで

おおまかな手順としてはじめに以下のURLを読み込ませておきます

<script type="text/javascript" src="http://del.icio.us/feeds/json/（ユーザ名）"></script>

なおデフォルトでは、15件の出力のようです。20件出力させるにはパラメータで「?count=20」のように指定します（デフォルトは15、最大100と説明に書いてあります）。

あとは、exampleのコードを参考に加工したりなんぞするわけです。

サンプルコードによれば、containerというidのつけられたDIVで括られた見出し要素のあとに、リストを追加するコードを記述しているようです。

ということで、作ったのが以下のページです。

JSONにtagについての情報が入っていましたので、それをもとにしてタグのリンクもつけるようにしてみました。

<h2>Bookmarks</h2>
<div id="bookmarks"></div>

のようにしておき、innerHTMLを使って流し込む形に変えました。あと、ファビコンの取得の方法ですけど、サンプルではルートにファビコンのないサイト等で取得できてないケースがあったので、favicon API javascriptライブラリを使うようにしてみました。

JSONから情報を取得するコードがよくわからなくて、『JavaScript 中級講座』（藤本壱：著）の第７章5節あたりを参考にさせていただきました。

リストを書き出すコードは外部ファイルにしておきました。

なお簡単にリンクロールを設置したい場合は、settingのところから以下のページで生成されたコードを利用するのが便利です。

参考リンク:

Comments:

コメントをどうぞ。書き込む場所が不明な場合やサイトオーナーへのコンタクトは、GuestBookまでお気軽にどうぞ

maRk 2008年9月27日 17:11: Deliciousのリニューアル後、本記事で示したヘルプページがなくなっているみたいです。 Feedsのページを参照されると新しいJSONフィード等について記載されています。ちなみにですが、feeds.delicious.com/v1/json/{username}でアクセスするとこれまで使っていたJSONフィードのようです。