楽天商品検索APIをjavascriptで利用

締切済

質問者：niconico_mb
質問日時：2011/09/11 23:48
回答数：2件

こんにちは。
楽天の商品検索結果一覧を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は勉強中で、まだ初歩的な文字列操作やサンプルの改変ぐらいしかできません。恐れ入りますが、もし可能でしたらサンプルコードなど教えていただけると助かります。

何卒よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2011/09/13 21:04

#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">

</style>

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

</script>
</head>
<body>

<div id="index"></div>

</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2011/09/12 10:16

単純に、リクエストのパラメータに「&page=ページ番号」を加えて番号を指定するのではできないのでしょうか？

方法的には他のパラメータの指定と同じですが、ページ番号が変数になるでしょうから
　"～～&page" + page_num + "～～"
のように文字列連結をしてあげる必要があります。

この回答への補足

ご回答ありがとうございます。

すみません、質問が分かりにくかったと思います。どうやらイベントについての理解が浅いことが原因のようでして、恐れ入りますが、引き続きアドバイス頂けないでしょうか。

>「&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('検索キーワード','ページ番号')">
では実行されません。

すみませんが、正しい書き方をアドバイス頂けると助かります。
なにとぞよろしくお願いいたします。