前から気になっていた価格.comの商品検索WebサービスAPIを試してみた。

とりあえず、今回はAjaxで作ってみる。こんな感じ↓

価格.com apiテスト(AJAX)

作り方

１．まず、価格.com WebサービスAPIを利用するためにアクセスキーを取得する。

２．Ajaxから利用するためにYahoo! Pipesでjsonp形式で出力するためのプロキシを作る。（このAPIは出力形式がxmlのみでajaxからは使えない）

Yahoo! Pipes:Kakaku.com Item Search JSON

参考：

• サーバー不要！Yahoo! PipesでXML→JSONPに変換
• ケーススタディで学ぶYahoo! Pipes入門

３．jQueryを使って、Yahoo! Pipesでjsonp形式で検索結果を取得する。

    $.ajax({
        url: "http://pipes.yahoo.com/pipes/pipe.run",
        data: {
            ApiKey: "18e1df1b7387543cc580ebe9c55294a1",
            HitNum: MAX_PAGE_ITEM,
            Keyword: searchKeyword,
            //価格コムのページ数は１から始まる
            PageNum: current_page + 1,
            _id: "d3acf57a65838085f97700e9ce5c0eb2",
            _render: "json"
        },
        dataType: 'jsonp',
        jsonp: '_callback',
        complete: function(){
            //通信終了時の処理
        },
        success: function(data, status){
            //通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)
            onSuccessSearchItem(data);
        }
    });

4．取得した商品情報をレイアウトして完成。

使ったプラグイン：

• jquery jtemplates pluginprototype.jpのTemplateのようなHTML Template
• jquery history pluginブラウザの戻るボタンに対応するためのプラグイン。
• jquery lazyaction pluginプラグインに登録された領域が表示されるまで登録された関数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
  今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

一回に取得できる商品が、20まで。取得した情報の中に、他のサイト（amazonなど）で利用できる商品コードがあると思っていたけど、価格コムの商品コードしかない。APIで取得できる画像も80 x 60ととても小さい画像。アフィリエイトもない？。このAPIをマッシュアップしてどんなサービスが作れるんだろう？

今度は、この検索結果をDBにため込んで、いろいろやってみるか。（１日5000回使える）
ajaxでは、戻るボタンの対応が面倒だし、Googleアドセンスみたいなアフィリエイトも使えない。

※画面はappleの真似をしてみた。パクリはいろいろ勉強になる。

価格.com apiテスト(AJAX)

いまだ対応が必要なIE6。

レイアウトやjavascriptの確認のため環境を残しておく必要がある。

ブラウザのバージョンごとにテスト環境をVMとかで環境を作っておくのもいいけど、ノートパソコンとか非力のPCではつらい。（ただでさえいろいろ起動しなければならないのに）

AdobeやMicrosoft製のツール、web上のサービスなどいろいろ試してみたけど、これが一番いい。

IETester

IE8, IE7 IE 6 and IE5.5のレイアウトが確認できる。

Javascriptの動きや、ページ遷移もできるのが、このツールのいいとこ。

ただ、結構落ちる。