使ってみよう! Windows Live SDK/API

第42回Windows Liveの本気!? 「Messenger Connect」使ってみよう!

はじめに

おひさしぶりです。今回の第42回は、前回から約1年と3ヶ月ぶりになります。Windows Live関連のSDK/APIは、1年前と比べいろいろと変化がありました。連載で扱っていたWebサービスはすべて古いSDK/APIとされ、今後の更新は期待できません。代わりに、Windows Live Messenger Connect(以下Messenger Connect)という新しいAPIが公開されています。

Messenger Connectを利用すると、HotmailやSkyDriveなどのWindows Liveサービスと統合したアプリを開発できます。流行のソーシャルアプリ開発にも大いに役立つことかと思います。TwitterやFacebookなどのサービスと連携したアプリとの統合も想定された、扱いやすいシンプルなAPIが提供されています。

Messenger Connectのリリース時に、Windows Liveの開発者向けサイトが刷新され、かつてないほどに多数のドキュメントとサンプルが提供されています。iOSやPHPのコードサンプルもGitHub上に公開されるなどWindows Liveチームの本気度が伺えます。今回から、このMessenger Connectを紹介していく予定です。よろしくお願いいたします。

Messenger Connect

Messenger Connectは、2010年6月にBeta版が公開されたWindows Live関連のAPIコレクションです。以前に提供されていた認証やユーザーデータのアクセスAPIなどの後継になります。登場後、さまざまな変更を経て、現在の最新はVersion 5.0です。

現在のMessenger Connectは、REST APIJavaScript APIで構成されています。主な機能は、アプリからWindows Liveのユーザーデータにアクセスできることです。APIによって、簡単にLiveサービスと統合したアプリ開発が可能になっています。JavaScript APIはWebアプリから利用しますが、デスクトップやモバイルアプリの開発も可能です。

次にMessenger Connectの特徴をいくつか紹介します。

OAuth 2.0サポート

アプリからWindows Liveのデータにアクセスするには、ユーザーから許可を得る必要があります。ユーザーがアプリに対して権限を許可する認可の仕組みは、OAuth 2.0という標準的なプロトコルを利用しています。

Windows LiveのユーザーデータアクセスAPIは、OAuthが流行する以前から提供されていました。以前のAPIではWindows Live独自の認可の仕組みを用いていましたが、Messenger ConnectではOAuthを採用し、一般的な手法により簡単にデータアクセスが可能になっています。

認可のフローの詳細は省略しますが、TwitterやFacebookの連携するアプリを利用した方であれば簡単にイメージがつくと思います。ユーザーは、アプリからWindows Live IDアカウントでサインインして、図4のような画面でアプリの要求するアクセスを許可します。

図1 認可画面
図1 認可画面

認可画面は、モバイル向けの画面も用意されています。

REST APIとJavaScript API

REST APIは、ユーザーデータのアクセスに利用します。すべての操作はHTTPメソッドで行い、レスポンスはJSON形式で取得します。

はじめてWindows LiveのAPIにふれる方であればあまり関係のないことですが、以前に提供されていたユーザーデータアクセスのAPIは複雑な構成で、送受信データはXMLをベースとしたAtom形式を採用していました。このAtomのプロトコルに準ずるため、アプリにとっては不要な情報までも扱い、煩雑さがありました。

最新のMessenger Connectでは、以前のバージョンから改良され、アクセスするURLの書式やレスポンスデータの内容が簡潔なものになり、使いやすくなっています。たとえば、https://apis.live.net/v5.0/me/albums にアクセスすると、ユーザーのSkyDriveのアルバムデータが得られます。

{
    "data": [
        {
            "count": 10, 
            "created_time": "2010-11-11T00:00:00+0000", 
            "description": "", 
            "from": {
                "id": "xxxxxxxxxx", 
                "name": "Sayaka Miki"
            }, 
            "id": "album.xxxxxxxxxx", 
            "link": "https://skydrive.live.com/redir.aspx?cid=xxxxxxxxxx&page=self&resid=xxxxxxxxxx&type=5", 
            "name": "Photo", 
            "type": "album", 
            "updated_time": "2011-11-11T11:00:00+0000"
        }
    ]
}

