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
• 楽天ブックス総合検索API
• 楽天オークション商品検索API
• 楽天トラベル施設検索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サービスにアクセスする方法を解説します。