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では必須っぽい。