JavaScript APIは、REST APIと連携して動作するJavaScriptのライブラリーです。JavaScriptの記述だけで、認可のフローからWindows Liveのユーザーデータアクセスまで可能です。PHPなどによるサーバー側の処理は必要ありません。

JavaScript APIも非常にシンプルな構成で、認可の処理やREST APIの呼び出しが可能です。その簡潔さは、後述するアプリの作成でみてみましょう。

許可の種類

Messenger Connectで可能なユーザーデータの操作について紹介します。ユーザーが許可する内容は、いくつかに分類されています。アプリは、必要な操作のみ必要になった時点でユーザーに許可を要求します。この許可をOAuthではScopeと呼んでいます。

参照のみ可能なデータは次の通りです。

  • プロフィール(名前、性別、連絡先など)とコンタクトリスト(友だち)
  • メールアドレス
  • 誕生日
  • 電話番号
  • 住所
  • 役職と会社名
  • SkyDriveの写真とビデオ
  • 友だちの誕生日
  • 友だちの写真とビデオ

追加や投稿操作は、次の内容ができます。

  • カレンダーに予定の追加
  • 更新(アクティビティ)の投稿

少し特別なものとして次のものがあります。

  • 自動的にサインインする
  • アプリがいつでも情報にアクセスできるようにする

自動的にサインインは、Windows Liveサービスとシングルサインオンを可能にするものです。この許可を受けると、HotmailやSkyDriveなどのサービスでサインインした状態でアプリにアクセスすると、すぐにWindows Liveのデータにアクセスできる状態になります。またアプリでサインアウト操作を行うと、Hotmailなどのサービスからもサインアウトされた状態となります。

後者のいつでもアクセスは、ユーザーがアプリを使用していないときでも、ユーザーデータにアクセスするための許可です。

以上に、開発用の特殊な許可を加えたものが、Messenger Connectで可能な操作です。

アプリの作成

今回は、JavaScript APIを利用したWindows Liveサービスに接続するミニマムなWebアプリを作ってみましょう。作成するアプリは、ユーザーの名前を表示する簡単なものです図1⁠。PHPなどによるサーバー側の処理を記述する必要はなく、少量のコードだけで、認可プロセスとユーザーデータのアクセスが可能なことがわかるかと思います。

図2 サンプルアプリ

図2 サンプルアプリ

アプリの登録

最初に、アプリケーション設定サイトで、アプリの登録(作成)を行います図2⁠。ここでは、英数字とアンダースコア(_)から成る名前しか付けられませんが、後から日本語で名前を付けられます。

図3 アプリの登録
図3 アプリの登録

「I accept」ボタンをクリックすると、Client IDClient secretの値が表示されます。JavaScript APIで使用するのはClient IDだけです。この値をメモしておきましょう。

続いて、アプリの設定ページに移動します。左のメニューの「API Settings」を選択し、Redirect DomainにWebアプリを配置するドメインを設定します図3⁠。Webアプリの場合、この設定が必須です。デスクトップアプリの場合は不要です。

図4 ドメインの設定
図4 ドメインの設定

その他の項目では、アプリのアイコンや名前を設定可能です。

Webページの作成

Webアプリのページを作成しましょう。まず元となるHTMLファイルを次のように作ります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>Messenger Connect Sample</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="signInButton"></div>
        <div id="message"></div>
    </body>
</html>

必須ではありませんが、上記コードではjQueryのライブラリーを参照しています。idがsignInButtonの<div>要素は、Windows Liveサービスへサインインするためのボタン表示位置になります。idがmessageの<div>要素には、サインインしたユーザー名を表示します。

ライブラリーの参照

JavaScript APIのライブラリーを参照します。次の<script>要素を<head>要素内に追加します。

<script src="https://js.live.net/v5.0/ja/wl.js" type="text/javascript"></script>

パスにjaが含まれているように、上記の場合は日本語向けのライブラリーです。また、デバッグ用にファイル名を次のように変更することで、圧縮されていないコメント付きのライブラリーも参照できます。

<script src="https://js.live.net/v5.0/ja/wl.debug.js" type="text/javascript"></script>

以上でWebアプリの準備ができました。続いて、メインの処理を記述していきます。

コードの記述

<script>要素を追加し、JavaScriptのコードを記述します。

初期化関連

最初に初期化関連の処理です。処理内容は次の通りです。

  • サインイン・サインアウト イベントの関連付け
  • JavaScript APIの初期化
  • サインインボタンの描画

ライブラリーを参照すると、WLオブジェクトが使えます。このWLオブジェクトを使って必要な処理を呼びます。

コードは次のようになります。

$(function() {
  // サインイン・サインアウト時に実行する関数をイベントに関連付け
  WL.Event.subscribe("auth.login", onLogin);
  WL.Event.subscribe("auth.logout", onLogout);

  // API の初期化処理
  WL.init({
      client_id: "Your Client ID",
      redirect_uri: "http://***.jp/sample.html"
  });

  // サインインボタンの描画
  WL.ui({
      name: "signin",
      element: "signInButton",
      scope: ["wl.signin", "wl.basic"]
  });
});

WL.initメソッドの引数には、アプリ登録時のClient IDとWebアプリのあるURLを指定してください。WLオブジェクトの詳細については次回以降に紹介します。

サインイン時の処理

記述したWL.Event.subscribeメソッドによって、ユーザーがサインインした時にonLogin関数が呼ばれます。この内容を記述します。

サインイン時の処理は次の通りです。

  • 有効なセッション情報を取得できているか確認
  • REST APIでユーザー情報にアクセスし、名前を表示

コードは次のようになります。


function onLogin() {
    // セッション情報の取得 (取得できない場合は処理を抜ける)
    var session = WL.getSession();
    if (!session) {
        return;
    }

    // REST API の呼び出し
    WL.api({
        path: "/me",
        method: "GET"
    }, function (response) {
        if (!response.error) {
            $("#message").text("こんにちは " + response.name + " さん");
        } else {
            $("#message").text(response.error.message);
        }
    });
}

WL.apiメソッドで簡単にREST APIにアクセス可能です。

サインアウト時の処理

サインアウトした場合は、onLogout関数を呼ぶように、イベントを関連付けしています。最後に、サインアウトしたとき、表示した名前を削除する処理を記述します。

function onLogout() {
    $("#message").text("");
}

以上でアプリの完成です。

アプリの実行

登録時に設定したドメイン下にアップロードして動作を確認してみましょう。アプリを登録して間もない場合は、認可プロセスでエラーが出るようです。

今回のアプリでユーザーに求めている許可は次のふたつです。

  • 自動的にサインインする
  • プロフィール情報を参照する

実は、プロフィール情報のアクセス許可を得ずとも、名前は参照可能な基本情報です。何かしらの許可が得られると、基本的な情報は取得できます。

自動的にサインインする許可を得たことによって、シングルサインオンが可能になっています。アプリ上でサインアウトすると、HotmailなどのWindows Liveサービスでもサインアウトされた状態になっています。逆にHotmailにサインインした後、アプリを開くとサインインした状態で表示されるので確認してみましょう。

ユーザーはいつでもアプリに与えた権限を、共有する情報の管理ページから取り消し可能です。併せて確認してみてください。

おわりに

今回はここまでです。いかがでしたでしょうか。ひさしぶりのWindows Live SDK/APIの記事でした。Windows Liveチームが力を入れているMessenger Connectについて紹介しました。今後、少しずつMessenger Connectを利用したアプリ開発について紹介していく予定です。お楽しみに!

おすすめ記事

記事・ニュース一覧