2xup.org

JSON feed を利用してエントリーに関連する del.icio.us ブックマークを表示

FH000006面白いものを見つけたのだけれど、ブログに書いてもただの紹介記事に終わってしまいそうなものをタグ付けしてブックマークし、ブログ内の関連する記事のページに表示することにしました。ブログ記事につけたタグと同じタグのついたブックマークを表示できれば記事に関連するリンク集ができるし、自分自身へのフィードバックにもなって良いかも。ソーシャルブックマークサービス del.icio.us では JSON feed も提供されているので、それを利用することに。

del.icio.us の JSON feed

del.icio.us の JSON feed の詳細は、help ページに用意されています。del.icio.us で JSON feed が提供されるようになって、もうすでに一年以上経つのですね…。

del.icio.us の help ページからリンクされている posts というページには、del.icio.us ユーザーでログインしていれば自身のブックマークの JSON feed の URI や、その JSON feed を html に表示させるサンプルが紹介されています。僕のブックマークの場合、JSON feed は以下の URI でとれます。count パラメータを渡すと最新 n 件という表示もできます。

del.icio.us ユーザーの方ならご存知だとおもいますが、del.icio.us の URL はとても解りやすく、ユーザー名のあとに /tag というふうにタグの名前を書けば絞り込み表示できます。これは提供されている JSON feed でも同じで、例えば css というタグが付けられた最新5件のブックマークに絞り込んだ JSON feed を取りたい場合、以下のような URI でオケイです。

ブログの記事に付けたタグとリンクする

del.icio.us の JSON feed の URI のタグの部分に、例えば Movable Type のエントリータグを代入できれば、そのエントリーに付けられたタグと同じタグのついたブックマークの JSON feed を取ることができます。

http://del.icio.us/feeds/json/kaminogoya/<MTEntryTags glue="+"><$MTTagName$></MTEntryTags>?count=5

あとは、del.icio.us のヘルプページに掲載されているサンプルを参考にして、json feed を html で表示できるようにして個別エントリーアーカイブテンプレートなどの任意の場所に記述すればオケイです。

<div class="section" id="related-bm">
  <h2>related bookmarks</h2>
  <script type="text/javascript" src="http://del.icio.us/feeds/json/kaminogoya/<MTEntryTags glue="+"><$MTTagName$></MTEntryTags>?count=5"></script>
  <script type="text/javascript" src="http://2xup.org/common/js/related-bm.js"></script>
</div>

related-bm.js の内容例は以下のようになります。.js ファイルにしなくても、内容を script 要素でコンテナしてもかまいません。

var ul = document.createElement('ul');
for (var i=0, post; post = Delicious.posts[i]; i++) {
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.setAttribute('href', post.u);
  a.setAttribute('title', post.d);
  a.appendChild(document.createTextNode(post.d));
  ul.appendChild(li);
  li.appendChild(a);
} 
document.getElementById('related-bm').appendChild(ul);

これでブログのエントリー記事と同じタグのついたブックマークが表示されるようになりました。やや几帳面な方向きなイメージはありますが、僕自身、情報の発信・取得に関して意識していることで書いたように、ブログの記事もブックマークも極力シンプルでカテゴリー分けするようななタグ付けをおこなっていることもあり、さほど気を遣わなくてもよさそう。del.icio.us でブックマークする際に付けるタグは思いのままで良いかもしれないけれど、ブログ側はシンプルにすると良いかもしれません。

ちなみにこの記事には json というタグを付けているので、エントリーの個別ページには del.icio.us の僕のアカウントで json というタグが付けられたブックマークが表示されていると思います。

もちろんエントリーカテゴリーでも

タグでの例を書きましたが、もちろんカテゴリーでも同じことができます。これでタグに対応していないブログツールでも同じようなことができますね。カテゴリーで利用する場合、del.icio.us の JSON feed の URI は以下のようになります。

http://del.icio.us/feeds/json/kaminogoya/<MTParentCategories glue="+"><$MTCategoryLabel$></MTParentCategories>?count=5

エントリー個別ページだけでなく、同じようにタグ検索の結果ページにも、関連するブックマークを表示することにしました。ブログに書いている記事は自分自身の備忘録も兼ねていて、自分でもタグ検索を行うことも多々あるので、エントリーといっしょにブックマークの検索もできて便利。

2 Comments

Jun Kaneko2006年12月26日 16:33

なるほど〜試してみよう。と思ったら、何やら見覚えのある写真が。

kaminogoya2006年12月26日 17:18

> kaneko さん

そうです!みんなで行った海岸沿いにあるレストランのパエリアですよ。とっても del.icio.us だったので、写真を掲載してみました。

タグをきちんと管理しなければいけないという問題もあるのですが、ブックマークもやりっ放し感があったので、自分自身の為にも結構良いです。ぜひ試してみてください!

Movable Type の検索結果オルタナティブテンプレートを利用して、検索結果でも feed を吐いています。デフォルトでは rss ですが、これに JSON feed 用のテンプレートを追加して、吐かせて関連エントリーも表示しています。