PR

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

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

得られたデータを表示する

次に、前ページのJavaScriptに「得られたデータを処理する部分」の実際の処理を追加します。

前述したように、アクセスするAPIによって、得られるデータの構造はさまざまです。楽天Webサービスの商品検索APIの場合、得られるデータは図3-1のような構造のオブジェクトになります。

オブジェクトの「Body」→「ItemSearch」→「Items」→「Item」プロパティが、検索された商品の情報を表す配列になります。また、配列の各要素には「itemName」などのプロパティがあり、商品の詳細な情報を得ることができます。これらのプロパティを基にHTMLを整形してWebページに追加すれば、検索結果を一覧表示できます。

例えば、図3-2のように商品名/商品画像/値段/店舗名の情報を表示する場合、前ページの【リスト5】の「得られたデータを処理する部分」を、以下の【リスト6】のように書きます。

【リスト6】 得られたデータを元に商品を一覧表示する

'; for (var i = 0, j = items.length; i ';      html += '' + item.itemName + '
';      html += '' + item.itemName + '
';      html += item.itemPrice + '円
';      html += '' + item.shopName + '';      // IDが「search_result」の要素にHTMLを流し込む      $('#search_result').html(html); } ]]>

まとめと次回の内容

ここまでで作ったJavaScriptを含むHTMLファイルは、以下のアドレスにアップロードしてあります。実際に動作を試すことができます。
http://www.h-fj.com/thinkit/rest/jquery.html

このページに接続すると、キーワードの入力欄と「検索」のボタンが表示されます。実際にキーワードを入力して、「検索」ボタンをクリックすると、図3-2のように検索結果が表示されます。

今回はjQueryを使って、Webサービスに触れる例を紹介しました。今回の例のように、JSONPを使えるWebサービスであれば、JavaScriptだけで簡単にWebサービスを扱うことができます。

しかし、Webサービスによっては、認証が必要だったり、XMLでしかデータを提供していなかったりなど、複雑な処理が必要な場合もあります。次回は、こうした複雑なWebサービスにアクセスする例を取り上げます。

【参考文献】
『RESTful Webサービス』(Leonard Richardson、Sam Ruby著、山本 陽平監修、株式会社クイープ翻訳)(発行年:2007)

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

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

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

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

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