「開発者向け情報」カテゴリーの投稿アーカイブ

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

投稿者: Windows Live チーム カテゴリー: 開発者向け情報 投稿日: 2011年7月21日

※本記事は、Inside Windows Live blog の抄訳です。

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

  1. 数行の JavaScript コードを記述するだけで、強力な統合を実現する。
    数行のスクリプトを追加するだけで、シングル サインオン (ユーザーの承認が必要) を実現し、Hotmail や Messenger、SkyDrive のアカウントを利用してアプリケーションが特定のデータにアクセスできるようにします。また、一般的なケースの場合、サーバー側のコードは一切必要ありません。

  2. 一般的な Web プラットフォームを使用する開発者になじみのある Messenger Connect JavaScript API を実現する。
    一般的な Web プラットフォームを既に利用している Web 開発者にとってなじみのある API を設計します。

  3. マイクロソフトの API と他のサービスを 1 つのページ上で統合しても、サイトが煩雑にならないようにする。
    他の Web プラットフォームの機能とともに Messenger Connect を簡単かつ効率的に利用できるようにし、開発者やエンド ユーザーに不都合をきたさないようにします。

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

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

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

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

0576.Connect-button_5A0AFDB9

以下のサンプル コードの 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

関連リンク

just a few lines of JavaScript connects your site to Hotmail, Messenger, and SkyDrive （英語、公式ブログ）

, , ,

コメントする

[開発者向け] Windows Live 開発者向けプラットフォームに OAuth 2.0 などを追加 ― 任意のデバイスやアプリケーション、サイトへの接続が引き続き可能

投稿者: Windows Live チーム カテゴリー: 開発者向け情報 投稿日: 2011年6月25日

 

*本記事は、Windows Live developer platform adds OAuth 2.0 and more, continuing to let users connect the devices, apps, and sites they choose の抄訳です。

任意のデバイスやアプリケーション、サイトに接続できなければ、より充実した統合型のエクスペリエンスは実現できない、とマイクロソフトでは考えています。ほとんどすべての Windows 7 PC に Messenger やフォト ギャラリーなどの アプリケーションがプレインストールされています。そのため、Facebook や LinkedIn などのサービスに接続するだけで、Facebook チャット、Messenger でのソーシャル フィード、フォト ギャラリーでの人物タグ付きの画像の投稿、Windows Live を通じたすべての連絡先情報のシームレスな入手など、広範囲に及ぶリッチな機能を利用することができます。もちろん、サービスに 1 回接続すれば、接続先のサービスはユーザーと共に Windows Phone や Hotmail などにローミングします。

逆に、ユーザーが選ぶ別のデバイスやアプリケーション、サイトから、Hotmail や Messenger、SkyDrive にシームレスにアクセスする必要もあります。Messenger Connect は、サイトやアプリケーションの開発者が SkyDrive や Messenger、Hotmail をエクスペリエンスに組み込むためのプラットフォームです。この統合をさらに簡易化する新しい拡張機能を本日、発表できることを喜ばしく思います。

Messenger Connect のリリース以降、開発者がマイクロソフトの API をどう使いたがっているのか、このプラットフォームをどう改善すればよいのかという点について、フォーラムを通じてだけでなく、WordPress や Sina Weibo、Gigya などのパートナー各社からも的確なフィードバックを得ることができました。開発者は当然、より新しい標準プロトコルを使った、より多彩な統合シナリオを利用したいと考えています。そしてプログラミングはもちろん、アプリケーションやサイトのエンド ユーザー エクスペリエンスもシンプルにしたいと望んでいます。

そのため、進化した Messenger Connect により、次のものが提供されるようになりました。

OAuth 2.0 ― 最新の Web 承認規格
  • マイクロソフトが OAuth 2.0 をサポートすることで、Facebook や Google といった他の Web プラットフォームで使用される標準の認証プロトコルを使って、Hotmail や Messenger、SkyDrive をより簡単に統合できるようになりました。
