エントリーにソーシャルブックマークのコメントを追加するJavaScript

(追記 : 09/02/12) ソースはgithubでホスティングすることにしました。

タイトルのようなものを作りました。（SBMComment.js）

説明するより見てもらったほうが早いかも。faviconかえるやつのエントリーとかだとわかりやすいと思います。エントリーの下の方にはてブ、del.icio,us、Livedoor Clip、Buzzurlで書かれたコメントを拾ってきて、整形して表示しています。

経緯

masuidriveさんが、「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」なんてものを公開されてるのを見て「あーすごくいい！これ欲しかった！むしろやりたかった！」と思っていました。さっそく設置を行おうと思った矢先、どうせだったら他のSBMのコメントも一緒に表示したいなぁ、とも思いました。このあたりのSBMはそれなりのJSON APIを用意してくれているので、ついでに他のSBMのコメントも拾ってくるやつを自作しいてみることにしました。

でも、そもそもこんなこと誰かやってないの？？と思って少し調べてみるとmuumoo.jpさんがYahoo PipesでJSON APIを作ってくださっているのを発見。（Pipesのページ）この出来が超よかったので便乗してのっかってみることにしました。このAPI叩くほうがコードもスッキリして書きやすいし。あと自前サーバにAPIを作るんじゃなくてPipes使うという発想がスマートでとても気に入りました。そんなわけで、muumoo.jpさんのラッパーJSといえばそれまでなのですが、そこそこ融通は効きやすいようにしたつもりです。

SBMComment.js(とりあえず導入編)

ページ内のコメントを表示したいところで次のようなコードを追加します。

<div id="sbm-comment"></div>
<script src="http://{どこかのサーバ}/SBMComment.js" type="text/javascript"></script>
<script type="text/javascript">
SBMComment.load({ area : 'sbm-comment'});
</script>

そうすると、次のようなコードがdiv id="sbm-comment"の箇所に挿入されます。

<p id="1206265040">
<span class="sbm-comment-name"><a href="http://hatena.ne.jp/">jkondo</a></span>
from <span class="sbm-comment-type-hatena">hatena</span> at <span class="sbm-comment-date">2008-04-26 22:00</span>
</p>
<p class="sbm-comment-description">これはひどい</p>

要するにareaで指定したidの箇所に内容がロードされる、というわけです。コメントが見つからない場合は何もロードされません。

SBMComment.js(応用編)

書き出されるHTMLにはそれっぽいスタイル属性をつけているので、CSSでも整形できなくないですが、場合によってはニーズにあわない場合もあると思います。そこで、filterパラメータに整形用filter関数を指定することで、各コメント要素に対してfilter関数にかけて、書き出すHTMLを自由に操作することもできます。たとえばこのblogでは次のようなfilter関数を利用してコメントをロードしています。

( 追記:2008-06-12 2:00 ) 時間情報で、１桁の値のものはゼロで埋めて表示させるようにfilter関数をやや修正しました。前から直そうと思いつつ放置してたのをやっと対処。

var f = function(bookmark){
		if(bookmark==null) return '';
		var d = [], published = bookmark.published;
		var fillByZero = function (num){
			return num>10? '0'+num : num;
		};
		d.push('<p id="' + bookmark.id + '">');
		d.push('<span class="sbm-comment-name sbm-comment-type-' + bookmark.type + '">');
		d.push('<a href="' + bookmark.link + '">' + bookmark.author + '</a>');
		d.push('</span>');
		d.push('  <span class="sbm-comment-date">' + published.year + '-' + fillByZero(published.month) + '-' + fillByZero(published.day) + ' ' + fillByZero(published.hour) + ':' + fillByZero(published.minute) + '</span>');
		d.push('</p>');
		d.push('<p class="sbm-comment-description">' + bookmark.comment + '</p>');
		return d.join('');	
};
SBMComment.load( { area : 'sbm-comment-cont', nums : 'sbm-comment-num', filter : f } );

各bookmarkオブジェクトは、いろんなフィールドを持っているのでそれを好みのHTML要素に振り分けをしているfilter関数を用意します。bookmarkオブジェクトは次のようなフィールドを持っています。

• id : コメントID, 一意な値
• type : SBMの種類, 「hatena」「delicious」「livedoor」「buzzurl」のいずれかの文字列
• author : コメントを行った人の名前
• published : コメントを行ったときの日時オブジェクト, day,day_of_week, hour, minute, month, second. timezone, utime, yearのプロパティをもつ
• comment : コメントの内容
• tags : ブックマーク時のタグ
• link : ブックマークページ

また、総ブックマーク数を表示したい場合は、表示したい場所のIDを引数オブジェクトのnumsプロパティで設定します。上の例だと「sbm-comment-num」で指定しています。

主な使い方はこんなかんじです。特にライブラリ依存はしていない素直なJSONPのコードなので、いろんなライブラリがロードされていても大丈夫なはずです。なんかバグとか不具合とかあったら教えてください。ライセンスはYahoo Pipes使ったもののライセンスがどうなっているのか、元の作者の方がどのようなライセンス形態をとっているのか、なんかが不明なため、とりあえずMITライセンスにしておきます。(これも問題あったら変更します)

( 追記:2008-04-27 2:00 )このへんの表現の仕方で一番奇麗だなーと思うのはnatalieのコメント欄。たとえばこれ。

ここは記事に対するコメントとSBM経由のコメント、Twitter経由のコメントを全部透過的に同じレベルで扱っているのが素敵な感じ。ここまで一気通貫したものの方こそ、目指したかったゴールですかねー。