第33回　Live Messenger Web Toolkit──WebサイトにLive Messenger機能を追加（1）

Live Messenger Web Toolkit

今回からはLive Messenger Web Toolkitを紹介します。Live Messenger Web Toolkitとは、2009年3月にMIX09というMicrosoftによる開発者とデザイナー向けのイベントで発表された、Windows Live Messenger機能をWebサイトに組み込むことのできるコントロールとライブラリーです。

Live Messenger Web Toolkitは、開発者に提供されているものをそのまま利用しているわけではないですが、Windows Live HotmailのWebサイトで利用されているのを見ることができます（図1⁠）⁠。

Web Toolkitを利用すると、PCにインストールして使うLive Messengerと同じ機能を簡単にWebサイトに付け加え、Live Messengerと連携できます。Live HotmailのようにLive MessengerそのものをWebサイトに付け加えるほかにも、ユーザーのプロフィール情報を利用してWebサイトにユーザー名を表示することや、コメントを残すときにも利用できるでしょう。コンタクトリストを利用してSNSのようなWebサイトも可能かもしれません。ゲームなどのメッセージング機能としても使えそうです。ぜひ連携したおもしろいWebアプリケーションを作ってみてください。

UI ControlsとLibrary

Live Messenger Web Toolkitは、複数のコントロールとライブラリーから成っています。Live Messenger Web Toolkitを利用してLive Messengerと統合したアプリケーションを作るには次のふたつの方法が用意されています。

Live Messenger UI Controls

ひとつめは、Live Messenger UI Controlsを使う方法です。UI Controlsは、Live Messengerの各機能を実現するHTMLベースのコントロール群です。たとえば、表示アイコンのコントロールや、コンタクトリスト、名前の表示および編集可能なコントロール、オンラインや退席などの状態を表示・編集するものなどがあります（図2、図3⁠）⁠。

図2　Profile コントロール

いずれもJavaScriptやCSSにより実現しようとすると手間なものばかりですが、あらかじめ多数の高機能なコントロールが用意されており、開発者はこれらの必要なコントロールだけを選択して利用できます。

また、利用はJavaScriptなどのコードを書く必要はなく、XHTMLページにコントロールのタグを追加するだけでLive Messengerとの統合が可能です。Live Messenger UI Controlsは、Live Messenger Web Toolkitの大きな特徴のひとつです。

Live Messenger Library

もうひとつの方法はLive Messenger Libraryを使う方法です。Live Messenger LibraryはJavaScriptのライブラリーです（Script#というコンパイラを用いてC#のコードから生成されています⁠）⁠。

UI Controlsでは実現できないLive Messengerとの連携や制御を行いたい場合に使用します。UI Controls自身もこのライブラリーを内部では使用しています。UI ControlsとLibraryの両方を併せた使い方ももちろんできます。見た目はすでに用意されているリッチなUI Controlsを活用し、Libraryによってメッセージ送受信時に特定の処理を行うといったこともできます。

実はこのLive Messenger Libraryについては、本連載の第11回で紹介しています。ただし、当時から大幅にアップデートも行われ、高機能で使いやすいものになっています。再度この連載でUI Controlsと併せて紹介したいと思います。

使ってみようMessenger Web Bar

Live Messenger UI ControlsのひとつにMessenger Web Barというコントロールが用意されています。これはLive Messengerのほぼすべての機能が利用できる特徴的なコントロールです。コンタクトリストの表示・編集やインスタントメッセージの送受信、ユーザーのプロフィールの表示・編集などが可能です。

それでは実際に使ってみましょう。次回の内容と少し重なるのですが、オンライン上で簡単にUI Controlsを試すことのできるInteractive SDKが用意されています（図4⁠）⁠。このWebサイトへアクセスし、LeanタブのBarを選択するとMessenger Web Barを使えます。

Barを選択時にウィンドウ下に表示されているのがMessenger Web Barです。「⁠サインイン」ボタンをクリックすることでLive Messengerにサインインします。はじめてサインインしたときはバルーンで簡単な使い方が表示されます。

サインインの際には、当然のことながらLive IDアカウントによるサインインが必要です。IDによるサインインに加えて図5のような確認画面が表示されると思います。これは、本連載でこれまでに紹介したWindows Live APIやSDKの一部でも使用していたWindows Live ID Delegated Authentication（委任認証）です。Live Messenger Web Toolkitを利用したWebサイトはユーザーの情報を入手できることになります。そのため、ユーザーはWebサイトに対して許可を与えるという手順を踏みます。

