Yahoo!検索とLiveガジェットのマッシュアップ：Windows Liveが魅せる次世代マッシュアップ（2/5 ページ）

[大澤文孝，ITmedia]

　受信完了後のネットワークリクエストオブジェクトは、コンストラクタの第2引数として得られるオブジェクトのxmlSourcesコレクションを使って取得できる。

　前ページの例では、「mydata」という名前で定義しているため、

var response = m_args.xmlSources["mydata"];

として取得できる。

　このオブジェクトは、ネットワークリクエストオブジェクトそのものであり、responseTextプロパティでその文字列を得たり、responseXMLプロパティでDOMオブジェクトを取得したりできる。

　そのため、マニフェストに定義するという方法を使えば、外部サーバからデータを読み込む処理がinitializeメソッド内だけで完結し、コールバック関数を用意する必要がなくなる（リスト6）。

リスト6：リスト5に定義した外部XMLを読み取ってLiveガジェット内に表示する

Webサービスを呼び出す

　ネットワークリクエストオブジェクトでは、AJAXと同様に、Webサービスを呼び出すことも可能だ。特にREST形式の場合には、その呼び出しは簡単だ。

　GETメソッドの場合には、URLの後ろにパラメータを付ければよい。

　例えば、次のようにすればYahoo! JAPANの｢検索Webサービス」を使い、「ウィンドウズ」という語句を検索した上でその結果をガジェット内部へと表示できるのだ。

var url = 
  "http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?";
url += "appid=" + 自分のアプリケーションID;
url += "&query=" + encodeURI("ウィンドウズ");
var response = Web.Network.createRequest(
  Web.Network.Type.XMLGet, url, 
  null, OnXmlDataReceived);
response.execute();

　ここでは、Yahoo! Webサービスの解説は割愛する。Yahoo! Webサービスについては、「Yahoo!デベロッパーネットワーク」を参照してほしい（関連リンク）。

　結果をパースするOnXmlDataReceived関数は、例えば次のように実装する。

function OnXmlDataReceived(response, arg)
{
  if (response.status == 200)
  {
    // 成功している
    var rootnodes = 
      response.responseXML.documentElement;
    // Result要素を取得
    var result = 
      rootnodes.getElementsByTagName("Result");
    // それぞれの要素をループ処理
    for (var i = 0; i < result.length; i++)
    {
      // p要素を作る
      var pElement = document.createElement("p");
      // a要素を作る
      var aElement = document.createElement("a");
      // 検索結果のURLをリンク先として設定
      aElement.href = 
        result[i].getElementsByTagName(
        "Url")[0].text
      // タイトルをリンク文字として設定
      aElement.innerText = 
        result[i].getElementsByTagName(
          "Title")[0].text
      // 子要素として設定
      pElement.appendChild(aElement);
      m_el.appendChild(pElement);
    }
  }
}

　実行結果は、画面5のようになる。

画面5■LiveガジェットにYahoo!の検索結果を入れた例