Pipesを組み合わせればJavaScriptだけでOK

JSONP×jQueryでヤフオクAPIを活用しよう

2009年07月29日 08時00分更新

文● 藤本壱

自分の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	各種オプションの情報が入ったオブジェクト