※本記事は、Inside Windows Live blog の抄訳です。
最近の開発者は必ずと言っていいほど、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
関連リンク
just a few lines of JavaScript connects your site to Hotmail, Messenger, and SkyDrive （英語、公式ブログ）
Windows Live 最新情報ブログ 