「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ヶ所ほど)してみてください。あなたのブックマークを使ってブログが検索できるようになりますよ。
View example
