Ogawa::Memoranda

XML を JSON に変換するサービス - ベータ版を公開 :: Drk7jpの意義がいまひとつ分からなかったので、ひとまずFlickr Badgeを作ってみた。

<div id="flickr-badge"></div>
<script type="text/javascript">
var flickr_method = 'flickr.people.getPublicPhotos';
var flickr_api_key = 'your flickr api key';
var flickr_user_id = '00000000@N00';
var flickr_per_page = 5;
var flickrUrl = 'http://www.flickr.com/services/rest/?method=' + flickr_method
    + '&api_key=' + flickr_api_key
    + '&user_id=' + flickr_user_id
    + '&per_page=' + flickr_per_page;
 
var flickrBadge = {};
flickrBadge.init = function() {
    var name = 'flickrBadge';
    var proxy = 'http://app.drk7.jp/xml2json/';
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = proxy + '&var=' + name + '&url=' + encodeURIComponent(flickrUrl);
    document.body.appendChild(script);
};
flickrBadge.onload = function(data) {
    var photos = data['photos']['photo'];
    var res = '';
    for (var idx in photos) {
	var photo = photos[idx];
	res += '<a href="http://www.flickr.com/photos/'+ flickr_user_id + '/'
	    + idx + '/" title="' + photo["title"]
	    + '"><img src="http://static.flickr.com/' + photo["server"]
	    + '/' + idx + '_' + photo["secret"] + '_s.jpg" /></a>';
    }
    var ele = document.getElementById('flickr-badge');
    ele.innerHTML = res;
};
 
if (window.addEventListener) {
    window.addEventListener('load', flickrBadge.init, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', flickrBadge.init);
} else {
    var old = window.onload;
    window.onload = (typeof old != 'function') ?
        flickrBadge.init : function(e) { old(e); return flickrBadge.init(e);};
}
</script>

うーん、動くね。この例の場合には、Flickr ServicesへのリクエストがXML 2 JSON serviceでキャッシュされるのはありがたい。だけどこのコードをユーザが書くのは少し無理があるような…。

追記: またもInternet Explorerでうまく動かないや。後で修正しよう。

→修正完了。ポイントは、script要素のappendをドキュメントのロード後まで遅延したということ。Mapper Pluginもそうなのだけど、IEやSleipnirでは必須っぽい。