PR

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

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

「楽天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サービスにアクセスする方法を解説します。

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

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

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

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

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