« 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
| 固定リンク
|
|
|
|
|
アマゾンわくわく探検隊
トラックバック
この記事のトラックバックURL:
この記事へのトラックバック一覧です: 「JKL.ParseXML+ECS 4.0なページ」で遊んでみる:
» Ajax雑感 その2 from 観測気球
Ajax では、そのままでは URL が変化しないため、ブックマークしたり、他の Web ページからリンクしたりするときに不都合です。その解決法はすでにいくつか提示されています。 続きを読む