BlogRanger API を使ってページの関連ブログを表示

BlogRanger APIを使ってページの関連ブログを表示させてみた。

BlogRanger APIではブログ検索結果をJSONP風のAPIで取得できる。そこで、関連ブログを表示させたいページのキーワードを抽出して、そのキーワードでのブログ検索結果を、事前に用意したテンプレートに埋め込んだ。

キーワード抽出には、tf-idf法や、Web APIを利用する方法があるが、今回はMeCabで形態素解析した結果から、ランダムに1つの名詞を選択することにした。

下記のサービスで動いています。

DOMAIN ERROR

コードはこんな感じです。

JavaScriptコード

var BlogSearch = Class.create();
BlogSearch.prototype = {
    initialize: function(keyword){
	this.keyword = keyword;
	this.mining();
    },
    mining: function(){
	var bs = new Ranger.BlogSearch();
	bs.successHandler(this.onSuccess.bind(this));
	bs.hasKeyword(this.keyword);
	bs.restrictDate(7);
	bs.needsTitle();
	bs.sortBy(Ranger.Search.SORT_SCORE);
	bs.searchByKeyword('', 1, 9);
    },
    onSuccess: function(result){
	try{
	    result.results.each(function(label, index){
		var title = label.title;
 		if(title.length > 15){
 		    title = title.substr(0, 14) + "…";
 		}
		$("blogranger" + (index + 1)).innerHTML = 
		'<a href="' + label.url + '">' + title + '</a>';
	    });
	}catch(e){
	    
	}
    }

HTMLテンプレート

<div id = "blogranger">
<div id = "blogranger_title">関連ブログ</div>
<table>
<tr>
  <td>
    <div id = "blogranger1">&nbsp;</div>
    <div id = "blogranger2">&nbsp;</div>
    <div id = "blogranger3">&nbsp;</div>
  </td>
  <td>
    <div id = "blogranger4">&nbsp;</div>
    <div id = "blogranger5">&nbsp;</div>
    <div id = "blogranger6">&nbsp;</div>
  </td>
  <td>
    <div id = "blogranger7">&nbsp;</div>
    <div id = "blogranger8">&nbsp;</div>
    <div id = "blogranger9">&nbsp;</div>
  </td>
  <td width="100px">
<!--BLOGRANGER-->
<div id="ranger-promote">
<a title="by BLOGRANGER" href="http://ranger.labs.goo.ne.jp/" target="_blank">
<img style="border: 0;" alt="by BLOGRANGER"
 src="http://ranger.labs.goo.ne.jp/rpc/image/promote.gif" /></a>
</div>
<!--/BLOGRANGER-->
  </td>
</tr>
</table>
</div>

利用コード

<script type="text/javascript" src="http://ranger.labs.goo.ne.jp/rpc/api.php"></script>
<script type="text/javascript">
<!--
s = new BlogSearch("<%= keyword %>");
-->
</script>