本記事の対象APIは既にサポートされていません。記事は参考程度にご利用ください。
クライアントでAPI操作
前回はWindows Live Application Based Storage APIを利用したWebアプリケーションを作成しました。ASP.
今回はMicrosoft Inter-frame Messaging XMLHttp APIを利用して、
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が利用でき、
ただし、
IFM XMLHttp APIの利用の準備
コードの参照
実際にIFM XMLHttp APIを利用してみましょう。利用するにはWebページのHTMLコードに、
<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を利用するため、
<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メソッドを呼び出し、
// （lidはユーザーデータを示す識別子が格納されているものとする)
xmlhttp.open("GET", 'https://cumulus.services.live.com/@C@' + lid + '/AtomApplicationStorage/RootFolders');上記コードに示すように、
委任認証にはAuthorizationヘッダの指定が必要でした。setRequestHeaderメソッドを使用してヘッダの指定が可能です。引数にはヘッダの名前とその値を指定します。
// （deltは委任トークンが格納されているものとする)
xmlhttp.setRequestHeader('Authorization', 'DelegatedToken dt="' + delt + '"');実際にリクエストを送信するにはsendメソッドを使用します。
xmlhttp.send(null);sendメソッドの引数には、
レスポンスの受信
リクエストを送信後、
レスポンス受信時に使用できるXMLHttpRequestクラスのプロパティは次の表のものがあります。
| プロパティ名 | 説明 |
|---|---|
| Readystate |
リクエストの処理状況を示す数値 0: 未初期化 1: 未送信 2: 送信完了 3: 受信中 4: 受信完了 |
| responseText | 受信した内容 |
| responseXML | 受信した内容 |
| status | HTTPステータスコード |
| statusText | HTTPステータスを示す文字列 |
リクエスト送信からレスポンス受信を含む、
<script type="text/javascript">
var xmlhttp = new Microsoft.Live.Channels.XMLHttpRequest(
'https://cumulus.services.live.com/@xhrproxy',
'Channel.htm',
'https://cumulus.services.live.com/@xhrproxy?name=channel');
function request() {
var lid = Microsoft.Live.Platform.getCookie("lid");
var delt = Microsoft.Live.Platform.getCookie("delt");
function onreadystatechange() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.onreadystatechange = onreadystatechange;
xmlhttp.open("GET", 'https://cumulus.services.live.com/@C@' + lid + '/AtomApplicationStorage/RootFolders');
xmlhttp.setRequestHeader('Authorization', 'DelegatedToken dt="' + delt + '"');
xmlhttp.send(null);
}
</script>上記のコードは、
前回で作成したWebアプリケーションもこのようにCookieを使用していますので、
次のように何らかの方法で作成requestメソッドを呼ぶと図1のようなウィンドウが表示される結果となります。
<input type="button" onclick="request();" value="Request" />
以上で、
XMLの解析
レスポンスの受信で示したコードは単に受信したXMLデータを表示しているだけでしたが、
受信完了後、
Feed形式の場合、
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
xmlns:AS="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
xmlns:AppStorage="http://dev.live.com/AppStorage"
xmlns:Live="LiveAtomBase:">
...
<entry AS:type="Folder">
<category scheme="http://dev.live.com/AppStorage/scheme" term="Folder" label="Folder" />
<id>https://cumulus.services.live.com/@C@[LID]/AtomApplicationStorage/RootFolders(136)/Items('150F')</id>
...
<title>Sample</title>
...
<link href="https://cumulus.services.live.com/@C@[LID]/AtomApplicationStorage/RootFolders(136)/Items('150F')/Items" rel="related" type="application/atom+xml;type=feed" title="Items" />
...
</entry>
<entry AS:type="Photo">
...
</entry>
<entry AS:type="Document">
...
</entry>
</feed>ここから、
onreadystatechangeプロパティに指定するコールバック関数をひとまず次のように記述します。if文の条件式は、
function onreadystatechange() {
if (!(xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseXML)) {
return;
}
}このif文以降にコードを追記していきます。
まず<feed>要素を示すオブジェクトを変数feedに格納します。
var responseXML = xmlhttp.responseXML;
// feed 要素の取得
var feed;
for (var i = 0; i < responseXML.childNodes.length; ++i) {
var xml = responseXML.childNodes[i];
if (xml.localName == "feed" || xml.baseName == "feed") {
feed = xml.childNodes;
break;
}
}<feed>要素内にある各<entry>要素について操作します。アイテムの名前は<tilte>、
// entry 要素の列挙
for (var i = 0; i < feed.length; ++i) {
if (feed[i].localName != "entry" && feed[i].baseName != "entry") {
continue;
}
var entry = feed[i].childNodes;
var path;
var title;
// entry 要素内の title, id 要素の値取得
for (var j = 0; j < entry.length; ++j) {
if (entry[j].localName == "title" || entry[j].baseName == "title") {
title = entry[j].text || entry[j].textContent;
if (path) break;
} else if (entry[j].localName == "id" || entry[j].baseName == "id") {
path = entry[j].text || entry[j].textContent;
if (title) break;
}
}
// entry 要素の AS:type 属性値の取得
var type = feed[i].getAttribute("AS:type");
// 表示
if (title && path && type) {
alert(title + "\n" + path + "\n" + type);
}
}以上を実行すると図2のようなウィンドウが表示され、
POSTデータの送信
フォルダの作成
POSTデータを送信する方法も確認しておきましょう。フォルダを作成する場合、
<entry xmlns="http://www.w3.org/2005/Atom" xmlns:LP="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:LivePhotos="http://dev.live.com/photos" LP:type="Folder">
<category scheme="http://dev.live.com/AppStorage/scheme" term="Folder" label="Folder" />
<title>[フォルダ名]</title>
</entry><entry>要素のPOSTデータを送信するには、
xmlhttp.setRequestHeader('Content-Type', 'application/atom+xml');そして、
var folder = 'New Folder'; // 作成するフォルダ名
var path = 'RootFolders(124)/Items'; // 作成する場所
var post = '<entry xmlns="http://www.w3.org/2005/Atom" xmlns:LP="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:LivePhotos="http://dev.live.com/photos" LP:type="Folder">' +
'<category scheme="http://dev.live.com/AppStorage/scheme" term="Folder" label="Folder" />' +
'<title>' + folder + '</title>' +
'</entry>';
xmlhttp.onreadystatechange = onreadystatechange;
xmlhttp.open("POST", 'https://cumulus.services.live.com/@C@' + lid + '/AtomApplicationStorage/' + path);
xmlhttp.setRequestHeader('Authorization', 'DelegatedToken dt="' + delt + '"');
xmlhttp.setRequestHeader('Content-Type', 'application/atom+xml');
xmlhttp.send(post);レスポンス時の処理をみてみましょう。フォルダ作成に成功した場合のHTTPステータスコードは201
function onreadystatechange() {
if (xmlhttp.readyState != 4) {
return;
}
alert(xmlhttp.statusText);
if (xmlhttp.status == 201) {
// フォルダ作成に成功した場合
alert(xmlhttp.getResponseHeader('Loaction'));
} else if (xmlhttp.status == 409) {
// 同名のフォルダあった場合
alert(xmlhttp.statusText);
}
}上記コードでは作成に成功した場合は、
ファイルのアップロード
同じPOSTメソッドを使用するファイルのアップロードについても確認しておきましょう。POSTデータにはアップロードするファイルのデータを格納してリクエスト送信します。
ただし、
追加するファイル名の指定はslugヘッダを使用します。以上を踏まえるとファイルアップロードのコードは次のようになります。
var file = 'New File'; // 作成するファイル名
var path = 'RootFolders(124)/Items'; // 作成する場所
var post = 'Content'; // ファイルの内容
xmlhttp.onreadystatechange = onreadystatechange;
xmlhttp.open("POST", 'https://cumulus.services.live.com/@C@' + lid + '/AtomApplicationStorage/' + path);
xmlhttp.setRequestHeader('Authorization', 'DelegatedToken dt="' + delt + '"');
xmlhttp.setRequestHeader('slug', file);
xmlhttp.setRequestHeader('Content-Type','text/plain');
xmlhttp.send(post);おわりに
いかがでしたでしょうか。前回のようにユーザーデータ操作のすべてについては触れませんでしたが、
以上のようにApplication Based Storage APIとIFM XMLHttp APIを使用すればほとんどの処理をJavaScriptで行うことができ、
XML解析で示したコードは非常にわずらわしいものだったかと思います。JavaScriptでXML操作はあまり向いていません。Windows Live SDKにはこの点に関して便利なライブラリは用意されていませんので、