サインインが完了したら、実際にいろいろと操作してみてください。Webサイト上であるにも関わらず多くの機能が使えることがわかります（図6⁠）⁠。図に示した以外にも、メンバーの招待やコンタクトリストにカテゴリの作成なども可能です。このページではわかりませんが、違うページに移動した場合もサインイン状態を維持することもできます。

PCのLive Messengerと比較してできない機能もあげておくと、表示アイコンやサウンドの変更、手書き入力、写真の共有、映像・ゲーム・アプリ関連などがあります。複数人の会話もMessenger Web Barからは招待されない限りできません。

Messenger Web Barの設置

次にMessenger Web Barを自分のWebサイトに設置してみましょう。すでに述べたようにUI Controlsの利用にプログラミングは必要ありません。WebサイトのXHTMLコードに以下のタグを追加することでMessenger Web Barがページ下部に表示されます。

<msgr:bar></msgr:bar>

XHTML文書の作成

上記でXHTMLと書いたように、UI Controlsの設置にはXHTMLで記述されたWebページである必要があります。また、<html>要素にはmsgrという名前空間を追加しておきます。さらに、日本語表示に対応する場合は<html>要素にxml:lang="ja-jp"と記述することで行います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="ja-jp"
      xmlns:msgr="http://messenger.live.com/2009/ui-tags">

ライブラリーの参照とロード

UI Controlsを利用するには<script>要素によって、JavaScriptライブラリーを参照する必要があります。ライブラリーは非同期の読み込みをサポートしており、必要なライブラリーだけロードします。そのコードも記述します。

<script type="text/javascript" src="http://www.wlmessenger.net/api/3.5/loader.js"></script>
<script type="text/javascript">
    Microsoft.Live.Core.Loader.load(['messenger.ui.styles.core', 'messenger.ui']);
</script>

Messenger Applicationコントロールの追加

Messenger Web BarなどUI Controlsを利用する場合、必ずApplicationコントロールと呼ばれるコントロールも一緒に追加する必要があります。これは実際にWebページに表示されるものではなく、認証情報などを設定するものです。<msgr:app>要素をUI Controlsを使用する各ページの<body>要素内に追加します。

以上までをまとめると次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="ja-jp"
      xmlns:msgr="http://messenger.live.com/2009/ui-tags">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Live Messenger Web Toolkit</title>
    <script type="text/javascript" src="http://www.wlmessenger.net/api/3.5/loader.js"></script>
    <script type="text/javascript">
        Microsoft.Live.Core.Loader.load(['messenger.ui.styles.core', 'messenger.ui']);
    </script>
</head>
<body>
    <msgr:app   
        id="appTag"   
        application-verifier-token="***Application Verifier***"
        privacy-url="Privacy.html"
        channel-url="Channel.html"
        token-url="RefreshMessengerToken.aspx">
    </msgr:app>
    <msgr:bar></msgr:bar>
</body>
</html>

残念ながらまだこのままでは動作しません。<msgr:app>要素には、認証に必要な各種属性の値を設定しなければなりません。

UI Controlsは簡単に使用できると書いてきましたが、認証部分がとてもやっかいです。またプログラミングも必要とし、JavaScriptのコードだけでは解決できません。ただし、各種サンプルが用意されていますので、それらを使ってできるだけ簡単にUI Controlsを設置して動作させるまでの作業を、次回にその他のUI Controlsの利用と併せて行います。

先に進みたい方は、Interactive SDKのBeginタブからサンプルコードがダウンロードできます。各種言語のサンプルが含まれています。Visual BasicではWebToolkit\GettingStarted\VBフォルダーにASP.NET Webサイトプロジェクトがあります。これを元に利用するとMessenger Web Barが使えるようになります。ただし、Live Services Developer PortalでApplication IDの取得や、web.configファイルの編集が必要です。

また、次回以降も委任認証の詳しい仕組みについては紹介しません。委任認証については第14回と15回で紹介しています。興味のある方はこちらを参照してください。若干、内容が古くなっていますが、基本的な考えは変わりありません。ただし、Live Messenger Web Toolkitでは、図5のように専用の認証画面や手続きが用意されています。