Home > gadgets Archive

gadgets Archive

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パーツを作成しました。貼り付けコードはこんな感じ。

TwitteAPIでひとことガジェット + Incremental Search

TwitterAPIやTwitter.fmでいろいろ遊んでました

Twitter Incremental Search Gadget

今回、これらを全部まとめてガジェット化にしてみました。

Twitter Gadget

TwitterAPIでひとことガジェット

「JSONPのTwitterAPIを試してみました」のつづき。

昨日はあまりにオレオレBlogパーツだったので、もうすこし汎用的なものに。IDを入力することで最新のひとことを表示するBlogパーツ(ガジェット)にしてみました。これくらいのパーツは本家で用意されてるっちゃーされてるんですけども、見た目があまり好きじゃなかったので自前でサクサクと。

twitter

で、使い方はこんな感じです。基本的に昨日とかわらないです。

Index of all entries

Home > gadgets Archive

Search
Feeds

Return to page top