Googleガジェット作ってみた

今さらだけど先日作ったmixiアプリのコードを流用して作ってみた。

最初にキーワードを登録すると、4travelの旅行記検索APIで写真を取得して、
最新の写真をつらつらと並べていくというもの。

ここに貼り付けたやつは「宮古島」で検索して取得した写真。

しかしおれは何かをためすときはいつもこのAPIだな。。。
進歩してない。。。

それよりはてなダイアリーってGoogleガジェットのscriptをそのまま貼れるんだね。
以下、ガジェットXML。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="4travel search" />
<UserPref name="myword" display_name="keyword" required="true" />
<Content type="html">
<![CDATA[
<div id="photo"></div>
<style type="text/css" media="all">
img {
    border: 0px;
}
</style>
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
var tempword = prefs.getString("myword");
getPhoto(tempword);
function getPhoto(keyword){
    if(keyword){
        var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php?format=jsonp&callback=callback&keyword=' + keyword + '&max=20&order=travel_date&ic=utf8';
        var script = document.createElement( 'script' );
        script.type = 'text/javascript';
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild( script );
    }
}
function callback(res){
    var count = res.length;
    var divObj = document.getElementById('photo');
    divObj.innerHTML = '';
    for(i=0;i<count;i++){
        var pictcount = res[i].pictinfo.length;
        for(j=0;j<pictcount;j++){
            var a = document.createElement('a');
            a.setAttribute('href',res[i].pictinfo[j].pictlink);
            a.setAttribute('target','_blank');
            var imgObj = document.createElement('img');
            imgObj.setAttribute('src',res[i].pictinfo[j].picturl);
            imgObj.setAttribute('class','travelpict');
            imgObj.setAttribute('className','travelpict');
            imgObj.setAttribute('width','36');
            imgObj.setAttribute('height','27');
            a.appendChild(imgObj);
            divObj.appendChild(a);
        }
    }
}
</script>
]]>
</Content>
</Module>