gihyo.jpサイトのロゴ

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

第34回Live Messenger Web Toolkit─⁠─WebサイトにLive Messenger機能を追加（2）

2010-02-02

はじめに

前回はLive Messenger Web ToolkitのUI ControlsのMessenger Web Barを紹介し、Webサイトに設置する途中までを行いました。今回はこの続きから認証処理を行いサインインできるようにします。またMessenger Web Bar以外のUI Controlsも紹介します。

Messenger Applicationコントロール

Web Barを単純にXHTMLページに記述するだけでは、Live Messengerへサインインができません。サインインするためにはWindows Live ID Delegated Authentication（委任認証）という認証処理が必要です。委任認証の仕組みについては、若干内容が異なりますが第14回と第15回も参考にしてください。

委任認証に必要な情報を記述するコントロールが前回にも紹介したMessenger Applicationコントロールです。このコントロールは次のように記述します。

<msgr:app   
    id="appTag"   
    application-verifier-token="***Application Verifier***"
    privacy-url="Privacy.html"
    channel-url="Channel.html"
    token-url="RefreshMessengerToken.aspx">
</msgr:app>

application-verifier-token、privacy-url、channel-url、token-urlに記述している値が認証に必要な情報です。application-verifier-tokenに指定する値は、アプリケーション検証トークンという文字列です。これは動的に生成する必要があり、またJavaScriptではその処理を実現できません。ASP.NETやPHP、Rubyによる処理が必要になります。

アプリケーションの登録

委任認証を行うためには、事前にLive Services Developer Portalでアプリケーションを登録します。Windows Live IDアカウントによりWebサイトへサインインし、「⁠New Service」をクリックします（図1⁠）⁠。続いて、「⁠Live Services: Existing APIs」をクリックし、Service Component Propertiesページに必要事項を入力します（図2⁠）⁠。

図1　Live Services Developer Portal – New Service
図1　Live Services Developer Porta
図2　Service Component Properties
図2　Service Component Properties

Service Component Labelには、わかりやすいアプリケーション名を英数字で入力します。Service Component Descriptionにはアプリケーションの説明を入力します。DomainにはWebサイトのドメイン（http://やディレクトリー名を含めません⁠）⁠、Return URLはhttp://またはhttps://から始まるLive Messenger Web Toolkitを利用しているWebサイトのアドレスを入力します。アプリケーション名やドメイン、Return URLを後から変更することはできません。

最後にCreateボタンをクリックして登録完了です。完了すると、Application IDやSecret Keyという項目が表示されると思います。このふたつの値を、この後の認証処理に使用します。

サンプルコードの利用

Messenger Applicationコントロールに設定する値の生成処理は、SDKに含まれているサンプルをそのまま利用することにします。Interactive SDKのBeginタブからサンプルコードがダウンロードできます。本連載ではVisual Basicを使用したものを紹介しますが、サンプルにはC#、Java、Perl、PHP、Python、Rubyも含まれています。

使用するコードはWebToolkit\GettingStarted\VBフォルダーにあります（図3⁠）⁠。Visual Basicの場合、Visual StudioのASP.NET Webサイトプロジェクトに使用するファイルです。

図3　サンプルファイル
図3　サンプルファイル

Visual Studioを使用してASP.NET Webサイトプロジェクトを実際に作ります。現在であればVisual Studio 2010 Beta2やVisual Web Developer 2008 Express Editionが無償で利用できます。ASP.NET Webサイトプロジェクトは、ファイルメニューの新規作成よりWebサイトを選択することで作成できます（図4⁠）⁠。

図4　ASP.NET Webサイトプロジェクトの作成
図4　ASP.NET Webサイトプロジェクトの作成

作成されたプロジェクトにサンプルのファイルを追加します。ソリューションエクスプローラの右クリックメニュー（図5）から、ASP.NETフォルダーの追加よりApp_Codeフォルダーを作成し、また既存項目の追加からweb.configを除くサンプルファイルをプロジェクトに追加します（Default.aspxファイルなどは上書きします⁠）⁠。

