コメント( 0 ) | トラックバック( 0 )

先日お伝えした、価格.comのAPI公開ですが、早速使って見ました。
Prototypeと JKL.ParseXMLを使えば非常に簡単に作ることができます。

サンプルはこちら

キーワードとジャンルを選択して［検索］ボタンをクリックすると、該当する商品の一覧が5件表示されます。
それぞれの商品は商品ページ、レビューページ、クチコミページにジャンプすることができます。それでは作ってみましょう。

まずは、価格.comのAPIへのアクセスは次のような URLになっています。

http://api.kakaku.com/Ver1/ItemSearch.asp?Keyword=【キーワード】&CategoryGroup=【カテゴリ】&ResultSet=【mediumまたはmini】&SortOrder=【並び順】&PageNum=【ページ番号】

ポイントは、キーワードとカテゴリです。カテゴリには次のいずれかを指定できます。

パソコン関連	Pc
家電	Kaden
カメラ	Camera
ゲーム	Game
スポーツ・レジャー	Sports
ブランド・腕時計	Brand
上記全て	ALL

その他のオプションについては、詳しくはこちら。

価格.com WEBサービス API マニュアル

このURLを検索画面の「検索」ボタンがクリックされたときに呼び出すわけですが、Ajaxは例によってセキュリティ上の理由で、外部のURLを直接呼び出すことができません。そこで、PHPなどを使ってクッションプログラムを作ります。

connect.php

<?php
$keyword = htmlspecialchars(stripslashes($_GET['keyword']));
$genreGroup = htmlspecialchars(stripslashes($_GET['genregroup']));

header("Content-type: application/xml; charset=UTF-8");
readfile(sprintf('http://api.kakaku.com/Ver1/ItemSearch.asp?Keyword=%s&CategoryGroup=%s&ResultSet=medium&SortOrder=pricerank&PageNum=1', $keyword, $genreGroup));
?>

これを、HTMLファイルと同じディレクトリに配置し、次のように呼び出しましょう。

connect.php?keyword=【キーワード】&genregroup=【ジャンル】

それでは、Ajax側のプログラムです。

<script type="text/javascript" src="_js/prototype.js"> </script>
<script type="text/javascript" src="_js/jkl-parsexml.js"></script>

<script type="text/javascript">
// http://www.gac.jp/article/index.php?stats=question&category=24&id=15357&command=msg　からいただきました Thanks
function comma(num) {
return num.toString().replace(/([d]+?)(?=(?:d{3})+$)/g, function (t) { return t+","; });
}

function searchKakaku(keyword, genregroup) {
if(keyword == '') {
alert('キーワードを記入してください');
}

// JKL.ParseXMLで XMLを呼び出し
var ajax = new JKL.ParseXML('connect.php?keyword=' + escape(keyword) + '&genregroup=' + genregroup);
var data = ajax.parse();

// テーブルを作り出す
var ret = '<table border="0" cellspacing="0" cellpadding="3" class="main">' +
' <tr>' +
' <th scope="col">製品名</th>' +
' <th scope="col">メーカー名</th>' +
' <th scope="col">最安価格</th>' +
' </tr>';
// データを作り出す
for(var i=0; i<data.ProductInfo.Item.length; i++) {
var thisItem = data.ProductInfo.Item[i];
ret += ' <tr>' +
' <td>' + thisItem.ProductName + '[<a href="' + thisItem.ItemPageUrl + '">詳細</a>] [<a href="' + thisItem.BbsPageUrl + '">レビュー</a>] [<a href="' + thisItem.ReviewPageUrl + '">クチコミ</a>]</td>' +
' <td>' + thisItem.MakerName + '</td>' +
' <td style="text-align: right">&yen;' + comma(thisItem.LowestPrice) + '</td>' +
' </tr>';
}
ret += '</table>';
$('resultArea').innerHTML = ret;
}
</script>

長いですが、内容は大したことはしていません。JKL.ParseXMLに先ほどのURLをセットして「parse()」メソッドを呼び出すと、JSONの形式でデータを取り出してくれます。戻ってくるXMLは、以下のようになっています。

パラメータ名	説明	データ型	対応ResultSet
NumOfResult	ヒットしたアイテムの数 0件の場合はエラーコード”ItemNotFound”を返します。	Integer	miniとmedium
ProductID	プロダクトID	String	miniとmedium
ProductName	製品名	String	miniとmedium
MakerName	メーカー名	String	miniとmedium
CategoryName	カテゴリ名 (トップカテゴリ＞サブカテゴリ）	String	mediumのみ
PvRanking	カテゴリ内での人気ランキング。 ランク外の場合は””(空文字)を返します。	Integer	mediumのみ
ImageUrl	イメージのURL	String	mediumのみ
ItemPageUrl	アイテムビューへのURL	String	miniとmedium
BbsPageUrl	クチコミ掲示板へのURL	String	miniとmedium
ReviewPageUrl	レビューページへのURL	String	miniとmedium
LowestPrice	最安価格(税込み)。 価格登録の無い場合は””(空文字)を返します。	Integer	miniとmedium
NumOfBbs	クチコミ掲示板書込み数	Integer	miniとmedium

XMLは、次のような形式になっています

<data>
<ProductInfo>
<Item>
<ProductName>...</ProductName>
</Item>
<Item>
...
</Item>
...
</ProductInfo>
</data>

という具合に続くので、例えば製品名を取り出したいときは、次のようにして呼び出します。

data.ProductInfo.Item[0].ProductName

サンプルプログラムでは、「data.ProductInfo.Item[i]」までを、「thisItem」というオブジェクトに代入して短くしています。後は、テーブルタグを構成して、今あるテーブルと差し替えるだけ。ちょっと力業のプログラムですね。。

それから、価格情報がプレーンな数字（1200など）なので、3桁ごとにカンマを振るファンクションを使わせていただいています。

URLの呼び出し時にページ番号を付加すればページングしたり、大量の商品を一気にとってくることもできます。色々応用が利きそうなので、ぜひみなさんも作ってみてください！

 

はてなブックマークに保存

[PR] Recently Ajaxメルマガ限定、人気記事ランキング