楽天ジャンル検索で動的にセレクトボックス生成

Created: 4/1/2009, 12:00:00 AM

JavaScriptでセレクトボックスの連動をもとにアマゾンと楽天のカテゴリが連動するセレクトボックスを作ります。アマゾンは静的にしかセレクトボックスのオプションアイテムを渡せませんが、楽天ウェブサービス（Rakuten Web Service）では楽天ジャンル検索APIというのがあって楽天にリクエストを渡せば現在のジャンルを返してくれます。活用すればジャンル名やジャンルコードの変更が生じてもメンテナンスフリーな画面が作れます。

レスポンスはXML形式とJSON形式を選べますがJavaScriptでセレクトボックスの連動をもとにするのでJavaScriptと相性のいいJSON形式にします。JSONのデータを見る場合はブラウザのURL欄に以下のURLを入力してアクセスします。ブラウザの画面にサーバから返されたデータが表示されます。[YOUR_developerID]のところはご自分で取得した楽天デベロッパーIDが入ります。

http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=GenreSearch&version=2007-04-11&genreId=0```

ということはHTML内に以下のように書くだけでデータを取得し、後はセレクトオプションのアイテムに加工するだけで完成してしまうんじゃないんでしょうか？ さすがにそこまで簡単ではありません。実際にはJSONPという手法が必要です。JSONPとはJSONデータを受け取った後の処理（関数）を先に記述しておき、読み込むJSONデータをその関数でラップする手法です。いわゆるコールバック関数というのを使います。言葉で説明してもよくわからないと思いますので実際に試してみましょう。 楽天ウェブサービス（Rakuten Web Service）ではJSONPにも対応しています。先ほどのJSONデータを受け取ったリクエストパラメータに「callBack=関数名」を追加します。これでJSONデータを読み込んだ後に実行される関数を指定できます。試しに以下のように「callBack=cb」を追加してブラウザでアクセスしてみましょう。

http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=GenreSearch&version=2007-04-11&genreId=0&callBack=cb

すると返ってくるJSONデータがcb(…)の中に入った形になっています。次に以下のようなソースを書きcb関数を実装します。とりあえず最初のアイテムのジャンル名をalertで表示する簡単な処理にしました。実行するとダイアログに「CD・DVD・楽器」と表示されるはずです。

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-type"/>
    <title>Test</title>
    <script type="text/javascript">
    <!--
    function cb(json)
    {
        alert(json.Body.GenreSearch.child[0].genreName);
    }
    -->
    </script>
</head>
<body>
    <script type="text/javascript" src="http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=GenreSearch&version=2007-04-11&genreId=0&callBack=cb"></script>
</body>
</html>

これを応用して以下のように書けば楽天のカテゴリだけ動的に読み込める画面が完成します。