2009年07月15日 11:30 [Edit]

Ajax - iTunes Store 検索

へ?

iTunes StoreってWeb APIもってたの?


持ってましたよ。しかもJSONPが使える。

というわけで、検索できるようにしてみました。

Demo

JS Source

いたってシンプルです。

(function(d){

var $ = function(id){ return d.getElementById(id) };

var json2list = function(json){
    var ul = d.createElement('ul');
    ul.style.listStyleType = 'none';
    if (json['artworkUrl100']){
        var a = d.createElement('a');
        a.href = json['itemLinkUrl'];
        a.target = '_blank';
        var img = d.createElement('img');
        img.setAttribute('style', 'float:right; margin-right:0.5em');
        img.src = json['artworkUrl100'];
        a.appendChild(img);
        ul.appendChild(a);
    }
    var keys = [];
    for (var p in json) keys[keys.length] = p;
    keys.sort();
    for (var i = 0, l = keys.length; i < l ; i++){
        var p = keys[i];
        if (p.match(/Url/)) continue;
        var li = d.createElement('li');
        li.appendChild(d.createTextNode(p + ': '));
        if (json[p]) li.appendChild(
            typeof(json[p]) === 'object' ? arguments.callee(json[p])
                                         : d.createTextNode(json[p])
        );
        ul.appendChild(li);
   }
   return ul;
};

JSONP = {
  get:function(term){
    var u = 'http://ax.phobos.apple.com.edgesuite.net'
          + '/WebObjects/MZStoreServices.woa/wa/itmsSearch?'
          + ['output='   + 'json',
             'callback=' + 'JSONP.run',
             'country='  + 'JP',
             'lang='     + 'ja_jp',
             'term='     + encodeURIComponent(term)
          ].join('&');
    var s = d.createElement('script');
    s.charset = 'UTF-8';
    s.id = s.src = u;
    d.body.appendChild(s);
  },
  run:function(json){
    $('its.attr').innerHTML = '';
    if (json.errorMessage){
         $('its.attr').appendChild(json.errorMessage);
    }else{
        var ol = d.createElement('ol');
        for (var i = 0, l = json.resultCount; i < l; i++){
            if (!json.results[i]) continue;
            var li = d.createElement('li');
            li.appendChild(json2list(json.results[i]));
            ol.appendChild(li);
        }
        $('its.attr').appendChild(ol);
    }
  }
};

})(document);

Enjoy!

Dan the Ajax Monger


この記事へのトラックバックURL

この記事へのトラックバック
富永です。アメブロでのJavaScript活用について、今日はいじりました。まず、3800文字数制限を越えるためにこちらの記事を参考に JavaScriptを外部ファイル化しました。・javascript 外部ファイル化|アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!次に...
【実験!】アメブロでJavaScript!!【イムIT! - 仏教系!?IT活用ライフハックメモ】at 2009年09月17日 16:54
この記事へのコメント
なるほど、面白いです
次回も期待してます
またおじゃまします
Posted by ほーむ at 2009年07月15日 23:47