jQueryでWebサービスにアクセスする

jQueryでWebサービスにアクセスする

Webサービスにアクセスする方法はいろいろありますが、WebブラウザだけであちこちのWebサービスにアクセスする場合、「JSONP」と呼ぶ技術を使います。JSONPは、以下のような仕組みで動作します（図2）。

（1）Webページ内に「コールバック関数」と呼ぶJavaScriptの関数を入れておきます。
（2）JavaScriptでWebサービスにアクセスします。
（3）Webサービスから、コールバック関数を呼び出してJSON形式でデータを渡すようなJavaScriptが返されます。
（4）（3）のJavaScriptをWebページに動的に追加します。
（5）コールバック関数が実行され、得られたデータを表示するなどの処理が行われます。

楽天WebサービスはJSONPに対応していますので、Webブラウザだけでアクセスすることができます。

JSONPの処理を行う方法もいろいろ考えられますが、ここではjQueryを使います。jQueryにはAjax関係の機能があり、その中にJSONPでWebサービスにアクセスする機能も含まれていますので、それを使います。実際のJavaScriptの書き方は【リスト3】のようになります。

【リスト3】 JSONPでWebサービスにアクセスする

「アクセス先のアドレス」には、JSONPでアクセスする際のAPIのアドレスを指定します。また、JSONPでは、APIのパラメータとして、コールバック関数の名前を渡す必要があります。jQueryでJSONPにアクセスする場合、コールバック関数の名前のパラメータに、「?」を渡すようにします。

そして、JSONPでアクセスした結果は、上のリストの「function(data) { ・・・ }」の部分の関数で処理します。パラメータの「data」にデータが代入されますので、そのデータをWebページに出力するなど、必要な処理を行います。

なお、データの構造は、アクセス先のAPIによってそれぞれ異なります。したがって、データの処理手順も、アクセス先のAPIに応じて変える必要があります。

JavaScriptから商品検索APIを使う

ここまでの話に基づいて、jQueryを用いて商品検索APIにアクセスするロジックをJavaScriptで書いてみましょう。

楽天の商品検索APIにJSONPでアクセスする場合、【リスト4】のようなアドレスに接続します。1ページ目では「http：//api.rakuten.co.jp/rws/2.0/rest?・・・」のアドレスに接続しましたが、このアドレスの「rest」の部分を「json」に変えます。このアドレスにアクセスすると、結果はXMLではなく、JSONPの形で返されます。

【リスト4】 楽天の商品検索APIにJSONPでアクセスする場合のアドレス

実際に、商品検索APIにアクセスするようなJavaScriptを書くと、下記の【リスト5】のようになります。

「var developerId = 'デベロッパーID';」の「デベロッパーID」の部分は、自分のデベロッパーIDに置き換えます。「var keyword = '検索のキーワード';」の「検索のキーワード」の部分に、検索したいキーワードを入れます。また、「コールバック関数名」の部分は、前述したように「?」を渡します。

そして、「得られたデータを処理する部分」に、データを整形して出力するなどの処理を入れます。

【リスト5】 商品検索APIにアクセスするJavaScript

次ページでは、JSONPによって得られたデータを処理するロジックを作成します。