「JKL.ParseXML+ECS 4.0なページ」で遊んでみる

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] 「Amazon Web サービス ブログ」で公開されているソースを勝手にいじって遊んでみました。JKL.ParseXML のおかげで、こんな簡単に ECS を利用できるというのは、うれしいですね。
[キーワード] JSON,JavaScript

« Atom feed 見直し | トップページ | ゲームキャラのピンキーストリート »

2005.05.19

「JKL.ParseXML+ECS 4.0なページ」で遊んでみる

Kawasaki YusukeさんがJKL.ParseXMLというJavascriptのクラスを開発、公開しています。

(略)

ブラウザのJavascriptでECS 4.0を呼び出すページを作るのに、XMLをDOMで扱う必要がなくなるので便利です。Cool。さっそく利用させていただいて、JKL.ParseXML+ECS 4.0なページを作ってみました。

Amazon Web サービス ブログ: XML→JSON展開クラス

面白そうなので、公開されているソースを少しいじって遊んでみました。和書やDVDなども検索できるようにしてみたり、アソシエイトIDを指定できるようにしてみたり。

以下、いじったソースです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style><!--
body { 
  background:#fff; 
  margin: 0px 0px 10px 0px;
  padding: 0; 
  font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif; 
  font-size: 12px; 
  color: #333; 
}
td.1 {
  border-top: 1px solid green;
}
--></style>
<script type="text/javascript" src="jkl-parsexml.js" charset="Shift_JIS"></script>
<script><!--
window.onload = function() {
  if (location.hash) {
    var hash = location.href.replace(/.*?#/,"");
    var ar = hash.split(":");
    var kwEncoded = ar[0];
    var subid = ar[1];
    var assoc = ar[2];
    var genre = ar[3];
    var kw = decodeURIComponent(kwEncoded);
    document.getElementById("kw").value = kw;
    document.getElementById("subid").value = subid;
    document.getElementById("assoc").value = assoc;
    document.getElementById("genre").value = genre;
    XMLJSON(kw, subid, assoc, genre);
  }
  window.onload = null;
};

function XMLJSON(kw, subid, assoc, genre) {
  kwEncoded = encodeURIComponent(kw);
// url はセキュリティの関係でリレーする仕組みが必要でしょう。
  var url = "http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService&Operation=ItemSearch&SearchIndex=" + genre + "&ResponseGroup=Small,Images&Keywords=" + kwEncoded + "&SubscriptionId=" + subid + "&AssociateTag=" + assoc;
  var xml = new JKL.ParseXML( url );
  var tid = setInterval(CountUp, 20);
  var callback = function (data) {
    var src = "<table>";
    try {
      if ( data.ItemSearchResponse.Items.Item ) {
        for (i = 0; i < data.ItemSearchResponse.Items.Item.length; ++i) {
          var item = data.ItemSearchResponse.Items.Item[i];
          if ( item.SmallImage )
            src += "<tr><td rowspan='3' class='1'><img src='" + item.SmallImage.URL + "'></td>";
          else
            src += "<tr><td rowspan='3' class='1'><img src='http://images-jp.amazon.com/images/G/09/icons/no-img-sm.gif'></td>";
          src += "<td class='1'>" + item.ItemAttributes.Title + "</td></tr>";
          if ( item.ItemAttributes.Manufacturer )
            src += "<tr><td>" + item.ItemAttributes.Manufacturer + "</td></tr>";
          else
            src += "<tr><td> ? </td></tr>";
          src += "<tr><td><a href='" + item.DetailPageURL + "'>Amazonで見る</a></td></tr>";
        }
        src += "</table>";
      }
      else {
        src = "<p>「" + kw + "」は、見つかりませんでした</p>";
      }
      document.getElementById("result").innerHTML = src;
    } finally {
      clearInterval(tid);
    }
    location.hash = kwEncoded + ":" + subid + ":" + assoc + ":" + genre;
  };
  xml.async(callback);
  xml.parse();
}

function CountUp() {
  document.getElementById("result").innerHTML += "-";
}
// --></script>
</head>
<body>
キーワード: <input id="kw">
<select id="genre">
  <option value="Books">和書</option>
  <option value="Music">音楽</option>
  <option value="DVD">DVD</option>
  <option value="Software">ソフトウェア</option>
  <option value="VideoGames">ゲーム</option>
  <option value="Electronics">エレクトロニクス</option>
  <option value="Kitchen">キッチン</option>
  <option value="Toys">おもちゃ</option>
</select>
<input type="button" onclick="return XMLJSON(document.getElementById('kw').value, document.getElementById('subid').value, document.getElementById('assoc').value, document.getElementById('genre').value);" value="検索"/>
<br />
Subscription ID: 
<input id="subid" size="32" />
アソシエイト ID:
<input id="assoc" value="tsuporoswebpa-22" size="32" />
<hr />
<div id="result"></div>
</body>
</html>

ECS を利用するアプリケーションが、JavaScript で書けてしまう、というのが面白いです。他の XML ベースの Web サービスを利用するアプリケーションも、JKL.ParseXML を利用すれば、割と簡単に作れそうです。

投稿者: tsupo 2005.05.19 午後 09:10 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

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

この記事へのトラックバック一覧です: 「JKL.ParseXML+ECS 4.0なページ」で遊んでみる:

» Ajax雑感 その2 from 観測気球
Ajax では、そのままでは URL が変化しないため、ブックマークしたり、他の Web ページからリンクしたりするときに不都合です。その解決法はすでにいくつか提示されています。 続きを読む

受信: 2005.10.03 午後 03:13

コメント

ワード

ニッセン

fujisan.co.jp

楽天市場