シングル サインオンと新しい Hotmail カレンダー アクセス
  • シングル サインオン: ユーザーが既に Hotmail や SkyDrive、MSN.com、または他の場所から Windows Live ID を使ってサインインしている場合、貴社のサイトにアクセスした時点で資格情報の再入力は必要ありません。
  • Hotmail カレンダー: アプリケーションからプログラミングを使って、ユーザーのカレンダーに予定を挿入することができます。
デスクトップおよびモバイル Web でのユーザー エクスペリエンスの改良
  • アプリケーションにユーザーがアクセスを許可する方法を刷新しました。ユーザーが与えるアクセス許可を従来より明確化し、データに対するユーザー自身のコントロール能力を高めました。また、この認証ダイアログを複数のバージョンで提供するようにしました。スマートフォン用のタッチ フレンドリーなバージョンもその一部です。
プログラミングの簡易化
  • JSON データ形式に特化することで、REST ベース API を簡素化しました。
  • と同時に、サービスから返される応答の平均サイズを小さくすることで、パフォーマンスを高速化し、必要な帯域幅を削減しました。
  • さらに、JavaScript ライブラリを再設計し、一般的なタスクをより少ない行数のコードで実行できるようにしました。
より多くのコード例を掲載した使いやすいドキュメント
  • 開発者からのフィードバックに基づき、各種シナリオが中心となるようにドキュメントを刷新しました。
OAuth 2.0 ― 最新の Web 承認規格

OAuth は、一方のサービスまたはアプリケーションから、もう一方のサービスまたはアプリケーションでホストされているデータへのアクセスを、ユーザーが許可するための承認プロトコルです。両者間でユーザー名やパスワードを共有する必要はありません。Messenger Connect の旧バージョンでは、OAuth 2.0 の旧バージョンである OAuth WRAP を使用していました。Messenger Connect の新リリースでは、OAuth 2.0 仕様ドラフト 16 をサポートしています。Facebook や Salesforce、Google など、この IETF 標準トラックの仕様を採用する Web プラットフォームが増えつつあります。

Messenger Connect は、単に最新の OAuth 2.0 を実装しているだけではありません。マイクロソフトはこの機会を利用して、ユーザーによる承認プロセスが行われている間の、開発者およびエンド ユーザーのエクスペリエンスを、その重要な側面において改良しました。開発者の立場からいえば、Messenger Connect と統合する際、サーバー側コードで OAuth 検証ステップを実行する必要がなくなりました。すべてクライアント側で、数行の JavaScript コードを使って実行することができます。

シングル サインオンと新しい Hotmail カレンダー アクセス

シングル サインオンにより、ユーザーは Hotmail や MSN ホームページなど、Windows Live ID ベースの資産にサインインした時点で、Messenger Connect パートナー サイトにもサインインしたことになります。つまり、資格情報の再入力は必要ありません。サイトまたはアプリケーションでこの機能を使用するには、ユーザーの同意を求める際に wl.signin スコープの承認を得るだけで済みます。その後、その Web サイトに、Windows Live ID ベースのサイトにサインイン済みのユーザーがアクセスすると、パートナー サイトまたはアプリケーションにもサインインしていることになります。パートナー Web サイトからサインアウトすると、ユーザーは他の Windows Live Web サイトからもサインアウトすることになります。

もう 1 つ、開発者からの要望が多かったのは、アプリケーションや Web サイトからユーザーの Hotmail カレンダーに予定を追加するという機能です。私のようにスマートフォンとカレンダーを同期しているユーザーには特に、この機能は便利だと思います (Hotmail は Exchange ActiveSync をサポートしています)。外出先でもイベントのアラームを受け取ることができるからです。

デスクトップおよびモバイル Web でのユーザー エクスペリエンスの改良

そのほか、ユーザーがアプリケーションから Windows Live アカウントに接続を試みるとき、アプリケーションが何の情報にアクセスするのかが明確になるようにするために、エンド ユーザー エクスペリエンスに変更を加えました。Messenger Connect の旧バージョンでは、ユーザーが自分の Windows Live ID を使ってサインインを試みるとき、次のようなダイアログが表示されていました。

