jQueryでWebサービスに触れてみる
「楽天Webサービス」を使ってみる
「RESTなWebサービスの利用／開発」の第2回として、JavaScriptを使ってWebブラウザだけでWebサービスにアクセスする例を紹介します。「楽天Webサービス」を例に取り上げ、「jQueryを使ってJSONPで通信を行ってデータを取得し、Webページに結果を表示する」までの一連の流れを解説します。
前回はWebサービスの概要を解説しましたが、抽象的な概論だったので、いまいち実感が沸かなかったかも知れません。そこで今回は、簡単なプログラムを作ってみて、実際にWebサービスを使ってみる例を紹介します。特に開発環境がなくても試せるように、jQueryを利用して、WebブラウザだけでWebサービスを体験できるようにします。
Webサービスは多数ありますが、今回は「楽天Webサービス」の「楽天商品検索API」を例として取り上げます。楽天Webサービスとは、ECサイトの楽天で取り扱っているさまざまな商品やサービスのデータをWebサービス経由で得られるようにするサービスです。
Web連携システムにおいては、プログラムからWebサービスにアクセスする仕様のことを、一般に「API」（Application Programming Interface）と呼びます。Webサービス経由で利用できる各種の機能をアプリケーション・プログラムの機能の一部として利用できるようになります。楽天Webサービスでは、以下をはじめとして、多数のAPIを公開しています。
なお、上記の各APIを利用するには、楽天Webサービスの「デベロッパーID」を取得する必要があります。デベロッパーIDを取得するには、楽天に会員登録した上で、以下のアドレスにアクセスします。
https://webservice.rakuten.co.jp/account_developer_id/
Webブラウザで楽天Webサービスにアクセスしてみる
プログラムを作る前に、Webブラウザを通してWebサービスにアクセスしてみて、どのようなデータが得られるかを見ておきましょう。
Webサービスの個々のAPIでは、そのWebサービスにアクセスするするためのアドレスや、アクセスする際に渡すパラメータの書き方などが定義されています。楽天Webサービスの「楽天商品検索API」では、以下のページでAPIの仕様を解説しています。
http://webservice.rakuten.co.jp/api/itemsearch/
このページを見ると、多数のパラメータが定義されています。ただ、必須のパラメータはそう多くはありません。キーワードを指定して商品を検索するには、下記の【リスト1】のようなアドレスにアクセスすれば良いことが分かります。
なお、読みやすくするためにアドレス（URL文字列）を改行して書いていますが、実際には1行につなげます。また、検索のキーワードなどのパラメータは、UTF-8でURLエンコードする必要があります。
【リスト1】 商品検索APIのアドレス
例えば、デベロッパーIDが「1234567890abcdef1234567890abcdef」の人が、「Webサービス」というキーワードで商品を検索するなら、【リスト2】のようなアドレスにアクセスします。
【リスト2】 「Webサービス」のキーワードで商品を検索する場合のアドレス
実際に、上記のようなアドレスにWebブラウザでアクセスしてみると、「Webサービス」に関係する商品のデータが、XML形式で返されることが分かります（図1）。
次ページからは、JSONPを使って楽天Webサービスにアクセスする方法を解説します。
