今回からはやや複雑なデータをAjax技術を用いてやり取りしてみることにしましょう。前回までの例では,サーバーから返されるデータは単純な文字列だったわけですが,もちろん,Ajaxアプリケーションでやり取りするのは,このような単純なデータばかりではありません。例えば,名前と住所,電話番号のような複合的な情報(構造データ)をやり取りしたい,というケースも多くあるはずです。

 このような構造データをクライアント/サーバー間で交換するにはいくつかの方法がありますが,最も一般的なのはXML(eXtensible Markup Language)形式を利用する方法でしょう。XMLでは,HTMLにもよく似たタグの形式で構造化されたデータを記述することができます。例えば,リスト1はXMLで記述された住所データの例です。

リスト1●XML形式で記述された住所データの例
<?xml version="1.0" ?>
<data>
  <name>山田祥寛</name>
  <address>千葉県小金井市静波0-0-00</address>
  <tel>000-000-0000</tel>
</data>

 XML自体はなんの変哲もないテキスト形式ですので,使用しているプラットフォームに依存しないのが特徴です。XMLはすでにインターネット上の標準的なデータ交換言語として,RSS配信やWebサービスなどにおいて日常的に利用されています。XMLそのものについては本稿のテーマを外れますので,本サイトの別連載「動かして覚えるXML入門」,拙著「10日でおぼえるXML入門教室」(翔泳社)などを参照してください。

「Yahoo! ウェブ検索Webサービス」とは?

 今回紹介するサンプル・アプリケーションは,「Yahoo! ウェブ検索Webサービス」をAjaxアプリケーションから利用する例です(図1)。

 「Yahoo! ウェブ検索Webサービス」はYahoo!が提供しているサービスの一つで,これを利用することで,Yahoo!が提供する検索エンジンをあたかも自前のアプリケーション上で動作しているかのように動作することが可能になります(図2)。

 Yahoo! ウェブ検索Webサービスのしくみは単純です。あらかじめ決められたURLに対して検索に必要なパラメータ()を引き渡すだけです。指定可能なパラメータは多く用意されていますが,最低限の検索機能を実装するだけならば,まずは「appid(アプリケーションID)」と「query(検索文字列)」だけを指定しておけば問題ありません。アプリケーションIDとは,Yahoo! ウェブ検索Webサービスを利用するアプリケーションを識別するためのキーとなるものです。「Yahoo! デベロッパーネットワーク」から登録できますので,あらかじめ手続きを済ませておきましょう。

 まずは,ブラウザ上からYahoo! ウェブ検索Webサービスの動作を確認してみましょう。ブラウザから以下のようなURLでサービスにアクセスします。ここでは「山田祥寛」というキーワードで検索しているわけです。繰り返しですが,appidパラメータの部分は,適宜,自分で取得したアプリケーションIDに置き換えてください。

  http://api.search.yahoo.co.jp/WebSearchService/V1/
webSearch?appid=wings-project&query=山田祥寛

 検索キーワードでヒットした結果が,以下のようにXML形式で出力されれば成功です。結果XMLに含まれるタグの意味については,「Yahoo!デベロッパーネットワーク - ウェブ検索」のページを参照してください。

<?xml version="1.0" encoding="UTF-8" ?> 
  <ResultSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="urn:yahoo:jp:srch"
    xsi:schemaLocation="urn:yahoo:jp:srch http://api.search.yahoo.co.jp/
        WebSearchService/V1/WebSearchResponse.xsd"
    totalResultsAvailable="32200" totalResultsReturned="10"
    firstResultPosition="1">
    <Result>
      <Title>サーバサイド技術の学び舎 - WINGS</Title> 
      <Summary>サーバサイド技術(JSP/サーブレット,ASP.NET...</Summary>
      <Url>http://www.wings.msn.to/</Url> 
      <ClickUrl>http://wrs.search.yahoo.co.jp/S=96857362/...</ClickUrl> 
      <ModificationDate>1148655600</ModificationDate> 
      <MimeType>text/html</MimeType> 
      <Cache>
        <Url>http://wrs.search.yahoo.co.jp/S=96857362/...</Url> 
        <Size>23586</Size> 
      </Cache>
    </Result>
  ~ 略 ~
  </ResultSet>

サーバーサイドからYahoo! ウェブ検索Webサービスを利用してみよう

 ブラウザからアクセスした結果を確認できたところで,次に同様のしくみをPHP(PHP:Hypertext Preprocessor)アプリケーションで作成してみましょう(リスト2)。

リスト2●Yahoo! ウェブ検索WebサービスにアクセスするPHPプログラム(yahoo.php)
<?php
// 出力/内部文字コードをUTF-8に設定
mb_http_output('UTF-8');
mb_internal_encoding('UTF-8');
header('Content-Type: text/xml;charset=UTF-8');
$url ='http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?';
$url.='appid=wings-project&query='
      .urlencode(mb_convert_encoding($_GET['keyword'],'UTF-8','auto'))
      .'&'.'result=15';
print(file_get_contents($url));
?>

 例によって,PHPの細かな構文についての説明は省略します。ここでは入力された値(検索キーワード)をもとに問い合わせURLを作成し,その結果を取得しているとだけ理解しておけば良いでしょう。file_get_contents関数は,指定されたURL($url)にアクセスした結果を文字列として取得するための命令です。

 以下のようなURLでサーバーサイドにアクセスし,先ほどと同様の結果が得られれば成功です。サンプルの実行結果はオンラインで確認できますので,実際にブラウザ上からアクセスして試してみることにしましょう。

  http://www.wings.msn.to/ajax/yahoo.php?keyword=山田祥寛

 いかがですか? 先ほどと同様,指定したキーワードによる検索結果がXML形式で表示されれば成功です。今回は,サーバーサイドの解説でAjaxとはやや関係がない内容になってしまいましたが,次回はいよいよ,サーバーサイドで得た結果をクライアントサイドのAjaxで処理する方法についてご紹介します。

山田祥寛(やまだ よしひろ)

Microsoft MVP for ASP/ASP .NET。執筆コミュニティ「WINGSプロジェクト」の代表でもある。主な近著に「XMLデータベース入門」「PEAR入門」「Smarty入門」「10日でおぼえる入門教室シリーズ(Jakarta・JSP/サーブレット・PHP・XML)」(以上,翔泳社),「今日からつかえるサンプル集シリーズ(JSP&サーブレット・PHP5・ASP・XML)」(以上,秀和システム),「書き込み式 SQLのドリル」(ソシム),「JSP/PHP/ASPサーバーサイドプログラミング徹底比較」(技術評論社)など。最近では,IT関連技術の取材,講演,監修まで広く手がける毎日。