Messenger Connect の旧バージョンでのサインインダイアログ

アプリケーションからアクセスしようとしている情報の種類が何であれ、同じダイアログが表示されていたのです。アプリケーションがどういった情報にアクセスを試みているかを確認するには、「What will I share」リンクをクリックする必要がありました。Messenger Connect の新バージョンでは、サインイン ダイアログと承認ダイアログが別々になっています。これにより、アプリケーションがアクセスしようとしている情報が明確になるだけでなく、ユーザーが既に Hotmail や MSN ホームページなど、Windows Live ID ベースのサイトにサインイン済みの場合、余分なサインインの手間を省けるようになりました。

以下に、新しいエクスペリエンスを示します。既にユーザーがサインイン済みの場合は、一回クリックすればよいだけの同意ページが直ちに表示されます。

Messenger Connect の新バージョンでのサインインダイアログ

Messenger Connect の [Allow Access?] ダイアログ

さらに、このエクスペリエンスの携帯電話向けバージョンも用意しました。

携帯電話向けの Messenger Connect サインイン ダイアログ

携帯電話向けの Messenger Connect の [Allow access?] ダイアログ

プログラミングの簡易化

旧バージョンのもう 1 つの問題点として、API が複雑過ぎるということがありました。AtomPub や JSON、RSS、旧来の XML など、サポートするデータ形式が多い割には、それに見合ったメリットがありませんでした。そのため、リソース モデルが複雑化し、API から不要なデータが返される結果となっていました。
新バージョンでは、ただ 1 つの共通形式、JSON を使用します。さらに、リソース モデルも簡素化しました。以下に、フォト アルバムからの取得を行うコード例を示し、旧バージョンと最新バージョンの API どうしを比較します。

旧バージョン: 以前の v4.1 バージョンでは、フォト アルバムからの取得を行う際、Atom 形式で結果が返されていました。

Atom コード例


新バージョン: よりシンプルになった新しい v5 バージョンでは、同じ結果が JSON で返されます。

JSON コード例

より多くのコード例を掲載した使いやすいドキュメント

従来のドキュメントから、開発者は、Messenger Connect API が他のオンライン サービスで提供される機能よりも複雑であるかのような印象を受けていました。そこで私たちは、Messenger Connect の基本的な使い方や、Messenger Connect を使う人たちのタイプおよび使い方について、コード例を交えながら説明すれば、より有益な情報を提供できるだろうと考えました。Messenger Connect Web サイト (http://dev.live.com) をご覧ください。以下の情報を盛り込み、ドキュメントを更新しています。

  • Messenger Connect に組み込まれた、開発者向けのさまざまな機能に関する明確な説明 (英語)。
  • 認証/承認から JavaScript ライブラリの使用まで、重要トピックを 1 ページに凝縮した概要ドキュメント (英語)。
  • RESTful HTTP 要求または JavaScript ライブラリを使用して Messenger Connect API と対話する方法を簡単にチェックできる、新しいインタラクティブ SDK (英語) へのリンク。
  • Messenger Connect のさまざまな側面をさまざまなクラスの Web サイトに統合する方法を具体的に示す、ショーケース Web サイト (英語)。

前述のように、開発者が Hotmail や Messenger、SkyDrive をアプリケーションや Web サービスに簡単に統合できるようになったため、いずれ、ユーザーが使い慣れた他のサービスやコンポーネントをマイクロソフト製アプリケーションやサービスなどにも簡単に統合できるようになるでしょう。

アプリケーションやサイトを開発中の方は、MSDN のデベロッパー センターで Messenger Connect の詳細情報をご確認ください (英語)。フィードバックもお待ちしています。ユーザーの皆さんは、ぜひ、お気に入りのサイトやアプリケーションの開発元に、Windows Live との統合を提案してみてください。

関連リンク

Windows Live developer platform adds OAuth 2.0 and more, continuing to let users connect the devices, apps, and sites they choose  (英語)

, ,

コメントする