小粋空間  -  a cheap joke and a play on words site

はてなブックマークの「人気エントリー/注目エントリー」を Ajax + Perl でブログに表示する

はてなブックマークの「人気エントリー」や「注目エントリー」を Ajax + Perl を利用して、スクリーンショットのように「記事タイトル+被ブックマーク数」のフォーマットでブログ等に表示させるカスタマイズです。

他のサイトで同じようなリストを見かけたのですが、そのようなインタフェースあるいはツールを探し出せなかったので、自作しました（すでに同じものが提供されていたらお恥ずかしい限りですが）。

単に一覧を表示するのであれば、RSS + feed2JS でも可能ですが、被ブックマーク数まで表示することができないため、はてなブックマークで表示される HTML ファイルを Ajax + Perl で取得し、JavaScript で加工しています。
きめ細かいエラー処理等実装していないので、動作に不具合がございましたらご連絡ください。

なお、ここで紹介するカスタマイズは、アクセス毎に CGI が起動されます。サーバのパフォーマンスを考慮した、HTML ファイルを周期的に取得し、それを Ajax で取得する方法につきましては別エントリーで紹介する予定です（お分かりになる方はスクリプトを適宜修正してください）。

１．アーカイブのダウンロード

下記のいずれかのリンクからスクリプト一式をダウンロードしてください。

hatenabookmark.zip

hatenabookmark.lzh

ダウンロードしたアーカイブを解凍してください。中には下記のファイルが含まれています。

ajax-loader.gif（ローディング画像）

hatenabookmark.js（Ajax 起動スクリプト）

hatenabookmark.cgi（HTML 取得スクリプト）

上記の他、Ajax ライブラリの prototype.js が必要です。

Prototype JavaScript Framework

上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js はブログの任意のディレクトリにアップロードしてください。

２．HTML の修正

script 要素を、リストを表示させたい HTML（あるいはテンプレート）の </head> の直前に設定します。

<script type="text/javascript" src="http://user-domain/prototype.js"></script>
<script type="text/javascript" src="http://user-domain/hatenabookmark.js"></script>

赤色の user-domain は、それぞれのファイルをアップロードした URL を設定してください。

次に、リストを表示したい位置に下記のタグを設定してください。

<div id="hatena"></div>
<script type="text/javascript">
//<![CDATA[
getHatenaBookmark('[人気エントリー/注目エントリーのURL]', '[表示数]', 'hatena');
//]]>
</script>

[人気エントリーまたは注目エントリーのURL] は、下記の手順で取得・設定してください。

1. はてなブックマークのトップページへジャンプ
2. 右上にあるテキストエリアに表示したいサイト（のトップページ）のURLを入力し、ラジオボタンで「URL」を選択して「検索」をクリック
3. 次ページでブラウザに表示された URL をコピー
4. コピーした URL を上記の [人気エントリー/注目エントリーのURL] に設定

エントリーリストからトップページを外したい場合は、検索する時にアーカイブページのURLまで指定すればうまく取得できます。Movable Type を利用している当サイトの場合、

http://www.koikikukan.com/archives/

としています（Movable Type であれば一律可能という訳ではなく、管理画面でアーカイブパスを設定していればこのような取得が可能です）。

[表示数] は表示したい記事数です。HTMLから取得するので最大50件です。

３．Perl スクリプトのアップロード

hatenabookmark.cgi をサーバの任意のディレクトリにアップロードしてください。アップロード後、ファイルのパーミッションを 755 等に変更してください（値はご利用のサーバによって異なりますのでご確認ください）。

４．JavaScript 外部ファイルの修正

hatenabookmark.js を任意のエディタで開き、下記の user-domain を、先程アップロードした hatenabookmark.cgi の URL になるよう、修正してください。

// CGI の URL
var cgiURL = 'http://user-domain/hatenabookmark.cgi';

以下はオプションです（変更は動作確認後の方が良いでしょう）。

// リストに用いるタグ
var htnHeader = '<dl>';
var htnTitle = '<dt>最近の人気エントリー<\/dt>';
var htnListHeader = '<dd>';
var htnListFooter = '<\/dd>';
var htnFooter = '<\/dl>';
  
// ブックマーク数を括る span タグに付与する class 属性値
var htnListClassName = 'hatenaCount';
 
// 記事タイトルから削除したい文字列
var deleteChar = '';
 
// ローディング画像
var htnImage = 'ajax-loader.gif';

生成するリストのデフォルトマークアップは下記のようになっています。上記の「リストに用いるタグ」を変更する際の参考にしてください。

<dl>
<dt>[htnTitle]の内容</dt>
<dd><a href="...">記事タイトル1</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数1</span></a></dd>
<dd><a href="...">記事タイトル2</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数2</span></a></dd>
　　　　　　：
<dd><a href="...">記事タイトル3</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数3</span></a></dd>
</dl>

[記事タイトルから削除したい文字列] は、サイト名等を記事タイトルから削除したい場合に用います。

hatenabookmark.js の修正が終わったら、サーバにアップロードしてください。

５．ローディング画像のアップロード

ajax-loader.gif を hatenabookmark.js と同じディレクトリにアップロードしてください。異なるディレクトリにアップロードした場合は、hatenabookmark.js の、

// ローディング画像
var htnImage = 'ajax-loader.gif';

の赤色部分に ajax-loader.gif を含む URL を入力してください。

６．CSS 追加

下記のようなスタイルを追加すれば、被ブックマーク数部分がいい感じになります。

.hatenaCount a:link,
.hatenaCount a:visited {
    font-size: 10px;
    font-weight: bold;
    color: #ff0000;
    background-color: #ffcccc;
}

公式サイトでは被ブックマーク数によって与えるタグを振り分けてますが、このカスタマイズでは今のところそこまで凝っていません。

６．その他

以下覚え書きです。

Ajax で取得した HTML ファイルは一旦ページに読み込まれ、Opera9 で表示すると HTML ページが一瞬表示されてしまう場合があります。気になる場合はローディング画像の代わりに、display プロパティで加工が終わるまで非表示にした方がいいかもしれません。

また、読み込まれた HTML は img 要素の src 属性をもとに画像ファイルを取得を試みます。この HTML の src 属性はドキュメントルートで記述されているため、Firebug の Net で確認すると取得エラーが表示されてしまいます。
そのため Perl での取得後、故意に他の属性名に変更しています。

2006.02.26 追記
文中およびリストのファイル名に誤りがありましたので修正しました。

• 
• Tweet