Flickrの最新画像表示ガジェット

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

このBlogはトップページに僕のFlickrの最新画像を6枚表示しています。これはFlickrが昔公式Blogパーツとしてscriptタグを埋め込むと表示されるもの、として公開していたものなのですが、いつのまにやら膨大なHTMLコードを埋め込むバージョンに差し換わっていました。

埋め込みコードとして複雑！

個人的な意見として、こういうBlogパーツ、ガジェット埋め込みコードは可能なかぎり短く簡潔なコードにすべきだと思っています。あくまでも「飾り」のものなので、わざわざ大層なstyleタグやHTMLコードを大量に要するべきではないと思っています。

ところが、Flickr標準のFlashBlogパーツ埋め込みコードといえば

<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #000000; background-color:#ffffff;  color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=44124397399%40N01';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne"	style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">What is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="http://www.flickr.com/photos/44124397399@N01">katsuma</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>

と、かなり膨大なコードとなっています。

カスタマイズ性は確かに高いのですが、埋め込みコードとしてはなんとかこれを隠蔽できないのかなーと思わずにはいられません。

レンダリングをとめないで！

Flickrはレスポンスは必ずしも速いと思いません。LDRのサクサク感と比較したら雲泥の差。サイト自体は高機能で使いやすいのですが、画像のロードは重いので、BlogパーツもHTML内でロードするコードが埋め込まれていると、そこでHTMLのレンダリングが止まってしまい、ユーザにイライラ感をつのらせてしまいます。

これを防ぐ方法として、せめて関数呼び出しの方法を提供してくれれば、と思います。関数呼び出しができれば、windowがloadされたタイミング（レンダリングが終了した後）で呼び出せば、体感速度は増します。ところが、提供されてるBlogパーツの多くはまだまだそんな方法をとっているものは少なく、Blogパーツを貼れば貼るだけ、どんどんHTMLのレンダリングが重くなる悪循環を生み出しているものが多く見られます。

とか言ってる自分のページも

重いです。トップページは。それもFlickrの画像ロードだけにレンダリングがひっかかって、正直自分自身もイラっとしてました。

でも、とりあえず写真は貼っておきたい

なので、遅延ロードできるFlickr用Blogパーツを作成しました。貼り付けコードはこんな感じ。

<script src="http://blog.katsuma.tv/js/flickr.js" type="text/javascript"></script>
<script>
var param = {
	'username' : 'katsuma',
	'view_num' : 6
};
new Flickr.Gadget(param);
</script>

こんな感じ。flickr.jsがロードされるライブラリ。paramのusernameがFlickrのユーザ名（これは必須）、view_numが表示枚数。view_numは指定しない場合は6がセットされます。このコードを埋め込んだ場所にdocument.writeでFlickr画像が表示されます。

paramには表示場所指定できるようにしました。areaを指定した場合、つまり<div id="flickr_area"></div>のようなタグをどこかに埋め込んだ後に

var param = {
	'username' : 'katsuma',
	'view_num' : 6,
	'area' : 'flickr_area'
};

なんかで指定してあげると、areaで指定した場所にinnerHTML書き換えで画像が表示されます。つまり、jsはHTMLの下部でロードしつつも特定の場所に画像を表示したい！なんてことも可能です。

ただし、これだけだと、window.load後に表示ができないので、prototypeなりjQueryなり、はたまたwindow.loadに直接上記のコードを指定してあげれば、遅延ロードが可能です。ここはユーザが好きな方法をとれるように、今のところ意図的にロジックに入れていません。たとえばこのサイトはprototype.jsのEvent.observeを使って

<script>
Event.observe(window, 'load', function(){
	var param = {
		'username' : 'katsuma',
		'view_num' : 6,
		'area' : 'flickr_area'
	};
	new Flickr.Gadget(param);

});
</script>

こんな感じにしています。

「もうちとスタイルをいじりたい！」という人もいらっしゃるかもしれません。現状は、以前のガジェットと同じ仕様にしていて、

• 全imgには class="flickrimg"を 追加
• imgそれぞれには id="flickrimgN"(Nは1,2...の通し番号)を追加

と、いう仕様にしています。なのでCSSで表示位置の調整も可能かと思います。

さて、こんなものを作ってみたものの、かなり「オレオレガジェット」な感じは否めません、、、が、以前作ったTwitterのひとことガジェットも意外といろいろ好意的な意見も聞きましたので、使ってみたい方がいらっしゃれば、ご自由に利用いただければと思います。