- 締切済み
オークションの出品商品を表示したい
オークションの出品商品を表示したい Yahoo!知恵袋で質問をしていたのですが 文字数の制限がありなかなか思い通りの質問ができず こちらで再度質問させていただきます Yahoo!知恵袋 オークションの出品商品を表示したい 一回目 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1442614529 二回目 http://ksrd.yahoo.co.jp/PAGE=MY_QUELIST/LOC=QUELIST/R=2/O=DT/*-http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1442821189 三回目 http://ksrd.yahoo.co.jp/PAGE=MY_QUELIST/LOC=QUELIST/R=1/O=DT/*-http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1443013069 今回こちらの記事 ASCII.jp：JSONP×jQueryでヤフオクAPIを活用しよう http://ascii.jp/elem/000/000/441/441619/ を参考に出品している自分の商品を表示したいのです。 この記事ですと一度XMLで受け取りJSONPに変換していますが 今回はそのままJSONPで受け取りたいのと思っています。 いままで色々教えていただき ・Version1とVersion2の違い ・レスポンスフィールドの名称の違い ・ItemUrlではなくAuctionItemUrlではないのか？ ・jquery-jsonpやjquery.jsonpなどのプラグインを使用してはどうか？ ・ <div id="yahoo_auction"></div>はちゃんと書かれているか？ などご指摘の上に コードまで書いて頂いたのですが 「Yahoo!オークションAPI出品リストサンプル」は表示されていますけれど 未だ画面は真っ白のままなのです 教えて頂いたこのコードが一番わかり易いのですが http://gist.github.com/454883 var appid = 'your application id'; var sellerid = 'seller id'; この二行で自分のアプリケーションIDとYahoo! JAPAN IDを入れるだけのハズが うまく動いてくれません 理想としては二つめに教えていただいたコードのように jquery-jsonp/プラグインを使い エラー処理まで出来ることです http://gist.github.com/454948 「Yahoo!オークションAPI出品リストサンプル・jquery-jsonpプラグイン使用 APIの取得に成功しました！」 までは表示されるのですが肝心の出品データは真っ白なのです Yahoo!デベロッパーネットワークの トップ > アプリケーションIDの管理 > アプリケーションIDのリクエスト履歴 を見るとリクエスト履歴が残っているので データは受け取って入るのですが 受けっとったデータを表示できていないみたいです どなたか良いお知恵をお願いいたします こちらの環境は OSX 10.5.4 MAMP FireFox 3.6.6 ローカルでの環境がまずいのかと思い レンタルサーバへアップしてみたのですが 画面は真っ白のままでした レンタルサーバはエックスサーバです
- uzura_tama
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数15
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
itemsearchの続き－－－－－－－－－ //Item Listing var items=data.ResultSet.Result.Item; var result=$('<dl style="margin-left:10px;">'); for(var i=0;i<items.length;i++){ result.append('<dt style="clear: both;"><a href="' + items[i].AuctionItemUrl + '" target="_blank">' + '(' +items[i].AuctionID +')</a></dt>' + '<dd>' + '<img src="' + items[i].Image + '" ' + 'style="width:150px;height:100px;float:left;">' + '<div style="margin-left:170px;">' +'<a href ="' + items[i].ItemUrl + '" target="_blank">' + items[i].Title +'</a><br>' + '価格：' + parseInt(items[i].CurrentPrice) + '円<br>' + '即決価格：' + parseInt(items[i].BidOrBuy) + '円<br>' + '入札数：' + items[i].Bids + '件<br>' + '終了予定日時：' + items[i].EndTime + '<br>' + '最低落札価格：' + (!items[i].IsReserved?'有り':'無し') + '<br>' + '</div>' + '</dd>'); } }else{ var result=$("<dl>該当商品無し</dl>"); } resultarea.append(result); //Navigation Control $('span > a',resultarea).css({margin:"5px",color:"black",background:"#FFF"}); $('span > a:eq('+ (req_page-1) + '),resultarea').css("background","yellow"); resultarea.append('<hr style="clear: both;">'); resultarea.append(nextguide.clone(true)); }, //Ajaxエラー処理 error: function(XMLHttpRequest, status, errorThrown){ alert("通信エラー："+XMLHttpRequest.url + ":"+ status); } }); } 使い方の例、 <body> <div><h3>Ｙａｈｏｏ！オークション検索</h3> <div>出品者(＝sellerID)： <input id="sellerid" type="text" width="50"> <input id="kensaku_button" type="button" value="検索"> </div> <hr> <div id="YahooResult">（出品物検索結果）</div> </div> <hr> <!-- Debug用 <pre id="debug"></pre> --> <script type="text/javascript"> // var dumper=new JKL.Dumper(); // <＝デバッグ用 $(document).ready(function(){ $("#YahooResult>dl,#debug").empty(); $("#kensaku_button").bind("click",function(){ itemsearch($("#YahooResult"),$('#sellerid').val(),1); }); }); </script> </body>
- yyr446
- ベストアンサー率65% (870/1330)
焼け石に水となるかもしれませんが、結果を表示するDIVと出品者IDと開始ページ を指定して、表示する関数のサンプルをjQueryで作りました。 ※コメントアウトしてありますが、デバッグ用のツールも参考に JSONデータダンプクラス http://www.kawa.net/works/js/jkl/dumper.html ※多少長いので分割して投稿します。 （サンプル --その1）------------------------ function itemsearch(div,id,page){ var resultarea=div; var sellerid=id; var req_page=page; $.ajax({ type: "GET", url:"http://auctions.yahooapis.jp/AuctionWebService/V2/json/sellingList?", data: { "appid":"LyhQSZ2xg67jWd3iPDx5zSOVrn7gR16oEEflf8YBcrA9oibkL_1fOq9xQPpGIh7K9Q--", "sellerID":sellerid, "page":req_page }, dataType: "jsonp", success: function(data,status){ resultarea.empty(); //Debug // $("#debug").empty(); // document.getElementById("debug").innerHTML=dumper.dump(data); // var total_item_su=data.ResultSet.@attributes.totalResultsAvailable; var item_su=data.ResultSet.@attributes.totalResultsReturned; var item_pos=data.ResultSet.@attributes.firstResultPosition; if(total_item_su != 0){ if(total_item_su - item_su > 0){ //Navigation gen var nextguide=$(document.createElement("span")); for(var i=0;i<Math.ceil(total_item_su/50);i++){ var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click", function(event){ event.preventDefault(); itemsearch(resultarea,sellerid,$(this).text().substring(0,1)); }); nextguide.append(nexta); } resultarea.append(nextguide); } 続く
- yyr446
- ベストアンサー率65% (870/1330)
回答者のコードを張り付けて、眺めてるだけでは、なかなか解決しない物です。 まず、根本的な所として取得したアプリケーションIDとか有効ですか？ ブラウザーのアドレス欄にGET要求を張り付けて、レスポンスが表示されるのを 確認しましょう。 （※※※※がアプリケーションIDとして、yokouchiは誰か知りませんが） http://auctions.yahooapis.jp/AuctionWebService/V2/json/sellingList?appid=※※※※&sellerid=yokouchi それから、jQuery本体だけで出来ます。jsonpのプラグインなんか不用です。 まずはシンプルにやりましょう。徐々にグレードアップしていくのです。 ※JSONよりXMLを直に弄った方が楽だと感じるようになった今日この頃ですが．．． とりあえずのデバッグ用サンプルです。 [object Object]と下に出ればOKです。 Firefoxならdata.toSource();使ってもっとデバッグしやすいですが．．． （※全角空白は半角空白にすること） -------------------------------------------------- <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#kensaku_button").bind("click", function(){ var sellerid=$('#sellerid').val(); $.ajax({ type: "GET", url:"http://auctions.yahooapis.jp/AuctionWebService/V2/json/sellingList?", data: { "appid":"※※※※", "sellerID":sellerid }, dataType: "jsonp", success: function(data,status){ document.getElementById("debug").innerHTML=data.toString(); //ここに結果を成形する処理 }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラー"); } }); return false; }); }); </script> </head> <body> <div id="header"><!-- #header --></div> <div id="container"> <div id="YahooSarch"> <h1>Ｙａｈｏｏ！オークション検索</h1> <div>出品者のID： <input id="sellerid" type="text" width="50"/> <input id="kensaku_button" type="button" value="検索"/> </div> <hr /> <div id="YahooResult">（商品検索結果） </div> </div> </div> <pre id="debug"><pre> </body> 出品リストが大量にあることも想定して、ページングしながら検索 する仕組みにしてナビゲーションバーでも作った方がよさげだなあ。
お礼
yyr446様 ご指摘ありがとうございます。 アプリケーションIDのチェックは http://auctions.yahooapis.jp/AuctionWebService/V2/json/sellingList?appid=「アプリケーションのID」&sellerID=「Yahoo! JAPAN ID」&callback=aaa とブラウザに入力すると aaa( {"ResultSet":{"@attributes":{ xxx }, "Result":{ "Seller": xxx { "Rating":{ xxx } }, "Item":{ xxx "Option":{ xxx } } } }}) このような形で帰ってきます。 出品している商品がないときでも loaded({"ResultSet":{"@attributes":{"totalResultsAvailable":"0","totalResultsReturned":"0","firstResultPosition":"0"},"0":"\n"}}) このように該当件数が「0」という事を表示してくれます。 Yahoo!デベロッパーのID管理のページでは 最新アクセス日 2010-07-02 リクエスト数 8 となっているので 動作はしているみたいです。 がしかし 教えていただいたコードの data: { "appid":"※※※※", "sellerID":sellerid }, の場所にそれぞれアプリケーションIDを入れても 白紙のまま動作しません もちろん「出品者のID：」という文字の横に検索ウィンドがあるのでYahoo! JAPAN IDを入力し、検索ボタンをクリックするのですが動作はしませんでした。 コードもまるまるコーピー（もちろん<html>や</html>などは追記して）しているので、 いったいどこが原因で動作しないのか分からないというのが、 ひと月ぐらいつづいているのです。 JavaScript自体不慣れなので、みなさんに教えていただいたコードは プリントアウトして分かるところから消していく消去法で、 理解していく方法をとっております。 方法としては遅いのですが・・・。