Yahoo!ショッピングAPIを使ってみた。
今回はマネタイズということで、アフィリエイトと連携できるYahoo Shoppingの商品検索WebサービスAPIを試してみた。
前回と同じくAjaxで作ってみる。こんな感じ↓
作り方
１．まず、Yahoo Shoppingの商品検索WebサービスAPIを利用するためにアクセスキーを取得する。
2．アフィリエイトを始めるために、バリューコマースのIDを取得する。
（Yahooショッピングは、Yahooポイントでの還元か、バリューコマース経由の現金かを選択できる。）
参考：
- Yahoo!ショッピングAPIでマネタイズ Part1
http://techblog.yahoo.co.jp/web/yahoo_1/yahooapi_part1/
３．Ajaxから利用するためにYahoo! Pipesでjsonp形式で出力するためのプロキシを作る。
（戻り値として、jsonp形式が使えるけど、appidを隠すために、Yahoo! Pipesを使う。）
パラメータにaffiliate_typeとaffiliate_idをセットする。
4.Yahoo!ショッピングAPIでアフィリエイトパラメータを指定する
APIのリクエスト時にリクエストパラメータaffiliate_typeにvc affiliate_idに
http%3A%2F%2Fck.jp.ap.valuecommerce.com%2Fservlet%2Freferral%3Fsid%3D●●●●●
●●%26pid%3D▲▲▲▲▲▲%26vc_url%3Dを指定します。(●と▲には3.で確認したsidとpidの値を入れます)
例(sidとpidの値はサンプルです。）
参考：
4．jQueryを使って、Yahoo! Pipesでjsonp形式で検索結果を取得する。
$.ajax({
url: "http://pipes.yahoo.com/pipes/pipe.run",
data: {
//何件目から取得するか。0始まり
offset: 0,
hits: MAX_PAGE_ITEM,
//売れ筋順
//sort: "-sold",
//レビュー数順
sort: "-review_count",
query: searchKeyword,
_id: "630316100b7af4d383aee9e85d2437a5",
_render: "json"
},
dataType: 'jsonp',
jsonp: '_callback',
complete: function(){
//通信終了時の処理
},
success: function(data, status){
//通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)
onSuccessSearchItem(data);
}
});
5．取得した商品情報をレイアウトして完成。
使ったプラグイン(前回と同じ)：
- jquery jtemplates pluginprototype.jpのTemplateのようなHTML Template
- jquery history pluginブラウザの戻るボタンに対応するためのプラグイン。
- jquery lazyaction pluginプラグインに登録された領域が表示されるまで登録された関数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。
価格コムのapiと比べると、取得できる情報が豊富でいろんなことができそうだ。
１秒間に１回というリクエスト制限があり、ajaxからは現実的じゃない。本当はサーバーサイドでコントロールしてあげなくちゃだめだ。（今回は心ばかりにjavascriptで１秒間のインターバルを開けている）
いろんなジャンルの商品を取り扱っているせいか価格コムのapiと比較すると想定外の結果が返ってくることが分かる。
うまく使いこなして取得する商品をコントロールすることができれば、いろんなことに使えそうだ。
※前回と同じく画面はappleの真似をしてみた。パクリはいろいろ勉強になる。
