被はてなブックマーク件数を画像で取得するAPIは、手軽で便利。

ただ、ブックマークされてないページの場合、1×1の透過pngが返ってくる仕様になってる。

つまり、このブログみたいに全エントリがブクマ数0だと、せっかくapiを導入してもなんの変化も起こらないという悲しい事態になる･･･っていうかなった、そして凹んだ。
（それに、デザイン的にもブックマークの有無によって画像が大幅に変わっちゃうのは良くないよね？）

ってことで、はてブが0件の時にも0 userという画像を表示する方法を考えてみた。

JavaScript使ってるので、続きは続きに入れます。（何か変な文章…）

これがサンプル。
上のimgタグにはsrcに1px×1pxの透過pngを指定してますが、ちゃんと0 userと表示されてます。
下はブクマ件数がある画像なので、そのまま表示されています。

0件の場合：
0件じゃない（10件）の場合：

※ このサンプルではapiを使わないで、手元にある画像を使ってます。


では、やり方を説明します。
※ この方法はimgタグにwidth、height属性を指定している場合は使えません。（IEではcssでwidth,height,paddingを設定している場合もだめでした。）

まず、画像を用意。
面倒な人はDLして使って下さい、こんなんでよければ。（っていうか誰かもっとクオリティの高いやつ作って～！）
関係ないけどsmall小さすぎない？こんなの読めないよ。



んで、はてブ件数のimgにclassNameを追加。（上のサンプルでは.hatenaにした。）

そして、こんなJavaScriptを貼れば完成。
（imgタグより後に。本来は外部スクリプトでwindow.onloadとか設定にすべき。）

<script type="text/javascript">
<!--
(function() {
	
	var file = 'hatenaL.png';
	var server = 'http://file.blog.bornneet.com/';
	var imgs = document.getElementsByTagName('img');
	for(var i = 0; i < imgs.length; i++) {
		if(imgs[i].className.indexOf('hatena') != -1) {
			if(imgs[i].width == 1 && imgs[i].height == 1)
				imgs[i].src = server + file;
		}
	}

})();
-->
</script>

何をしてるのかというと、画像の幅×高さが1×1ならsrcをhatenaL.pngに変更しているだけ。
（ライブラリがないとこんな単純な処理も長くなるなぁ。prototypejsやjqueryなら ($)$('img.hatena').each(処理)とか書けるのにー）


※ 始めはcssの方が楽かなと思って、

・imgを2枚重ねて表示させる
・0 userの画像を背景として設定しておく

という方法も試したけど、なんか使いにくいし、スマートじゃない気がした（前者の方法は特に）ので結局JavaScriptでやった。


これではてブ件数0の弱小ブログでも画像取得APIを心置きなく使えますね…

…

…誰かブックマークして下さいm(_ _)m
自分のブログじゃ動作確認もできないという罠。

セルクマは「駄目！ゼッタイ。」という、どうでもいいプライドは何とか貫きました。