mixiアプリを作ってみた

4travelの旅行写真検索
http://platform001.mixi.jp/view_appli.pl?id=1771

アプリを試すにはオープンβ版に登録する必要があります。
mixiアプリ << mixi Developer Center (ミクシィ デベロッパーセンター)

アプリの内容は、入力されたキーワードで4travelの旅行記検索APIにリクエストし、取得した写真をずらっと並べるというもの。
全然OpenSocial的なものではないんだけど、とりあえずためしにmixiアプリを動かしてみたかったので。
レスポンスがJSONPのAPIなら簡単に使えることがわかったので、あとは本来のOpenSocial的なことをいろいろ試してみたいな。

なにつくろうかなぁ。わくわく。

以下、Gadget XMLの内容

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="use Social Data">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    
    <style type="text/css">
        img.travelpict{
            width:120px;
            height:90px;
            border: 0;
        }
    </style>
    
    <script type="text/javascript">
        function request() {
             var req = opensocial.newDataRequest();
             req.add(req.newFetchPersonRequest("VIEWER"), "viewer_data");
             req.send(response);
        }
        
        function response(dataResponse) {
             var viewer = dataResponse.get("viewer_data").getData();
             var nickname = document.getElementById('nickname');
             var text = document.createTextNode(viewer.getDisplayName());
             nickname.appendChild(text);
        }
        
        function getPhoto(){
            var keyword = document.getElementById("keyword").value;
            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');
                    a.appendChild(imgObj);
                    divObj.appendChild(a);
                }
            }
        }
        
        gadgets.util.registerOnLoadHandler(request);
    </script>
    
    <p>こんにちは <span id="nickname"></span> さん</p>
    <p>お好きなキーワードを入れてviewボタンを押してください。<br /><a href="http://4travel.jp" target="_blank">4travel</a>からキーワードにマッチした旅行写真を取得して表示します。</p>
    <input type="text" id="keyword" value="ウユニ塩湖">
    <input type="button" value="view" onclick="getPhoto();">
    <div id="photo"></div>

  ]]>
  </Content>
</Module>