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

第11回Live Messenger Library ―― オリジナルLive Messengerの作成(前編)

Windows Live Messenger Library

今回はWindows Live Messenger SDKの中からWindows Live Messenger Libraryについて紹介します。Messenger LibraryはWindows Live Messengerの機能を有したWebアプリケーション作成のために利用するJavaScriptのライブラリです。Webページ上に限定されますが、Messenger Libraryを利用するとLive Messengerと同等の機能を実装することができます。

前回紹介したIM Controlは、ブログなど自分で編集や管理が可能なWebサイト上にLive Messengerのプレゼンスを表示でき、またメッセージの送受信も可能にしました。ただし、IM Controlの設置にはiframeタグを利用しており、Webサイトの訪問者は実際にはlive.comドメイン下のWindows Liveサービスのサーバと通信をしていました。それに対して今回のMessenger Libraryでは、訪問者は訪問したWebサイトを通じてWindows Liveサービスにアクセスします。Messenger Libraryを利用したWebサイトは、送受信されるメッセージの内容やコンタクトリスト情報の取得も可能になります。そのため、Webサイト側は訪問者からWebサイト(ドメイン)に対してLive Messenger利用の許可を承諾してもらう必要があります。

Sign-in Control

Webサイトの訪問者が、Webサイトに対してLive Messengerの利用を許可する点が通常のLive Messengerと異なります。その役割およびLive Messengerへのサインインを担うのがSign-in Control図1と呼ばれるものになります。

図1 Sing-in Control
図1 Sing-in Control

訪問者はSign-in Controlを用いてサインインを行います。Sign-in Controlの[サインイン]ボタンをクリックすると、ウィンドウが新たに開きWindows Liveサービスのページへと移動します。Windows Live IDアカウントでのサインイン後、サインイン方法の設定ページが表示されます図2⁠。訪問者は、今後Webサイトにアクセスするたびに自動的にサインする、または手動でサインインするかを選択し、その設定の保存、もしくはキャンセルの操作ができます。設定を保存した場合、そのままサインイン処理へと進みます。Webサイトには認証処理が完了したことが通知されます。

図2 サインインの設定
図2 サインインの設定

実際にMessenger Libraryを利用したサンプルがSDKに用意されており、http://wlmlhelloworld.mslivelabs.com/Default.htmにて参照することができます。

Messenger Libraryがどのようなものか把握するには一番手っ取り早いでしょう。ソースコードのダウンロードもできます。

開発環境

Messenger Libraryを利用した開発をするにあたり、以下の環境が必要になります。

  • ふたつのWindows Live IDアカウント
  • Windows Live Messengerクライアント
  • WebアプリケーションをホストするドメインのあるWebサイト

開発言語はJavaScriptを使用します。HTMLとJavaScriptを記述するだけですので、テキストエディタでファイルを作成しWebサイトへアップロードできさえすれば開発は可能ですが、本連載では開発の利便性のため以下の環境も使用します。

Webアプリケーションを開発する場合、localhostドメインを使用しローカルサーバでアプリケーションを実行する方法が一般的だと思います。しかし、Messenger Libraryを利用する場合、Windows LiveサービスのサーバからWebアプリケーションへのアクセスが必要であるため、localhostは使用できません。作成したスクリプトをWeb上へアップロードするのでも構いませんが、開発用PCをWebサーバとして公開したほうが便利だと思います。WebサーバにはIISを使用し、ドメインについてはDDNSを利用するとよいでしょう。DDNSは無料でサービスしているところもあるので個人で開発するには有用だと思います。もちろん開発用に固定IPとドメインが用意できればDDNSを利用する必要はありません。本連載ではサーバ設定について詳しくは説明しませんが、開発の際のポイントだけ説明します。

