del.icio.usのブックマークに言及しているブログをBLOGRANGER APIで検索する

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

さらにこのブックマークに言及しているブログを検索するように改良しました。ブログ検索は「BLOGRANGER 2.0」の「BLOGRANGER API」を使っています。del.icio.usとBLOGRANGER 2.0をマッシュアップしたAjaxアプリってところでしょうか。↓こんな感じです。

キーワードとURLの2通りの方法で検索できます。 フォームからキーワードで検索すると、そのキーワードでブログを検索して上位10件を表示します。またフォームからURLで検索すると、そのURLをリンクしたブログを検索して同じく上位10件を表示します。

ページ左にブックマークをリスト表示しています。レイアウトの都合でサムネイルのみで表示しています。その変わりにブックマークのタイトル(descriptionともいう)はツールチップで表示するようにしてあります。ブックマークのサムネイルをクリックすると、そのブックマークのURLでブログを検索して上位10件を表示します。つまり、そのブックマークを言及しているブログが検索できるということです。

View example

BLOGRANGER APIは次のように使っています。

はじめにscript要素でBLOGRANGER APIをロードします。BLOGRANGER APIをロードすると合わせてprototype.jsもロードされますので、以下のJavaScriptコードではprototype.jsも活用しています。

<script type="text/javascript" 
  src="http://ranger.labs.goo.ne.jp/rpc/api.php"></script>

ブログ検索を使うためRanger.BlogSearchオブジェクトを生成し、検索結果を受け取るイベントハンドラ関数を指定します。ここでは後述の「onupdateblogs関数」を指定しています。

  getblogs = new Ranger.BlogSearch();
  getblogs.successHandler(onupdateblogs);

検索ボタンもしくはサムネイルをクリックすると、キーワードもしくはURLを指定してブログを検索します。ここでは最大10件のブログを要求しています。「http://」か「https://」で始まる文字列はURLとして、それ以外はキーワードとして判断しています。正規表現のところがそれです。

  getblogs.hasKeyword(keyword.match(/^https?:///)
    ? '' : keyword);
  getblogs.hasLink(keyword.match(/^https?:///)
    ? keyword : '');
  getblogs.needsTitle();
  getblogs.needsBlog();
  getblogs.needsBody(200);
  getblogs.needsDate();
  getblogs.searchByKeyword('', 1, 10);

検索結果を受け取るイベントハンドラ関数です。検索結果のブログをリスト表示します。ここではブログのタイトル、サイト名、本文、更新日付を表示しています。タイトルをクリックすると、そのブログを表示します。またサイト名をクリックすると、そのサイト(ブログのトップともいう)を表示します。なお、検索結果のブログが0件のときは「(no blogs)」というメッセージを表示します。

function onupdateblogs(result) {
  Element.hide('blogs-indicator');
  if (result.totalResults==0)
    return $('blogs').innerHTML = '(no blogs)';
  $('blogs').innerHTML = '';
  $('blogs').appendChild(result.results.inject(
    document.createElement('ul'), function(ul, v) {

    // url+title
    var a = document.createElement('a');
    a.href = v.url;
    a.appendChild(document.createTextNode(v.title));
    var entry = document.createElement('div');
    entry.className = 'entry';
    entry.appendChild(a);

    // blogurl+blogname
    var a = document.createElement('a');
    a.href = v.blogurl;
    a.appendChild(document.createTextNode(v.blogname));
    var blog = document.createElement('div');
    blog.className = 'blog';
    blog.appendChild(a);

    // body
    var body = document.createElement('div');
    body.className = 'body';
    body.appendChild(document.createTextNode(v.body));

    // date
    var date = new Date();
    date.setTime(v.date*1000);
    date = date.toLocaleString();
    var rel = document.createElement('div');
    rel.className = 'rel';
    rel.appendChild(document.createTextNode(
      date + ' - ' + v.score
    ));

    //
    var li = document.createElement('li');
    li.appendChild(entry);
    li.appendChild(blog);
    li.appendChild(body);
    li.appendChild(rel);
    ul.appendChild(li);
    return ul;
  }));
}

ここで使ったdel.icio.usのusernameは「developmentor」です。JavaScriptコード中の「developmentor」を別のusernameに変更(2ヶ所ほど)してみてください。あなたのブックマークを使ってブログが検索できるようになりますよ。