スピリッツオブゼロ@blog > XMLをJSONデータに変換するJavascriptライブラリ
XMLをJSONデータに変換するJavascriptライブラリ
XML→JSON展開クラス(by Amazon Web サービス ブログ)経由で知ったXMLデータをJSONデータに変換するJavascriptライブラリが激しく便利です。
JSONとは初めて知りましたが
JSON (JavaScript Object Notation) は、軽量なデータ交換フォーマットです。それは、人間にとって読みやすく、書きやすく、また、機械にとっても解析と生成の容易な形式です。 JavaScript(ECMAScript)にもとづくサブセットです。(【Ajax】JSON by JavaScript++かも日記)
なにやらデータ交換に適したフォーマットらしい。Javascriptの配列・連想配列形式になっています。Kawasakiさんの作成されたXML→JSON展開クラスのJavascriptライブラリ(jkl-parsexml.js)はJavascriptのXMLHttpRequestを利用(いわゆるAjax)して外部からXMLデータを取得してJSONデータに変換します。設置ドメイン以外から取得するには間にスクリプトかまさないと動きませんが。。。同じドメインじゃないとデータ取得できないって言うのを知らなくて随分悩みました。
このライブラリを利用すると簡単に画面変移なしでAmazonとかの検索サイトが作れちゃいます。Amazonの吉岡さんがブログで簡単なサンプルを載せています。という事で俺はビッダーズで作ってみました。
とりあえず簡単な扱い方のサンプルソースを載せておきます。
サンプルXMLデータ sample.xml
<?xml version="1.0" encoding="Shift_JIS" ?>
<ListingInfo>
<ItemInfo>
<ItemNo>000011</ItemNo>
<ItemName>あいうえお</ItemName>
<ExhibitorId>3359157</ExhibitorId>
<BidNum>0</BidNum>
<CurrentPrice>777円</CurrentPrice>
<EndDate>11/11 11:11</EndDate>
<CategoryId>00001</CategoryId>
<RemainTime>24時間</RemainTime>
<ImageUrl>http://xxx.xxx.xx/xxx.jpg</ImageUrl>
<ItemNum>1</ItemNum>
<AuctionType>NO</AuctionType>
</ItemInfo>
</ListingInfo>
↑はとりあえずビッダーズ Webサービスで取得できる商品データの一部分です。HTMLのフォームボタンを押すと、この商品データから商品タイトル、画像URL、価格を取り出したいと思います。
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jkl-parsexml.js" charset="Shift_JIS"></script>
<script><!--
function hoge () {
var url = "sample.xml";
var xml = new JKL.ParseXML( url );
var data = xml.parse();
var src = "";
src += "Item Name : " + data.ListingInfo.ItemInfo.ItemName + "<br>";
src += "Image Url : " + data.ListingInfo.ItemInfo.ImageUrl + "<br>";
src += "Price : " + data.ListingInfo.ItemInfo.CurrentPrice + "<br>";
document.getElementById("Result").innerHTML = src;
}
// --></script>
</head>
<body>
<div id="SearchForm">
<input type="button" onclick="return hoge();" value="データを取得" />
</div>
<div id="Result"></div>
</body>
</html>
フォームボタンを押すとHTML内の<div id="Result"></div>要素内に価格などのデータが表示されます。この例は商品データが1つだけの単純なデータですので、シンプルなんですけど実際にはfor文を使ってループしてデータを順じ取り出す事が必要になります。
続いてWebサービス系からデータを取得すると、データをリクエストしたパラメータ類がArg要素などでデータとして返ってきます。通常のデータは<hoge>あいうえお</hoge>などと返ってくるのですがArg要素などは<hoge value="あいうえお" name="word" />のような感じです。実際の商品データXMLを見てみますと
サンプルXMLデータ sample2.xml
<?xml version="1.0" encoding="Shift_JIS" ?>
<ListingInfo>
<Request>
<Parameters>
<Parameter value="あいうえお" name="keyword" />
<Parameter value="Shift_JIS" name="enc" />
<Parameter value="xml_lite4" name="tf" />
<Parameter value="FP" name="at" />
<Parameter value="10" name="ipp" />
<Parameter value="777" name="categ_id" />
</Parameters>
</Request>
</ListingInfo>
パラメータ要素のところだけ抜き出したデータです。このデータを実際にJSONデータに変換してみますと以下のように変換されます。
ListingInfo: {
Request: {
Parameters: {
Parameter: [
{ value: "あいうえお",
name: "keyword" },
{ value: "Shift_JIS",
name: "enc" },
{ value: "xml_lite4",
name: "tf" },
{ value: "FP",
name: "at" },
{ value: "10",
name: "ipp" },
{ value: "777",
name: "categ_id" }
]
}
}
}
}
展開されたデータはParameter要素以下に配列で収納されています。Parameter[0].name、Parameter[0].valueってな具合です。Webサービスにアクセスした時に決まった順番でデータが返ってこればいいんですけど、実際はリクエストに利用したパラメータの数とかによって順番とかが変わってきます。そこでParameter[0].nameなどと決め打ちができないので、for文で回してnameがkeywordの時はvalueをKEYWORDに代入ってな事をします。
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jkl-parsexml.js" charset="Shift_JIS"></script>
<script><!--
function hoge () {
var url = "sample2.xml";
var xml = new JKL.ParseXML( url );
var data = xml.parse();
var src = "";
for (i = 0; i < data.ListingInfo.Request.Parameters.Parameter.length; ++i) {
var item = data.ListingInfo.Request.Parameters.Parameter[i];
if (item.name == "keyword") {
src += "name : " + item.name + " / value : " + item.value + "<br>";
}
}
document.getElementById("Result").innerHTML = src;
}
// --></script>
</head>
<body>
<div id="SearchForm">
<input type="button" onclick="return hoge();" value="データを取得" />
</div>
<div id="Result"></div>
</body>
</html>
フォームボタンを押すとsample2.xmlのデータからkeywordを抜き取るサンプルHTMLです。
おおまかにJSONでのデータの扱いを見るとこんな感じでしょうか？昨日から触り始めたので、まだいまいち理解しきれていないところがありますが・・・。なおjkl-parsexml.jsでは要素内のCDATAは<Comment><![CDATA[あいうえお]]></Comment>は扱えないようです。
ということでこれらを踏まえてビッダーズ Webサービスを利用して検索サイト作ってみました。JSONなビッダーズ検索テスト。まだざっと作っただけなのでおかしいところもありますけどね。ビッダーズへのリンクも無いし。。。
JSON利用でビッダーズWebサービスを利用した上で注意する点は、検索語句をShift_JISエンコードで無ければいけないと言う事。JavascriptでencodeURIがあるんだけどUTFしかできんぽい。ということで四苦八苦していたんですけどEscape Codec Library: ecl.jsと言うライブラリで無事Shift_JISエンコードできました。後は最初にも書いたんですけど、XMLHttpRequestが使われていますので設置サイトと異なるドメインからデータを取得できないのでPerlなどでProxyを作成してやら無いといけないことでしょうか。この点さえクリアすれば画面変移なしでの検索が楽しめます。
XML→JSONのJavascriptライブラリを使って利点は何だろう。サーバーサイドはXMLデータの取得だけで、データ加工などはクライアントで行うためサーバ負荷が軽い事なのかな？逆に弱点は画面変移とか行わないためにここのページが検索サイトにインデックスされないことかな。インデックスしたいページはPerlやPHPなどで。逆にインデックスされなくてもいいような事はJavascriptでという使い分けになっていくのでしょうね。
2005-05-21 03:40 PM | Permalink | Web Programing | Comments (0) | TrackBack (2)