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

第35回Live Messenger Web Toolkit─⁠─WebサイトにLive Messenger機能を追加(3)

High-level Conversationコントロール

今回も前回に続いて、Live Messenger Web ToolkitのUI Controlsを紹介します。またJavaScriptライブラリーのLive Messenger Libraryとも少し連携します。

最初にインスタンスメッセージ送受信を可能にするコントロールについてです。会話に関するコントロールは、High-level Conversationコントロールと呼ばれ、次の2種類が用意されています。

  • Conversationコントロール
  • Conversation Listコントロール

Conversationコントロール

Conversationコントロールは、特定の相手とのインスタントメッセージを送受信ができるコントロールです図1⁠。PCにインストールして使うLive Messengerの会話ウィンドウにあたる部分ですね。

図1 Conversationコントロール
図1 Conversationコントロール

お互いの表示アイコンやメッセージ履歴の表示、テキスト入力エリアなどを備えています。絵文字入力やフォントの変更、シェイクの送信にも対応しています。また、左上のアイコンから会話にコンタクトリストのメンバーを招待することもできる高機能なコントロールです。

XHTMLページに記述するタグは次のようになります。

<msgr:conversation
   cid="-6356285628991451204"
   display-pictures-enabled="true">
</msgr:conversation>

cid属性には会話相手のCIDを指定します。CIDについては前回の内容をご確認ください。自分自身と会話はできませんので、サインユーザーを表す$userという記述は使用できません。display-pictures-enables属性は名前の通り、表示アイコンの表示・非表示をtrue・falseで設定します。

上記以外の属性には、on-conversation-createdとon-message-receivedがあり、JavaScriptの関数を指定することで会話が作成されたとき、インスタントメッセージを受信したときに、任意のコードを実行可能です。

Conversationコントロールは、図1をみると、メッセージ表部分やテキストエリアなどに枠などもなく、ほかのコントロールと比べLive Messengerらしいデザインがされていません。High-level Conversationコントロールは、CSS(Cascading Style Sheets)が用意されておらず、開発側で用意することが想定されています。Internet Explorer 開発者ツールで生成されたコードを確認すると、いろいろとクラス名の定義がされていることがわかります図2⁠。

図2 開発者ツール
図2 開発者ツール

これらのクラス名を用いて実際に運用するときは見た目を変更しましょう。その他のコントロールへCSS設定が影響しないよう、次のようにコントロールを独自のクラスを定義した<div>要素で囲むことが推奨されています。

<div class="MyConversation">
  <msgr:conversation
    cid="-6356285628991451204"
    display-pictures-enabled="true">
  </msgr:conversation>
</div>

こうすることで、ConversationコントロールのみCSSを設定できます。

.MyConversation .ConversationControl_Content {
    border: 1px solid gray
}

Conversation Listコントロール

もうひとつのConversation Listコントロールは、サインインユーザーの現在の会話をリスト表示するためのコントロールです図3⁠。

図3 Conversation Listコントロール
図3 Conversation Listコントロール

インスタントメッセージを受信すると、相手の名前が表示され、点滅します。Conversation Listコントロールは、Conversationコントロールと同等の会話機能も備えており、名前の部分をクリックすることでその相手と会話を開始できます図4⁠。

図4 Conversation Listコントロールを使用した会話
図4 Conversation Listコントロールを使用した会話

複数人から会話を受信した場合は、リストに名前が追加され、会話の表示を切り替えて使用します図5⁠。新たに会話を始めることはできませんが[1]⁠、名前部分を右クリックすることで会話の終了が可能になっています。

図5 会話の切り替え
図5 会話の切り替え

タグは次のように記述すると、Webページにコントロールが追加されます。

<msgr:conversation-list></msgr:conversation-list>

属性を指定することで各種イベントが発生したときにJavaScriptの関数を呼ぶことも可能です。上から順に会話の終了・作成・選択時のときのものです。

