- 締切済み
楽天商品検索APIをjavascriptで利用
こんにちは。 楽天の商品検索結果一覧をHTMLファイルにロードして表示したいと思います。 楽天商品検索APIを利用します。 http://webservice.rakuten.co.jp/api/itemsearch/ ThinkIT http://thinkit.co.jp/article/1103/1 こちらのサイトで紹介されている、 http://www.h-fj.com/thinkit/rest/jquery.html このサンプルを利用すればできそうなのですが、楽天APIは一度に表示できる商品が30個までという制限があるため（hitsパラメータの上限が30）、pageパラメータを、page=1、page=2と切り替えていかなければすべての検索結果を表示できません。 そのpageパラメータの指定を簡単に切り替えて表示していく方法がよくわからず、皆様にアドバイスいただきたいです。 理想は、HTMLページをロードした時点で１ページ目の30商品を表示し、「次へ」ボタンまたは数個配置したページボタンを押すことで次のページの商品に切り替えていくというシンプルなものです。使っているサーバーではPHPは使えずJavascriptとCSSのみです。 当方Javascriptは勉強中で、まだ初歩的な文字列操作やサンプルの改変ぐらいしかできません。恐れ入りますが、もし可能でしたらサンプルコードなど教えていただけると助かります。 何卒よろしくお願いいたします。
- niconico_mb
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 idがないのでこちらではテストしていませんが… ＞ロード時には1ページ目を表示できるようにはできました。 ＞search('検索キーワード','ページ番号'); …で、ページ指定して取得できるのであれば、最初に検索を実行したときにヒット総数も取得できるはずですので、それを表示個数で割ればページ総数が計算できるはずです。 そのページ数に対してリンクを作成すればよいことになりますが、ヒット数が多いと（例えば1万とか）、一度にそれだけのリンクを表示するとものすごいことになってしまうので、現在表示中のページの前後で10ページ分だけをメニュー表示するなどのような工夫が必要かと思われます。 総数の取得は、例えば参考サイトのcallbackのようにdata（変数）で結果を受け取っているとすれば、data.Body.ItemSearch.countで取得できると思われます。 ＞<body onload="search('検索キーワード','ページ番号')"> ＞では実行されません。 同じことなので実行できるはずですが、データを正しくセットしているでしょうか？ （キーワードやページ番号などが正しくセットされていますか？） ＞さらに2ページ目、3ページ目と切り替えていく機能の実装方法で行き詰っている次第です。 serch()の部分が別途できてるとして、インデックスの表示と制御のごく簡単なサンプルを… *単純な例なので、ページ数が多いときの表示制御はしていません。 *大きな総数を指定すると、多くのページインデックスが表示されますのでご注意。 みちのりが少々長そうな気はしますが、部分々々に分割して作成してゆけば可能かと思いますので、頑張ってください。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #index span{display:inline-block; width:2em; text-align:center; text-decoration:underline; cursor:pointer; } #index span.active{background-color:#ddf; text-decoration:none; cursor:auto; } //--> </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- function setIndex(maxCount, numOfItems){ //count総数, Itme表示数 var pages = Math.ceil(maxCount/numOfItems)+1; var index = "", i; for(i=0; ++i<pages;) index += "\u003Cspan\u003E" + i + "\u003C/span\u003E"; $("#index").html(index) .click(function(evt){ var t = $(evt.target); if(t.hasClass("active")) return; t.parent().children("span").removeClass("active"); t.addClass("active"); alert("page No = " + t.text()); //←ここで再読込みするなど }) .children("span:first-child").addClass("active"); } //テスト用のスクリプト（総数300、表示数30） $(function(){ setIndex(300, 30); }); //--> </script> </head> <body> <div id="index"></div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
単純に、リクエストのパラメータに「&page=ページ番号」を加えて番号を指定するのではできないのでしょうか？ 方法的には他のパラメータの指定と同じですが、ページ番号が変数になるでしょうから "～～&page" + page_num + "～～" のように文字列連結をしてあげる必要があります。
関連するQ&A
- 楽天WEB APIで新着順で取得したい。
楽天 web api https://webservice.rakuten.co.jp/api/ichibaitemsearch/ にて商品を検索させた時に新商品だけの情報を並べたいのですが パラメーター「sort」の「updateTimestamp」では、新着と更新情報が入り混じってしまいます。 楽天の通常の検索 「標準、価格が安い、高い、新着順、レビューが多い」という並び替えができます。 またにぎわいツールなどでは、新着順に並び替えるものもあります。 新着順に並び替えるために どのパラメーターを送っているのでしょうか？
- ベストアンサー
- PHP
- apiの結果がxmlで返ってくるのですが
素人なのでわかりやすくお願いします。 そこらのポータルサイトのapiはリクエストを送ると検索結果画面にそのまま飛ばしてくれるのですが この度、楽天ショッピングのAPIを設置したのですが 検索すると検索結果が、xmlがいろいろ書いてあるページに飛ばされてしまいます。 これは楽天がxmlで結果を返してきてるからだと思いますが これを普通の検索結果画面で表示させるにはどうしたらいいのでしょうか？ 私はphpとか全然わかりません。 javascriptのサンプルをいじったりしてる程度の知識です。 javascriptの書き方自体知らないぐらいの素人です。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 楽天ＡＰＩを利用したい
特定の質問になってしまうのですが、 楽天のＡＰＩを利用しhttp://www.pillow.co.jp/3works/ec/imakore.htm のような仕組みを作りたいと考えております。 商品の内容、注文日、時刻、都道府県の情報はＣＳＶファイルとしてあるとして、上記のようなHTMLファイルはどのようにして作れますでしょうか。
- ベストアンサー
- AJAX
- Yahoo apiをJavascriptで作成
Yahoo apiの以下のＵＲＬはPHPで作成されています。（サンプルコード集より） http://cgi.geocities.jp/ydevnet/sample/shopping/sample8/ContentMatc... このapiをJavascriptで作成することは可能でしょうか？ 可能であれば、以下のＵＲＬのmooraku.js を改良して作成してみたいと思っています。 http://common1.biz/material/javascript/21/ もし可能であれば、 １、画像 ２、価格 ３、商品名 ４、商品説明 の４要素をJavascriptで表示させるには、どうすればよいのでしょうか？ 具体的に改良方法をご教示いただければと思います。 大変申し訳ございませんが、お詳しい方、よろしくお願い致します。 ｍ（＿ ＿）ｍ
- ベストアンサー
- JavaScript
- 楽天の商品を検索するソフトありませんか？
こんにちは。ヤフオクやアマゾンの商品を検索する場合、それぞれのwebページで直接行う以外にフリーソフトやシェアウエアなどの検索ソフトがあります。 同じようなもので楽天の商品検索ができるものがないかと調べたのですが見つかりませんでした。 楽天の商品を楽天のwebページで検索する以外に検索用ソフトのようなものはありませんでしょうか？
- ベストアンサー
- その他(ネットショッピング)
- 楽天API(webサービス）を利用するには何が必要？
楽天で新しくAPIというものが公開され、ユーザは楽天のデータベースから情報が取れるようになるそうですが、どのようなプログラム？を使う必要があるのでしょうか？？ 初心者なんですが、キーワードを入れれば、楽天のデータベースから自由に商品を選んでこれるようなサイトを作りたいと思っています。 たとえばアマゾンでの、アマナツさんのようなページです。
- 締切済み
- その他(ソフトウェア)
- JavaScriptにて、商品番号を検索して商品詳細ページを表示したい
JavaScriptにて、商品番号を検索して商品詳細ページを表示したい WEBショップにて、商品番号を入力して検索し、該当する商品の詳細ページを表示するという様な事をJavaScriptでできるようにしたいと思っています。 現在利用しているサーバーでは、管理しているところに聞いたところ「CGI等の利用ができない」といわれています。なんとかJavaScript利用することでこれができないかと考えています。 Webでもサンプルとなるようなものはないかなど調べているのですが、私、全くの素人で、どれが一番良いものかもよくわかりません。 是非教えていただけないでしょうか。 ちなみに、入力する商品番号は「アルファベット1文字＋数字2文字」の合計3ケタの番号。 呼び出したい商品詳細のページのURLには、予めシステム内のデータベースで割り振られた商品IDで構成され、URL内に商品番号に一致する部分は一切ありません。 私のイメージとしては、テキストファイルか何かで「商品番号」と「その商品の詳細ページURL」を記載したリストをサーバー上に置いておき、商品番号が入力されたら、上記のテキストファイルより入力された商品番号に該当するURLを読み込んで、商品詳細ページを別ウィンドウで開くような形になるのかなと思っていますが、このイメージがあっているかもよくわかりません。 是非ご教授、よろしくお願い致します。
- ベストアンサー
- その他(ネットショッピング)
- google search apiについて。
googleのapiについて質問があります。 apiを使ってWebserchをJavascriptで作りたいんですが、 どのサイトのサンプルを見ても英語？での検索結果になってる気がします。 普通にgoogleで検索した結果とapiのserchで検索した結果とは違っています。 例えば「FLOW」と検索すると、普通のgoogleでは公式HPが先頭に表示されますが、apiの方では表示されていません。 直し方等あるのでしょうか？
- ベストアンサー
- JavaScript
- 楽天API+jqueryである特定の店舗の全商品を取得したいです。
楽天API+jqueryである特定の店舗の全商品を取得したいです。 検索キーワードが必須入力であるため、全商品の取得の方法がわかりません。 その店舗は色々なジャンルの商品があります。 よい方法があれば教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- ぐるなびAPIからXMLを受け取るまで
ぐるなびのAPIを使って見ようとHTML,php,javaを勉強しだしたのですが、いきなり詰まってしまいましたので教えてください。 テキストボックスに住所を打って、送信ボタンでぐるなびAPIにURLを送り単純にXMLを受け取るページを作って見たのですがうまく動きません。 HTMLとjavaをくみあわせてみたのですが、関数(?)の使い方が間違っているのでしょうか？ <HTML> <HEAD> <TITLE>ぐるなび検索</TITLE> <script type="text/javascript"> function getGurunaviUrl() { var gurunaviApi = "http://api.gnavi.co.jp/ver1/RestSearchAPI/"; var gurunaviKey = "取得したAPIキー"; var queri = gurunaviApi + "?keyid=" + gurunaviKey + "&coordinates_mode=2" + "address=" + juusyo + "&range=3" + "&hit_per_page=30"; return queri; } </script> </HEAD> <BODY> <FORM action="ローカル/index.html（このhtml）" method="get"> <INPUT type="text" size="20" name="juusyo"><INPUT type="button" value="ぐるなび検索" onclick="getGurunaviUrl();"> </FORM> </BODY> </HTML> また、ぐるなびAPIの使い方を紹介しているページなどありましたら教えてください。 宜しくお願いします。
- 締切済み
- HTML
補足
ご回答ありがとうございます。 すみません、質問が分かりにくかったと思います。どうやらイベントについての理解が浅いことが原因のようでして、恐れ入りますが、引き続きアドバイス頂けないでしょうか。 >「&page=ページ番号」を加えて番号を指定するのではできないのでしょうか？ ページ番号は指定できます。ページ数を指定するような関数を作り、下記のようにHTMLロード時には1ページ目を表示できるようにはできました。 $(document).ready(function(){ search('検索キーワード','ページ番号'); }); ここからが問題で、さらに2ページ目、3ページ目と切り替えていく機能の実装方法で行き詰っている次第です。 「 1 | 2 | 3 | 4 | 5 | 6 | 」 ↑こんな感じのページ番号の切り替えリンクが作りたいと思います。まず、手動でHTMLでこのように記述したのですが、onclickイベントが発生していないのか、関数が実行されませんでした。 <div id="result"> <a href="javascript:void(0)" onｃlick="search('ケーキ', 1)"> 1 </a> | <a href="javascript:void(0)" onｃlick="search('ケーキ', 2)"> 2 </a> | <a href="javascript:void(0)" onｃlick="search('ケーキ', 3)"> 3 </a> | ・ ・ ・ </div> ↓最終的には検索キーワードを引き継いで、このように関数内にコードを記述したいのですが、現状やはりダメでした。 //ページ切り替えリンクを作る var result ='<p>ページ</p>' for (var i = 1; i <= page_count; i++) { result +='<a href="javascript:void(0)" onclick="search(' + keyword + ',' + i + ')" value="' + i + '" />' + i + '</a> | '; } // ID「result」の要素に流し込む $('#result').html(result); ちなみに一番最初に表示するときも、 $(document).ready(function(){ search('ケーキ','ページ番号'); }); や <form method="get" action=""> <input type="text" name="keyword" value="ケーキ" /> <input type="button" onclick="search(this.form.keyword.value,ページ番号);" value="検索" /> </form> ではsearch()関数が実行されているのに、 <body onload="search('検索キーワード','ページ番号')"> では実行されません。 すみませんが、正しい書き方をアドバイス頂けると助かります。 なにとぞよろしくお願いいたします。