図5　ASP.NETフォルダーの追加と既存項目の追加
図5　ASP.NETフォルダーの追加と既存項目の追加

web.configの内容は上書きせずに、サンプルにあるweb.configの内容をプロジェクトのweb.configに追記するようにします。

サンプルの下記の部分を、プロジェクトのweb.config内の<appSettings/>と置き換えます。

<appSettings>
        <add key="wll_appid" value="%%YOURAPPID%%"/>
        <add key="wll_secret" value="%%YOURAPPKEY%%"/>
        <add key="wll_consenturl" value="http://consent.messenger.services.live.com/"/>
</appSettings>

また、上記の%%YOURAPPID%%と%%YOURAPPKEY%%の部分は、アプリケーション登録時のApplication IDとSecret Keyに置き換えます。

Messenger Web Barの動作確認

以上で、サンプルファイルをWebサイトプロジェクトにできました。前回にDefault.aspxにあたる部分のXHTMLは記述しています。Default.aspxの<!DOCTYPE から</html>までの内容を以下の内容に変更します。

<!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="<%= ApplicationVerifier %>"
        privacy-url="Privacy.html"
        channel-url="Channel.html"
        token-url="RefreshMessengerToken.aspx">
    </msgr:app>
    <msgr:bar></msgr:bar>
</body>
</html>

上記は前回のものとほぼ同様ですが、<msgr:app>要素のapplication-verifier-tokenの値のところだけ異なります。ここに生成されたアプリケーション検証トークンが設定されるように記述します。サンプルを用いた場合、上記のように記述することでWebサイトが表示されたときに正しい値が設定されるようになります。

それでは、実際にMessenger Web Barが動作するか確認してみましょう。Live Messenger Web Toolkitは、アプリケーション登録で指定したドメイン下でしか動作できません。動作確認には、実際にWebサイトへアップロードするか、Windowsであればhostsファイルを編集しローカルの開発サーバーに対象ドメインでアクセスできるように細工する必要があります。サイトプロジェクトのアップロードは、ソリューションエクスプローラの右クリックメニューにあるWebサイトのコピーからできます（図6⁠）⁠。

図6　Webサイトのコピー
図6　Webサイトのコピー

Webサイトへアクセスし、Messenger Web Barからサインインしてみてください。ただしく動作したでしょうか？　サインインできれば正しく認証処理ができていますので、この後紹介するUI Controlsも動いてくれるでしょう。少し長い道のりでしたが、ここまでがMessenger Applicationコントロールに有効な値を設定する方法でした。

Sign Inコントロール

Messenger Web BarとMessenger Applicationコントロール以外も見ていきましょう。最初は、Sign Inコントロールです。名前のとおりLive Messengerにサインインするためのコントロールです。次のようにXHTMLページに記述します。

<msgr:sign-in></msgr:sign-in>

するとWebページを開いたとき図7のように表示されます。

図7　Sign Inコントロール
図7　Sign Inコントロール

以下のようにタグに属性をつけると図8のように簡単に見た目を変更することもできます。

<msgr:sign-in theme="Light"></msgr:sign-in>
<msgr:sign-in theme="Blue"></msgr:sign-in>
<msgr:sign-in theme="Dark"></msgr:sign-in>
<msgr:sign-in theme="Light" size="small"></msgr:sign-in>
<msgr:sign-in theme="Blue" size="Medium"></msgr:sign-in>
<msgr:sign-in theme="Dark" size="Large"></msgr:sign-in>
図8　Sign Inコントロールのカスタマイズ
図8　Sign Inコントロールのカスタマイズ

属性による変更以外にもSign Inコントロールを構成するXHTMLタグの各要素にはCSS（Cascading Style Sheets）のクラス名が定義されています。開発ツールなどを用いて値を確認し、CSSの値を上書き定義することで見た目の変更もできます。クラス名のリファレンスはMSDN Libraryでも確認できます。

