小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。

Ajax - iTunes Store検索のサンプルを試してみた。

JavaScript

404 Blog Not Foundさんのエントリにある、Ajax - iTunes Store検索のサンプルを試してみました。
404 Blog Not Found:Ajax - iTunes Store 検索

ローカルで動かしてみる

ローカルで実行するため、次のようなHTMLを用意します。JavaScriptの部分は、編集しやすいように外部スクリプトにしています。実行ボタンのonclickイベントで、JSONP.getメソッドが呼び出されます。

hoge.html

<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <script language="javascript" type="text/javascript" src="hoge.js"></script>
</head>
<body>
  <h1>Ajax - iTunes Store 検索</h1>
  <div style="border:inset 1px; padding:0.5em">
  <input id="its.term" type="text" value="中島みゆき">
  <input type="submit" onclick="JSONP.get(document.getElementById('its.term').value)">
  <input type="submit" value="clear" onclick="document.getElementById('its.attr').innerHTML=''">
  <div id="its.attr" style="border:inset 1px"></div>
  </div>
</body>
</html>

次に検索APIをキックするJavaScriptを用意します。基本的にサンプルと同じですが、サンプルコードは個人的に難しく、わからない場所があったので、コメントを振ったり、別の書き方ができないかなと解析しながら動かしました。いろいろ勉強になりました。

hoge.js

// 無名関数の引数にdocumentを渡して実行している
(function(d){

// document.getElementById() 関数へのショートカット
var $ = function(id){ return d.getElementById(id) };

// json2list関数
// function json2list(json) {} でもOK
var json2list = function(json){
  // 非順序リストを生成する
  var ul = d.createElement('ul');
  // 非順序リストの丸印を非表示にする
  ul.style.listStyleType = 'none';
  
  // 100*100pxのアートワークがある場合は表示する
  if (json['artworkUrl100']){
    var aTag = d.createElement('aTag');
    aTag.href = json['itemLinkUrl'];
    aTag.target = '_blank';
    var img = d.createElement('img');
    // imgタグのスタイルを設定する
    img.setAttribute('style', 'float:right; margin-right:0.5em');
    img.src = json['artworkUrl100'];
    aTag.appendChild(img);
    // 非順序リストに追加する
    ul.appendChild(aTag);
  }
  var keys = [];
  for (var keyName in json) {
    // keys配列にキー名をプッシュしていく
    //keys.push(keyName);でもOK
    keys[keys.length] = keyName;
  }
  // キー名を昇順でソート
  keys.sort();
  
  for (var i = 0, l = keys.length; i < l ; i++) {
  var keyName = keys[i];
  // urlの部分は非表示にする
  if (keyName.match(/Url/)) continue;
  var li = d.createElement('li');
  li.appendChild(d.createTextNode(keyName + ': '));
  if (json[keyName]) {
    // オブジェクトの場合（暗黙の型変換を行わないで比較）
    if (typeof(json[keyName]) === 'object') {
      li.appendChild(arguments.callee(json[keyName]));
    }
    else {
      li.appendChild(d.createTextNode(json[keyName]));
    }
  }
  ul.appendChild(li);
  }
  return ul;
};

// JSONPオブジェクト
JSONP = {
  // getメソッド（callback関数にJSONP.runを指定している）
  get:function(term){
    var url = '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('&');
    // scriptタグを動的に生成し、画面に埋め込む
    var scriptTag = d.createElement('script');
    scriptTag.charset = 'UTF-8';
    scriptTag.id = url;
    scriptTag.src = url;
    d.body.appendChild(scriptTag);
  },
  
  // runメソッド
  run:function(json){
    // 出力領域の初期化
    $('its.attr').innerHTML = '';
    // エラーがあった場合は、エラーメッセージを表示
    if (json.errorMessage){
         $('its.attr').appendChild(json.errorMessage);
    }else{
      // 順序リストの生成
      var ol = d.createElement('ol');
      // 検索結果の数だけ、以下の処理を繰り返し
      // たぶんこのあたりをいじれば、検索結果数を制御できる。
      for (var i = 0, len = json.resultCount; i < len; i++){
      // 結果がnullなら処理をスキップ
      if (!json.results[i]) continue;
      // リスト項目を生成
      var li = d.createElement('li');
      // APIの結果をリストにしたものを追加
      li.appendChild(json2list(json.results[i]));
      // 順序リストにリスト項目を追加
      ol.appendChild(li);
    }
    // 結果を出力領域のdiv内に書きこむ
    $('its.attr').appendChild(ol);
    }
  }
};
})(document);

この２つファイルを用意したら、あとはブラウザでhoge.htmlを表示すれば、動かすことができます。

感想

意外とサクサク動くので、おもしろいです。
itemLinkUrlっていう項目がAPIの仕様書から見つかりませんでした。