PR

jQueryでWebサービスに触れてみる

2010年1月12日(火)
藤本 壱

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によって得られたデータを処理するロジックを作成します。

1969年生まれ。神戸大学工学部電子工学科卒。ソフトメーカー勤務後、フリーライターとして独立。現在では、パソコン関係およびマネー関係の書籍を中心に執筆活動を行っている。ブログ「The blog of H.Fujimoto」は、Movable TypeやWordPressの情報を中心に毎日更新している(http://www.h-fj.com/blog/)。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています