数行の JavaScript で Hotmail、Messenger、SkyDrive とつながる

Article
07/13/2011

みなさん、こんにちは。Windows 開発統括部の古内です。

Windows 7 のタスクバー特集を始めたばかりですが、早速中断して、今日は Windows Live に関する最近の記事をご紹介します。 Inside Windows Live Blog に 2011 年 6 月 29 日に投稿された「Developers: just a few lines of JavaScript connects your site to Hotmail, Messenger, and SkyDrive」の翻訳で、ご自分の Web ページを充実させるためのヒントになれば幸いです。

なお、Windows Live に関する情報は、弊社 Windows Live チームが運営する「Windows Live 最新情報ブログ」でも提供されています。Windows Live 最新情報ブログでは、開発者を対象とした英語ブログ記事の翻訳 (ここ Windows 開発統括部 Blog で提供しているものと重複するものもあります) だけでなく、一般ユーザー向けの Windows Live 関連情報も提供されていますので、どうぞ併せてご活用ください。

開発者向け情報: たった数行の JavaScript コードで、Web サイトが Hotmail、Messenger、SkyDrive とつながる

最近の開発者は必ずと言っていいほど、Facebook、Twitter、Google、Hotmail といったさまざまな Web プラットフォームをサイトに統合しています。こうした状況から、マイクロソフトは、開発者が他のプラットフォームとマイクロソフトのプラットフォームを使って、簡単に Messenger、SkyDrive、Hotmail とWeb サイトを接続できるよう尽力してきました。この目標を達成するためにマイクロソフトが重視してきた理念は以下のとおりです。

数行の JavaScript コードを記述するだけで、強力な統合を実現する。 数行のスクリプトを追加するだけで、シングルサインオン (ユーザーの承認が必要) を実現し、Hotmail や Messenger、SkyDrive のアカウントを利用してアプリケーションが特定のデータにアクセスできるようにします。また、一般的なケースの場合、サーバー側のコードは一切必要ありません。
一般的な Web プラットフォームを使用する開発者になじみのある Messenger Connect JavaScript API を実現する。 一般的な Web プラットフォームを既に利用している Web 開発者にとってなじみのある API を設計します。
マイクロソフトの API と他のサービスを 1 つのページ上で統合しても、サイトが煩雑にならないようにする。 他の Web プラットフォームの機能とともに Messenger Connect を簡単かつ効率的に利用できるようにし、開発者やエンドユーザーに不都合をきたさないようにします。

マイクロソフトは、この理念に沿った新しい JavaScript ライブラリを設計しました。開発者はこのライブラリを Web サイトに組み込むことで、Hotmail、Messenger、SkyDrive などのサービスを統合し、シングルサインオンを実現することができます。

ここからは、理念について具体的にご紹介していきます。

数行の JavaScript コードを記述するだけで、強力な統合を実現する

以下に示す自己完結型のサンプルコードは、あらゆる Web サイトで実行することができます。このサンプルコードは下のような [Connect] ボタンを表示します。ユーザーがこれをクリックすると特定の Web サイトに接続され、ユーザー名が入ったメッセージが表示されます。

以下のサンプルコードの client_id と redirect_uri は、実際にはアプリケーション設定サイト (英語) から取得できる開発者用クライアント ID とリダイレクト先の HTML ページの URL に、それぞれ置き換える必要があります。

 <html><head>
    <title>Greeting the User Test page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
<script src="//js.live.net/v5.0/wl.js" type="text/javascript"></script>
    <script type="text/javascript">
        var APPLICATION_CLIENT_ID = "YOUR CLIENT ID",
        REDIRECT_URL = "YOUR REDIRECT URL";
        WL.Event.subscribe("auth.login", onLogin);
        WL.init({
            client_id: APPLICATION_CLIENT_ID,
            redirect_uri: REDIRECT_URL,
            response_type: "token"
        });
        
        WL.ui({
            name: "signin",
            element: "signInButton",
            brand: "hotmail",
            type: "connect"
        });

        function greetUser(session) {
            var strGreeting = "";
            WL.api(
            {
                path: "me",
                method: "GET"
            },
            function (response) {
                if (!response.error) {
                    strGreeting = "Hi, " + response.first_name + "!"
                    document.getElementById("greeting").innerHTML = strGreeting;
                }
            });
        }
     
        function onLogin() {
            var session = WL.getSession();
            if (session) {
                greetUser(session);              
            }
        }
    </script>
</head>
<body>
    <p>Connect to display a welcome greeting.</p>
    <div id="greeting"></div>
    <div id="signInButton"></div>
</body>
</html>

上記のサンプルコードには重要なポイントが多数含まれているので、ここで簡単に解説したいと思います。JavaScript SDK を使用するには、まずはじめに wl.js スクリプトファイルを自身の Web ページに読み込みます。

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

英語圏のユーザーが対象でない場合は、さまざまな言語のユーザー向けに、文字列がローカライズされているバージョンの JavaScript ライブラリを読み込むとよいでしょう。

Messenger Connect JavaScript API を読み込んだ後は、以下のようにこの JavaScript API を使っていくつかの設定手順を実行し、ページのコンポーネントを関連付けます。

 WL.Event.subscribe("auth.login", onLogin);
WL.init({
            client_id: APPLICATION_CLIENT_ID,
            redirect_uri: REDIRECT_URL,
            response_type: "token"
        });

WL.Event.subscribe 呼び出しを上記のように記述すると、ユーザーがログインに成功した後に onLogin() 関数が呼び出されます。また WL.init 呼び出しは、アプリケーションのクライアント ID と、ユーザーがサインイン後にリダイレクトされる URL を指定するために使用します。このサンプルでは、リダイレクト先はそのときに表示しているページです。

 WL.ui({
name: "signin",
element: "signInButton",
brand: "hotmail",
type: "connect"
});

WL.ui 呼び出しは、Hotmail への接続ボタンを描画するために使用します。上記のコードでは、接続ボタンを "signInButton" という名前の DIV 要素に関連付けています。ユーザーがサインインし、そのページがユーザーデータにアクセスすることをユーザーが承認すると、onLogin() 関数が呼び出されます。

 function onLogin() {
    var session = WL.getSession();
    if (session) {
        greetUser(session);              
    }
}

上記の関数は、有効なログインセッションが生成されたかどうかを確認します。有効なログインセッションが生成されている場合、以下に示す greetUser() 関数を呼び出します。

 function greetUser(session) {
    var strGreeting = "";
    WL.api(
    {
        path: "me",
        method: "GET"
    },
    function (response) {
        if (!response.error) {
            strGreeting = "Hi, " + response.first_name + "!"
            document.getElementById("greeting").innerHTML = strGreeting;
        }
    });
}

この関数は、JavaScript SDK の主要な機能である、WL.api を利用しています。この関数は、REST API 要求を作成するために使用します。このサンプルでは、"me" クエリを使用して現在のユーザーのユーザーオブジェクトを取得しています。ユーザーオブジェクトが取得されると、Web ページにユーザー名が表示されます。

一般的な Web プラットフォームを使用する開発者になじみのある Messenger Connect JavaScript API を実現する

マイクロソフトは、API の習得に手間がかからないようにするために、JavaScript を使って複数の Web プラットフォームを統合している開発者が使いやすいよう、Messenger Connect JavaScript API を設計しました。たとえば、Facebook や Twitter 用のソーシャルシェアリングを追加したり、SkyDrive フォトアルバムにアクセスするための機能や Hotmail カレンダーにイベントを追加するための機能を組み込みたい場合があると思います。

特定のユーザー名でサインインする、連絡先リストにアクセスする、写真を閲覧する、承認ダイアログを表示する、といったこの JavaScript API における一般的なタスクはいずれも、Facebook や Twitter などの一般的なプラットフォームで利用されているものと非常に似ています。そのため、こうした API のプログラミングになじみのある開発者は、簡単に SkyDrive や Hotmail、Messenger を習得し、自身の Web サイトと統合させることができます。

Hotmail、Messenger、SkyDrive と他のサービスを 1 つのページ上で統合しても、サイトが煩雑にならないようにする

通常、Web サイトは 1 つのサービスプロバイダーのみが統合されているわけではありません。Web サイト上で Facebook や Twitter といった複数のサイトへの共有を可能にしたり、Flickr、Facebook、SkyDrive などのサイトからユーザーが写真をアップロードできるようにするのが一般的です。

Web サイト上で複数の ID プロバイダーをサポートするうえでの課題として、"NASCAR 効果" と呼ばれるものがあります。これはたとえば、スポンサーのロゴが至るところに貼られているレーシングカーのように、サイト上にざまざまな ID プロバイダーのロゴが表示されている状態のことです。そのようなサイトの多くは、選択肢が多いことで矛盾が生じる「選択のパラドックス」理論さながらに、ユーザーを混乱させてしまうことになります。

この問題を解消するために、マイクロソフトは接続するかどうかの選択肢を提供する前に、エンドユーザーがマイクロソフトのサービスを利用しているかどうかを開発者のアプリケーションやサイトで簡単に確認できるようにしました。ここでも、ほんの数行の JavaScript コードを書くだけで、ユーザーの状況に応じて適切な機能を提供できるように、接続処理をカスタマイズすることができます。これには、以下の WL.getLoginStatus 関数を利用します。

 WL.getLoginStatus(function (response) {
           if (response.status && response.status!= ‘Unknown’) {
               WL.ui({
                name: "signin",
                brand: "hotmail",
                type: "connect",
                element: "signInButton"
               });
           }else{
           /* 他の ID プロバイダー用のサインイン ボタンを描画する */ 
           }
       });

上記のコードでは、エンドユーザーがマイクロソフトのサービスを利用しているかどうかを確認しています。ステータスが "Unknown" で返された場合、Facebook や Twitter、Google などの他の ID プロバイダー用のサインインコントロールを描画するフォールバックコードを呼び出します。

この記事では、開発者のエクスペリエンスをシンプルにするために JavaScript API を改善してきたマイクロソフトの取り組みのごく一部をご紹介しました。この記事に関するフィードバックをぜひお寄せください。Hotmail、Messenger、SkyDrive とつながることで、皆さんのアプリケーションや Web サイトがさらに充実したものになることを願っています。

Messenger Connet プラットフォーム、リードプログラムマネージャー
Dare Obasanjo

数行の JavaScript で Hotmail、Messenger、SkyDrive とつながる

開発者向け情報: たった数行の JavaScript コードで、Web サイトが Hotmail、Messenger、SkyDrive とつながる

数行の JavaScript コードを記述するだけで、強力な統合を実現する

一般的な Web プラットフォームを使用する開発者になじみのある Messenger Connect JavaScript API を実現する

Hotmail、Messenger、SkyDrive と他のサービスを 1 つのページ上で統合しても、サイトが煩雑にならないようにする

Additional resources