エントリーリストにはてブ件数を表示する、オンテナにはてブ件数表示機能追加

エントリー一覧のように複数のリンクが貼ってあるページがあって、それぞれのリンクにはてなブックマークされている件数を表示させるっていうのを2種類の方法で試してみた。試す対象は、奥出研究室メンバーのBlog/日記の更新情報をお届けする「オンテナ」。オンテナの最新記事リストには登録されいているBlogの記事最新100件がリンクされているので、それぞれのリンクについて被はてなブックマーク件数を表示させる。

まず最初に考え付いた方法は、はてなブックマーク件数取得APIをPerlから操って、表示するにはAjaxを使うという方法。これはAjaxの勉強も兼ねて。で、実際に作ってできたんだけど、よくよく調べてみたら「ブックマーク数を画像で取得する API」なるものを使った方がcgiをたたかない分、格段に表示が早いし簡単なので結局そちらを採択。というわけで、オンテナにはてブ件数を表示させることができました。

はてブ

でもAjaxのプログラムせっかく書いたので以下に公開。Ajaxのプログラムは初めてだったのでJavaScriptでてこずった。。。リファクタリング必要やね。

hatebu_count.cgi Perlプログラム

#!/usr/bin/perl

use strict;
use XMLRPC::Lite;
use CGI;
use JSON;

my $q = new CGI;
my $uri = $q->param('uri');
my $EndPoint = 'http://b.hatena.ne.jp/xmlrpc';
my $obj;

#$uri = "http://yusukebe.com/";
if ($uri eq ''){
  $obj = {
    count => '',
    name => 'error'
  }
}else{
  $uri =~ s!http://b.hatena.ne.jp/entry/!!;
  my $map = XMLRPC::Lite
    ->proxy($EndPoint)
    ->call('bookmark.getCount', $uri)
    ->result;
  $obj = {
    count => $map->{$uri},
    name => $uri
  }
}

print $q->header(-content_type => "text/javascript",
                  -charset => "utf-8");
print objToJson($obj);

hatebu_count.js

function get_hatebu_count(uri) {
  var params = 'uri=' + encodeURI(uri);
  var cgi_url = './hatebu_count.cgi';
  var myAjax = new Ajax.Request (
    cgi_url,
    {
    method: 'get',
    parameters: params,
    onComplete: showResponse
    });
}

function showResponse(req, json) {
  eval("var ret = " + req.responseText);
  if(ret.count>0){
    
    var tag = '';
    if (ret.count >= 5) {
      tag = 'strong';
    } else if (ret.count >= 3) {
      tag = 'em';
    }
    var anchor = document.createElement('a');
    anchor.setAttribute('href', 'http://b.hatena.ne.jp/entry/' + ret.name);
    anchor.setAttribute('target', '_blank');
    var text = ret.count + ' users';
    anchor.appendChild(document.createTextNode(text));
    
    var element;
    if (tag == '') {
      element = anchor;
    } else {
      element = document.createElement(tag);
      element.appendChild(anchor);
    }
    var oldElement = getElement(ret.name);
    oldElement.firstChild.nodeValue = '';
    oldElement.style.display = "inline";
    oldElement.setAttribute('id','hatebu-count');
    oldElement.appendChild(element);
  }
}

function trigger(){
  var els =  document.getElementsByName('hatebu_count');
  for(var i=0;i<els.length;i++){
    get_hatebu_count(els.item(i).firstChild.nodeValue);
  }
}

function getElement(uri){
  var els =  document.getElementsByName('hatebu_count');
  var el;
  for(var i=0;i<els.length;i++){
    if(els.item(i).firstChild.nodeValue == uri){
      el = els.item(i);
      break;
    }
  }
  return el;
}

以下のようにspanでもなんでもいいからnameもしくはid属性にhatebu_countを持つオブジェクトの中にURLを書いたHTMLを用意して、hatebu_count.jsとprototype.jsをHTMLで読み込んで、trigger()を実行すれば動くはずです。

<html>
  <head>
  <link rel="stylesheet" href="http://yusukebe.com/archives/files/060829/hatebu_count.css" type="text/css" />
  <script type="text/javascript" src="http://yusukebe.com/archives/files/060829/prototype.js"></script>
  <script type="text/javascript" src="http://yusukebe.com/archives/files/060829/hatebu_count.js"></script>
</head>
<body>
<p>
  <a href="#" onclick="trigger(); return false;">
  はてブ数ゲット
  </a>
</p>
<ul>
  <li><span name="hatebu_count" id="hatebu_count">http://yusukebe.com/</span></li>
  <li><span name="hatebu_count" id="hatebu_count">http://www.google.co.jp/</span></li>
  <li><span name="hatebu_count" id="hatebu_count">http://www.yahoo.co.jp/</span></li>
  <li><span name="hatebu_count" id="hatebu_count">http://www.yahooooooo.co.jp/</span>
</body>
</html>

以下動いているサンプル。時間差で表示が変わるのがAjaxならではで気持ちいい。ちなみに、こちらの記事を多いに参考にさせていただきました→[戯] はてなブックマーク件数を blog に貼り付けるウィジェット