忍者ブログ

Home > > はてなブックマークの件数が0 userでも画像を表示する方法

[PR]

  • 2017-03-29

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > はてなブックマークの件数が0 userでも画像を表示する方法

Home > JavaScript > はてなブックマークの件数が0 userでも画像を表示する方法

はてなブックマークの件数が0 userでも画像を表示する方法

Share on Tumblr このエントリーをはてなブックマークに追加

被はてなブックマーク件数を画像で取得する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
自分のブログじゃ動作確認もできないという罠。

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

PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
はてなブックマークの件数が0 userでも画像を表示する方法 from Born Neet

Home > JavaScript > はてなブックマークの件数が0 userでも画像を表示する方法

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top