DDNSによるドメイン名を利用することによりLiveサービスサーバから開発用PCにアクセスが可能になりますが(ルータやIISの設定は当然ながら必要です⁠⁠、同じドメインを利用して開発用PCからは通常そのままではアクセスできません。開発用PCからアクセスする場合は自PCを示すIPアドレス(127.0.0.1)にそのドメインを対応付けます。設定はhostsファイルを編集することで行います。hostsファイルは「%SystemRoot%\System32\drivers\etc\hosts」にあるのでメモ帳などのテキストエディタで開き、図3のように「127.0.0.1 ドメイン名」の1行を追加します。Windows Vistaの場合は管理者として実行したエディタを使用してください。既にhostsファイルには「127.0.0.1 localhost」の記述があり、localhostが127.0.0.1と対応付けられていることがわかります。

図3 hostsファイル
図3 hostsファイル

プロジェクトの作成

Visual Web Developer 2008から新しいWebサイトを作成します。ASP.NETは使用しませんがテンプレートから「ASP.NET Web」を、場所は「HTTP」を選択し図4⁠、参照ボタンをクリックします。そして、ローカルIISから適当な場所を作成しましょう。ここでは「MessengerLibrarySample」としました図5⁠。

図4 新しいWebサイトの作成
図4 新しいWebサイトの作成
図5 ローカルIISから場所の選択
図5 ローカルIISから場所の選択

Default.aspxは使用しませんのでプロジェクトから削除し、新たにHTMLファイルとJScriptファイルを図6のように追加します。Default.htmはWebアプリケーションの表示部分を記述し、Main.jsにはMessenger Libraryの利用するコードを記述します。Channle.htmとPrivacy.htmは、この後 必要になりますので併せて追加しておきます。

図6 プロジェクトに追加したファイル
図6 プロジェクトに追加したファイル

続いて以下のJScript IntelliSense用のファイルをダウンロードしプロジェクトがあるフォルダに保存します。プロジェクトに追加する必要はありません。

JScript IntelliSense用のファイルは開発に必須ではありませんが、Visual Studioのエディタ内でMessenger Library用のIntelliSenseが有効になり、たいへん便利ですので活用するとよいでしょう。Main.jsに次のようにコメントを記述することでIntelliSenseが有効になります。

/// <reference path="sscorlib.js" />
/// <reference path="Microsoft.Live.Messenger.documentation.js" />

Channel.htm、Privacy.htm

プロジェクトに追加したChannel.htmとPrivacy.htmについて説明します。いずれも Sign-in Controlのホストに使用します。ファイル名は任意ですが、MSDN Libraryとあわせて本連載でもChannel.htmとPrivacy.htmとしています。

Channel.htmは、WebサイトのドメインとWindows Liveサービスのドメイン(live.com)間での通信を容易にするためのものです。以下のコードをChannel.htmに記述してください。Channel.htmをアプリケーションごとに編集する必要はなく同じものを使用します。

<!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">
<head>
<title>Channel</title>
<meta name="ROBOTS" content="NONE"/>
<script type="text/javascript">
    try {
        var hash = window.location.hash.substr(1);
        if (window.location.replace == null) {
            window.location.replace = window.location.assign;
        }
        window.location.replace("about:blank");
        var name = hash.split("/")[0];
        var win = null;
        if (name && (name != ".parent")) {
            win = window.parent.frames[name];
        } else {
            win = window.parent.parent;
        }
        if (win.Microsoft) {
            win.Microsoft.Live.Channels.Mux._recv_chunk(hash);
        }
    } catch (ex) {
        /* ignore  */
    }
</script>
</head>
<body></body>
</html>

Privacy.htmは、Webサイトのプライバシーポリシーを表示するためのものです。Messenger Libraryを利用するとユーザ情報を取得できることになるため、ポリシーの明示が必須となっています。このポリシーのリンクは、訪問者がWebサイトに対して許可を行う際に表示されます。開発者のみアクセスできる状態のときは用意する必要はないでしょうが、Webサイトの公開時に適切な内容のものを用意してください。

コードの記述

Messenger LibraryはJavaScriptのライブラリとして提供されています。そのJavaScriptのコードは、Script#(Script Sharp)という、C#コードをJavaScriptコードへ変換するコンパイラの出力結果になっています。そのためもあって利用するライブラリは名前空間やクラスなどが意識された記述となっています。次にMessage Libraryで使用する記述について紹介します。

名前空間とクラス

ライブラリには「Microsoft.Live.Messenger」などの擬似的な名前空間が使用されています。名前空間を作成する場合、TypeオブジェクトのcreateNamespaceメソッドを使用します。

Type.createNamespace('A_Namespace');

名前空間にクラスを追加する場合、以下のように記述します。

A_Namespace.A_Class = function() {}

また、クラスにメソッドを追加する場合はクラスの追加同様に以下のように記述します。

A_Namespace.A_Class.A_Function = function() {
    /* ここにメソッドの処理を記述 */
}

ライブラリ内にあるクラスのプロパティは⁠get_⁠⁠set_⁠を接頭辞とした関数のセットとして表されています。

デリゲート

Message Libraryではメソッドの参照を渡すことでデリゲートの作成が可能です。作成にはDelegate.createメソッドを使用します。以下のコードはSign-in Controlのホスト時に出てくるものです。UserオブジェクトのPresenceプロパティの値が変更されたときに発火するpropertyChangedイベントとLiveSampleクラスのuserPresencePropertyChangedメソッドを関連付けているコードになります。

Gihyo.LiveSample.User.get_presence().add_propertyChanged(Delegate.create(null, Gihyo.LiveSample.userPresencePropertyChanged));

Sign-in Controlのホスト

ようやくですがコーディングに取り掛かりましょう。Sign-in ControlをWebページに設置し、サインイン後にサインインしたユーザの情報を表示するところまで行います。

Default.htm

Default.htmのhead部分を以下に示します。Messenger LibraryのJavaScriptファイルとプロジェクトに追加したMain.jsを参照します。

<head>
<title>Live Messenger Library Sample</title>
<script type="text/javascript" src="http://settings.messenger.live.com/api/1.0/messenger.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>

続いてbody部分を記述します。Sign-in ControlはMessenger Libraryに描画を任せることになります。その際に設置する場所を指定するためdivタグのid属性値を渡します。以下の例ではSign-in Control表示部分とサインインしたユーザ情報を表示するためのdivタグを書いています。またbodyタグのonloadイベントにGihyo.LiveSample.pageLoadedメソッドを指定しています。このメソッドはこの後作成します。

<body onload="Gihyo.LiveSample.pageLoaded()">
    <table>
        <tr><td><div id="signInFrame"></div></td></tr>
        <tr><td><div id="userInfo"></div></td></tr>
    </table>
</body>

Main.js

Main.jsにJavaScriptコードを記述していきます。まずGihyoという名前空間を作成し、その中にLiveSampleというクラスを作成します。当然ながら名前は任意です。

Type.createNamespace('Gihyo');
Gihyo.LiveSample = function() {}

次にページがロードされたとき呼び出されるメソッドを作成します。ここではMicrosoft.Live.Messenger.UI.SignInControlオブジェクトを生成し、サインインのための認証が完了したときに呼ばれるadd_authenticationCompletedイベントとデリゲートを関連付けます。SingInControlオブジェクトの生成によりSign-in Controlがページ上に表示されます。

SignInControlクラスのコンストラクタには、Sign-in Controlを表示するdivタグのid属性値、Privach.htmとChannel.htmの各URL、カルチャ情報を示す文字列を渡します。

Gihyo.LiveSample.pageLoaded = function() {
    var path = document.URL.substring(0, document.URL.lastIndexOf("/") + 1);
    var privacyUrl = path + 'Privacy.htm';
    var channelUrl = path + 'Channel.htm';

    Gihyo.LiveSample.SignInControl = new Microsoft.Live.Messenger.UI.SignInControl('signInFrame', privacyUrl, channelUrl, 'ja-jp');
    Gihyo.LiveSample.SignInControl.add_authenticationCompleted(Delegate.create(null, Gihyo.LiveSample.authenticationCompleted));
}

上記コードにてデリゲート作成時に指定したGihyo.LiveSample.authenticationCompletedメソッドを作成します。SignInControlオブジェクトのauthenticationCompletedイベントが発火したとき、ユーザは まだサインインしていない状態にあります。次のコードに示すメソッドでは、サインインしたユーザIDからMicrosoft.Live.Messenger.Userオブジェクトの作成、サインイン完了時のイベントとデリゲートの関連付けを行い、最後にsignInメソッドを呼び出しユーザのサインイン処理をしています。

Gihyo.LiveSample.authenticationCompleted = function(sender, e) {
    Gihyo.LiveSample.User = new Microsoft.Live.Messenger.User(e.get_identity());
    Gihyo.LiveSample.User.add_signInCompleted(Delegate.create(null, Gihyo.LiveSample.signInCompleted));
    Gihyo.LiveSample.User.signIn(null);
}

Gihyo.LiveSample.signInCompletedメソッドを作成します。UserクラスのsignInCompletedイベントはサインイン直後に必要な処理を実行するために使用します。この時点ではサインしたユーザの情報の多くはまだ設定されていません。サインイン処理が成功したか否かの確認後、ここではサインインしたユーザのアカウントアドレスを表示する処理を書いています。

ユーザのアカウントアドレスはUserオブジェクトのAddressプロパティ(Microsoft.Live.Messenger.IMAddressクラス型)のAddressプロパティ(文字列型)に格納されています。

Gihyo.LiveSample.signInCompleted = function(sender, e) {
    if (e.get_resultCode() === Microsoft.Live.Messenger.SignInResultCode.success) {
        var address = Gihyo.LiveSample.User.get_address().get_address();
        $('userInfo').appendChild(document.createTextNode(address));
    }   
}

$(⁠userInfo⁠)という記述は、document.getElementById('userInfo')と書いた場合と同じです。これもMessenger Libraryで用意された記述方法ですが、ほかのオープンソースのJavaScriptライブラリなどでもよく使用されているものだと思います。

コード実行

Sign-in Controlをホストしただけですが、ここまでのコードを実行してみましょう。サインインしてメールアドレスを表示するだけのコードですので、サインイン中にメッセージなどを受け取っても破棄されている状態になっています。開発用に新たに用意したWindows Live IDアカウントを使用するとよいでしょう。実行した結果は図7のようになります。

図7 Sign-in Controlのホスト
図7 Sign-in Controlのホスト

今回はここまでです。次回からLive Messengerクライアントとして機能するためコンタクトリストの表示やメッセージの交換など各種機能を実装してきます。

おすすめ記事

記事・ニュース一覧