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

第37回 Live Messenger Web Toolkit──WebサイトにLive Messenger機能を追加(5)

この記事を読むのに必要な時間:およそ 9 分

サインイン処理とユーザー情報の表示・編集

ユーザーのサインイン処理(サインインボタンの設置)と,名前・アイコン・表示メッセージについては,UI Controlsを利用します。それぞれ,Sign Inコントロール,Display Nameコントロール,Display Pictureコントロール,Personal Messageコントロールを使います。また,サインインしていない状態のときは,ユーザー情報を表示しないようにIfコントロールも使います。

XHTMLのサインイン ユーザーの情報表示エリア部分を次のように編集します。

<!-- サインイン ユーザーの情報表示エリア -->
<!-- Sign In コントロール -->
<msgr:sign-in size="medium" theme="blue"></msgr:sign-in>
<msgr:if cid="$user" condition="online"><!-- If コントロール -->
        <!-- 表示アイコン Display Picture コントロール -->
    <div id="userPicture"><msgr:display-picture cid="$user" presence-enabled="false" size="small"></msgr:display-picture></div>

        <!-- 名前 Display Name コントロール -->
    <div><msgr:display-name cid="$user" linked="true"></msgr:display-name></div>

        <!-- 表示メッセージ Personal Message コントロール -->
    <div id="userMessage"><msgr:personal-message cid="$user"></msgr:personal-message></div>
</msgr:if>

Display Pictureコントロールのpresence-enabled属性をfalseにすると,オンラインや退席などの状態を表す枠が表示されません。Display NameやPersonal Messageコントロールは,テキストの編集機能も備えているので,XHTML記述だけで表示と編集処理部分ができます。

サインインしていないときの画面は図3のようになります。

図3 サインインしていない場合の画面

図3 サインインしていない場合の画面

Live Messenger Library

ここまではUI Controlsの設置だけでした。ここからはLive Messenger Libraryを利用してJavaScriptコードを記述していきます。Live Messenger Libraryを利用すると,Live Messenger機能をWebアプリケーションに追加できUI Controlsと比べ柔軟に各種動作を制御できます。

ユーザーオブジェクトの取得

Live Messengerのほとんどの操作はサインインしたユーザーに対して行います。Live Messenger Libraryでは,サインインユーザーを表すUserオブジェクトを取得し,このオブジェクトを元にさまざまな操作をしていきます。Userオブジェクトの取得は第35回でも紹介しています。

Windows Liveサービスとの認証完了後にUserオブジェクトを取得します。Messenger ApplicationコントロールのonAuthenticated属性に認証完了後に呼ばれる関数を指定してあります。ここでUserオブジェクトを取得しましょう。次のJavaScriptのコードを追記します。

var User;

function onAuthenticated(e) {
    // 認証完了

    // User オブジェクト取得
    User = e.get_user();
}

オンラインメンバーの表示

次にユーザーのコンタクトリストのうちオンラインのメンバーのみを取得し,<select>要素内に表示します。コンタクトリストはユーザーがサインインした後に参照し,オンラインユーザー数が変わった場合に処理を行うよう記述します。

ユーザーのサインインとサインアウトのイベントはMessenger Applicationコントロールを使い通知を受けます。onSignedInとonSignedOut属性にそれぞれサインイン・サインアウトしたとき呼ばれる関数を指定します。

オンラインのコンタクトリストは,UserオブジェクトのOnlineContactsプロパティから参照できます。このプロパティはコレクションとして実装されており,内容に変更があった場合,イベントとして通知を受け取れます。

上記の内容をコードで書いてみましょう。サインイン・サインアウトに呼ばれる関数は次のようになります。

function onSignedIn(e) {
    // 送信ボタンの有効化
    $("#sendButton").removeAttr("disabled");

    // オンラインのメンバーに更新があった場合に呼ぶ関数を指定
    User.get_onlineContacts().add_collectionChanged(onlineContactsCollectionChanged);

    // 会話コレクションに更新があった場合に呼ぶ関数を指定
    User.get_conversations().add_collectionChanged(conversationCollectionChanged);
}

function onSignedOut(e) {
    // 送信ボタンの無効化
    $("#sendButton").attr("disabled", "disabled");
}

オンラインのコンタクトはUser.get_onlineContacts()と記述して参照します。Live Messenger Libraryではプロパティをget_, set_のプレフィックスを付けてアクセスします。コレクションの内容が変化したときに発生するCollectionChangedイベントをadd_collectionChanged(関数)のように記述し,イベントと呼ばれる関数を関連付けしています。

上記コードでは,サインイン・サインアウトに合わせて送信ボタンの有効・無効化と,メッセージ送受信時に必要となるイベントの関連付けも行っています。

オンラインコンタクトの内容に変更があった場合,onlineContactsCollectionChanged関数が呼ばれます。ここでメンバー一覧を取得し<select>要素に<option>要素を追加します。<option>要素のvalue属性にはメンバーを一意に表すCIDの値を指定し,メッセージの送信時に使用します。

function onlineContactsCollectionChanged() {
    var list = $("#onlineContacts"); // <select>要素
    var selectedCid = list.val(); // 選択されている項目の value 属性値を取得
    var existed = false;
    list.children().remove(); // 一度 <select>要素内の項目を削除

    // オンラインのメンバー列挙
    for (var i = 0; i < User.get_onlineContacts().get_count(); ++i) {
        var c = User.get_onlineContacts().get_item(i);
        var cid = c.get_cid(); // メンバーの CID 取得
        if (cid == selectedCid) {
            existed = true;
        }
        // <option>要素の追加 value属性には CID を指定し、表示テキストはメンバーの名前を指定
        list.append($("<option>").attr("value", cid).text(c.get_displayName()));
    }

    if (existed) {
        // 一覧の更新前に選択されていた項目を選択
        list.val(selectedCid);
    }
}

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp