クライアントでAPI操作

前回はWindows Live Application Based Storage APIを利用したWebアプリケーションを作成しました。ASP.NETを使用し，APIによるユーザーデータ扱う処理のほとんどはWebアプリケーションをホストしているサーバ側で処理していました。

今回はMicrosoft Inter-frame Messaging XMLHttp APIを利用して，ユーザーデータの操作処理の多くをWebブラウザで行う方法を紹介します。APIを利用すると，クライアントとWindows Live サービスのサーバ間の通信となり，Webアプリケーションサイトへの負荷を軽減できます。

Microsoft Inter-frame Messaging XMLHttp API

Microsoft Inter-frame Messaging (IFM) XMLHttp APIはHTTPによりサーバとデータを非同期で送受信するためのJavaScriptライブラリです。Application Based Storage APIによるユーザーデータの操作に特化したライブラリではありませんが，少なくとも組み合わせた利用が想定されています。

これまで利用していたApplication Based Storage ATOM APIはHTTPによるXMLベースのプロトコルを使用しています。そのためユーザーデータへのアクセスにこのIFM XMLHttp APIが利用でき，両APIを組み合わせて利用することで多くの処理をクライアント側で完結できます。

ただし，すべてをクライアント側で処理することはできません。Windows Live委任認証を利用するにPOSTデータを承認要求ページから受け取り処理する必要がありますが，JavaScriptだけでは不可能です。ある程度Webアプリケーションのサーバでの処理も必要になります。

IFM XMLHttp APIの利用の準備

コードの参照

実際にIFM XMLHttp APIを利用してみましょう。利用するにはWebページのHTMLコードに，次のようにライブラリを参照する記述をheadタグ内に追加します。

<script type="text/javascript" src="https://controls.services.live.com/scripts/base/v0.3/ifmxmlhttp.js"></script>

ほかにもWindows Liveサービス系のライブラリを参照しておきます。後ほどのコードで使用します。

<script type ="text/javascript" src = "https://controls.services.live.com/scripts/base/v0.3/live.js"></script>

Channelファイルの作成

IFM XMLHttp APIを利用するため，Channelファイルと呼ばれるHTMLファイルを作成しWebアプリケーションサーバ上に置く必要があります。通常，ファイル名をChannel.htmとし，その内容は以下のようにJavaScriptコードを参照するようにします。

<script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/channelreceiver.js"></script>

リクエストの作成と送信

リクエストを送信するまでのコードを書いてみましょう。ライブラリはXMLHttpRequestというクラスのみを持っています。これを使用してサーバと通信します。インスタンスを生成するコードは次のようになります。

var xmlhttp = new Microsoft.Live.Channels.XMLHttpRequest(
    "https://cumulus.services.live.com/@xhrproxy",
    "Channel.htm",
    "https://cumulus.services.live.com/@xhrproxy?name=channel");

コンストラクタ引数は先頭から順に以下の通りです。

proxyURL

Windows Liveサービス上のXMLHttpプロキシと呼ばれるサーバへのURLになります。「https://cumulus.services.live.com/@xhrproxy」を指定します。

parentChannelURL

Channelファイルのパスを指定します。省略すると「Channel.htm」が指定されたことになります。

proxyChannelURL

Windows Liveサービス上のChannelファイルのURLです。「https://cumulus.services.live.com/@xhrproxy?name=channel」を指定します。

次にXMLHttpRequestクラスのonreadystatechangeプロパティにリクエストの応答を受け取るコールバック関数を指定します。

// （onreadystatechangeというfunctionを指定した場合）
xmlhttp.onreadystatechange = onreadystatechange;

続いてopenメソッドを呼び出し，HTTPメソッドおよびリクエストするURLを指定します。まだこの時点ではサーバにリクエストが送信されません。たとえば，次のようなコードになります。

// （lidはユーザーデータを示す識別子が格納されているものとする)
xmlhttp.open("GET", 'https://cumulus.services.live.com/@C@' + lid + '/AtomApplicationStorage/RootFolders');

上記コードに示すように，openメソッドの引数の先頭にはGETやPOSTなどのHTTPメソッドを示す文字列を指定します。続いて，リクエストするURLを指定します。

委任認証にはAuthorizationヘッダの指定が必要でした。setRequestHeaderメソッドを使用してヘッダの指定が可能です。引数にはヘッダの名前とその値を指定します。

// （deltは委任トークンが格納されているものとする)
xmlhttp.setRequestHeader('Authorization', 'DelegatedToken dt="' + delt + '"');

実際にリクエストを送信するにはsendメソッドを使用します。

xmlhttp.send(null);

sendメソッドの引数には，POSTメソッドによりデータを送信する場合にテキストまたはXML形式の文字列を指定します。