自分のWebページにヤフオクの出品商品一覧を表示する
準備ができたところで、「Get as JSON」のリンクのアドレスをコピーします。このアドレスから、ヤフオクの商品情報をJSONで取り込めます。また、先週の記事（関連記事）で解説したとおり、アドレスの最後に「&_callback=関数名」を付けるとJSONPで情報を取得できます。
下記のコードは、jQueryと組み合わせて、JSONPから商品のデータを得て表示するプログラムのひな型です。「PipeのID」は、自分のPipeのIDに書き換えてください。「表示先の要素のID」には、情報を表示したい先の要素（divなど）のID名を指定します。
▼商品の情報を表示するプログラムのひな型
$(document).ready(function(){
$.getJSON(
"http://pipes.yahoo.com/pipes/pipe.run?_id=PipeのID&_render=json&_callback=?",
function(data) {
var items = data.value.items;
var html = '';
if (items[0].title) {
商品の情報からHTMLを組み立てる処理
}
else {
html = '<p>出品中の商品はありません。</p>';
}
$('#表示先の要素のID').html(html);
}
);
});
変数itemsが、商品の情報の配列になります。配列の個々の要素（各商品のオブジェクト）には、次のようなプロパティがあります。
| プロパティ | 内容 |
|---|---|
| auctionID | オークションのID |
| bids | 入札数 |
| endtime | 入札期限 |
| img | 商品画像のアドレス |
| price | 現在の入札価格 |
| title | 商品の名前 |
| url | 商品のページのアドレス |
| options | 各種オプションの情報が入ったオブジェクト |
ここまでに紹介した処理を使って、ヤフオクの商品一覧を表示するサンプルページを筆者のサイトに用意しました。アドレスは以下の通りです。
●Yahoo!オークションに出品中の商品を表示する（筆者のWebサイト）
Yahoo!オークションに出品中の商品を表示するサンプル
上記ページのサンプルは、筆者のヤフオクの出品状況を表示するように設定してありますので、筆者が何も出品していないときには「出品中の商品はありません」と表示されます。このページのソースコードを元に、自分の出品情報を表示するように作り変えてみるといいでしょう。