以上の属性のほかにもonconsentcompletedという属性にJavaScriptの関数名を指定すると、認証後にその関数呼び出しという動作も可能です。

ProfileコントロールとCID

次はProfileコントロールというものです。これはユーザーの名前、表示アイコン、表示メッセージ、オンラインや退席などの状態を、表示・変更が可能なコントロールです（図9⁠）⁠。

図9　Profileコントロール
図9　Profileコントロール

タグは次のように記述します。

<msgr:profile cid="$user"></msgr:profile>

editable属性を付けると、名前などの編集可否を制御できます。

<msgr:profile cid="$user" editable="false"></msgr:profile>

さてProfileコントロールに指定されているcid属性について、ここで説明します。Windows LiveアカウントユーザーにはCIDと呼ばれる一意な符号付の整数値が割り当てられています。cid属性にはこのCIDを指定します。

つまり、Profileコントロールではcid属性に特定のユーザーのCIDを指定するとそのユーザーの情報が表示できるということです。ただし、サインインしたユーザーのコンタクトリストにあるユーザーの表示に通常は限られます。また表示名等の変更も当然ながらできません。

UI Controlsでは、$userはサインインしたユーザーを表し、上記のようにするとサインインしているユーザーが表示されます。

ユーザーのCIDを確認するにはLive Messengerのプロフィールの表示（図10）が利用できます。プロフィールの表示をクリックしたとき、移動先のURLにCIDが含まれています。

図10　プロフィールの表示
図10　プロフィールの表示

URLは次の書式になっていると思います。「⁠{16進数表記の値}」部分がCIDです。この表記はプロフィールのURL以外でも見かけたことがあるかもしれませんね。各種LiveサービスではCIDが使用されています。

http://cid-{16進数表記の値}.profile.live.com

この16進数表記の値を符号付の10進数表記にするとUI Controlsのcid属性値として使えます。$userの代わりに知り合いのCIDなどに変えて表示が変わることを確認してみてください。Profileコントロール以外の多くのコントロールでもCIDが必要になってきます。

Basic Presence/Contact/Sharingコントロール

Profileコントロールは、表示名や表示アイコンなどがまとまった多機能なコントロールでしたが、表示名だけや、表示アイコンだけのコントロールなどもあります。基本的なプレゼンス（Presence: 存在の意）に関するコントロール（Basic Presenceコントロール）は以下のものが用意されています。

  • Display Nameコントロール（表示名の表示・変更）
  • Display Pictureコントロール（表示アイコンの表示）
  • Presence Statusコントロール（オンラインなどの状態の表示・変更）
  • Personal Messageコントロール（表示メッセージの表示・変更）
  • Profileコントロール

また、サインインしたユーザーのコンタクトリストに関するコントロールは次のものがあります。

  • Add Contactコントロール（コンタクトの追加）
  • Contact Listコントロール（コンタクトの表示など）
  • Contact Pickerコントロール（コンタクトの選択）

少し変わったコントロールとしてSharingコントロールというのもあります（図11、12⁠）⁠。これは、Webサイトであらかじめ設定されたメッセージを、複数のユーザーに一度に送信できるというものです。

図11　Sharingコントロール 共有ボタン
図11　Sharingコントロール 共有ボタン
図12　Sharingコントロール コンタクトの選択
図12　Sharingコントロール コンタクトの選択

ユーザーは共有ボタンをクリックし、表示されたコンタクトリストからメッセージを送信するユーザーを選択します。Shareボタンをクリックすると一斉送信されます。

以上のコントロールは、Interactive SDKで簡単に試せます。Webページ上でコントロールの属性を変更でき、すぐに動作の違いを確認できます。また、各コントロールのタグも表示されます。これらのコントロールを利用する場合、有効にInteractive SDKを活用しましょう。

今回はここまでです。UI Controlsにはまだ種類があります。次回にはまた別のコントロールを紹介します。また今回は、直接CIDを記述しているなど少し応用しにくい方法でした。次回以降はより実践的な実装をしていきます。

おすすめ記事

記事・ニュース一覧