<msgr:conversation-list
   on-conversation-closed="conversationClosedEventHandler"
   on-conversation-created="conversationCreatedEventHandler"
   on-conversation-selected="conversationSelectedEventHandler">
</msgr:conversation-list>

Conditional Flowコントロール

少し変わったコントロールとして、Conditional Flowコントロールというものがあります。これはユーザーのオンライン状態によって表示内容を変更するために用います。IfコントロールとElseコントロールがあり、プログラミングのIf Else(分岐)構文を実現します。

使用方法は次の通りです。

<msgr:if
   cid="$user"
   condition="online">
    <div>オンラインです。</div>
<msgr:else>
    <div>オフラインです。</div>
</msgr:else>
</msgr:if>

cid属性にはCIDを指定します。Elseコントロールの<msgr:else>要素は省略可能です。

Live Messenger Libraryとの連携

まだ重要なコントロールを紹介していませんが、ここで一度 Live Messenger LibraryとUI Controlsとを連携させてみましょう。UI Controlsは多機能なものが用意されていますが、プログラムで何か処理させたい場合、Live Messenger Libraryの使用が必要になってきます。たとえば、自動で会話の作成や応答、オンラインのメンバーの数だけDisplay Pictureコントロールの生成、メンバーのCIDの取得などはUI Controlsだけでは実現できません。

それでは、Live Messenger LibraryとJavaScriptを使用してサインインユーザーの情報を取得してみましょう。サインイン処理自体もライブラリーにより可能ですが、サインインの処理は既に前回に紹介したSign Inコントロールに任せることにします。サインイン後のタイミングはMessenger Applicationコントロールを使用して知ることができます。

これまで使用してきた<msgr:app>要素に次のようにonAuthenticated属性とonSignedIn属性を追加し、認証完了とサインイン完了時に呼ばれるJavaScriptの関数を指定します。これら以外にもサインアウト時に処理するためのonSignedOut属性がMessenger Applicationコントロールにはあります。

<msgr:app   
    id="appTag"   
    application-verifier-token="<%= ApplicationVerifier %>"
    privacy-url="Privacy.html"
    channel-url="Channel.html"
    token-url="RefreshMessengerToken.aspx"
    onAuthenticated="onAuthenticated"
    onSignedIn="onSignedIn">
</msgr:app>

JavaScriptの関数は次のように書きます。XHTML<head>要素内に追加してください。ここではユーザーのCIDを表示しています。

<script type="text/javascript">
<!--
    var User;
    function onAuthenticated(e) {
        // 認証完了
        
        // User オブジェクト取得
        User = e.get_user();

        // ユーザーの CID の表示
        alert("CID: " + e.get_user().get_presence().get_imAddress().get_cid());
    }

    function onSignedIn(e) {
    }
//-->
</script>

実行した結果は、図6の通りです。サインインしたユーザーのCIDが表示されたでしょうか。

図6 実行結果
図6 実行結果

Live Messenger Libraryでは多くの操作をMicrosoft.Live.Messenger.User クラスを使用して行います。イベント引数からUserオブジェクトを取得し、各プロパティーをたどってCIDを取得しています。

Live Messenger Libraryに用意されているクラスは多数あるため詳細や使用方法を、ここでは紹介できません。詳しく知りたい方はMSDN Libraryのリファレンスを参照してください。またLive Messenger Library自体はLive Messenger Web Toolkit以前からあり、アップグレードを重ねて現在に至っています。以前のバージョンは連載第11回13回でも紹介しています。いろいろと改修はされていますが参考程度にはなると思います。また、次回以降も必要な部分はLive Messenger Libraryを使用し紹介する予定です。

動的なコントロールの生成

次はLive Messenger Libraryで取得した値を用いて、JavaScriptのコードから動的にUI Controlsを生成します。

先ほど作ったJavaScriptのonSignedIn関数内に処理を記述します。この関数内ではサインインが完了しているため、ユーザーのコンタクトリストの参照も可能です。試しにコンタクト全員分のDisplay Pictureコントロールを生成してみましょう。

コードは次のようになります。

function onSignedIn(e) {
    for (var i = 0; i < User.get_contacts().get_count(); ++i) {
        // コンタクトユーザーの CID 取得
        var c = User.get_contacts().get_item(i).get_cid();
        
        // Display Picture コントロールの追加 (<div id="contacts"></div>が<body>内にあること)
        $create(Microsoft.Live.UI.Messenger.DisplayPictureControl,
        { cid: c },
        null,
        null,
        $get('contacts'));
    }
}

UserオブジェクトのContactsプロパティーからコンタクトのメンバー情報を取得しています。コンタクト人数分、ループしDisplay Picture コントロールを生成しています。実行結果は図7のようになります。

図7 コントロールの動的追加
図7 コントロールの動的追加

コントロールの生成には、$createというヘルパーメソッドが用意されていますので、それを使用します。第1引数にコントロールの種類(型)を指定し、第2引数に属性とその値を指定しています。最後の引数には、DOM要素を指定します。上記の例では、<body>要素内に以下の記述があると動作します。この<div>要素内にコントロールが追加されていきます。

<div id="contacts"></div>

DisplayPictureControl部分をDisplayNameControlなどに変更することで、これまで紹介したコントロールを生成できます。コントロールに合わせて、属性の指定部分も変更する必要があります。詳しくはMSDN Libraryのリファレンスを参照してください。

今回登場した、$createはLive Messenger Web Toolkitによるものではなく、ASP.NET Ajax Libraryで定義されたものです。Live Messenger Libraryのアップグレードにより、ASP.NET Ajax LibraryによってLive Messenger Libraryが作られています。

Web Toolkit Version 3.7

最後にLive Messenger Web Toolkitのアップグレードが前回の記事掲載後にありましたので、それについて触れておきましょう。前回まで使用していたバージョンは3.5で、バージョン3.7にアップグレードしています。

ASP.NET Ajax Library

更新内容は、UI Controlsが上記で少し書いたようにASP.NET Ajax Libraryで作られるようになったようです(以前はScript#というC#からJavaScriptへコード変換するコンパイラを使用していました⁠⁠。この変更によりAjax Libraryにある機能を利用できるだけでなく、jQueryとも親和性の高い開発が可能になっています。Script#の機能を用いて開発していた場合は、若干の留意事項があります。詳しくはMSDN Libraryを参照してください。

オフライン インスタントメッセージ

Live Messengerには相手がオフラインのときでもメッセージを送信でき、受信者はオンラインになったときにメッセージを受け取ることができる機能があります。PC版だけが利用できた機能ですが、Live Messenger Web Toolkitでも利用できるようになっています。

Application Contacts

本連載では紹介していませんが、Application Contactsコントロールというものがあります。これの機能が変更されています。このコントロールについては次回に紹介予定です。

Webブラウザーサポート

Live Messenger Web ToolkitがサポートするWebブラウザーバージョンが増えています。また各Webブラウザー間の互換性も向上したようです。

連載ではまったく触れていませんでしたが、現在、Live Messenger Web ToolkitがサポートしているWebブラウザーは以下の通りです。

  • Internet Explorer 6, 7, 8
  • Mozilla Firefox 1.5, 2.0, 3.0, 3.5, 3.6(1.5, 2.0は制限あり)
  • Safari 3.2, 4.0(3.2は制限あり)
  • Google Chrome 2.0, 3.0, 4.0(2.0は制限あり)

Web Toolkitは、多くのWebブラウザーとそのバージョンに対応しているといえるのではないかと思えますが、残念ながらOperaはサポート外です。

今回の新しいライブラリーを適用するにはXHTML内のloader.jsを参照している<script>要素を次のものに変更するだけです。

<script type="text/javascript" src="http://www.wlmessenger.net/api/3.7/loader.js"></script>

いかがでしたでしょうか。次回もLive Messenger Web Toolkitについて紹介する予定です。Live Messenger Web Toolkit特有の重要な機能を使ってみたいと思います。

おすすめ記事

記事・ニュース一覧