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

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

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

メッセージの受信と表示

作成するアプリケーションでは,アクティブな会話一覧から会話を選択し,選択している会話のみページに表示するようにします。また,選択している会話のみメッセージ受信のイベントを関連付け処理するようにします。選択していない会話の受信メッセージはページに表示しないだけで取りこぼすという意味ではありません。

会話一覧から会話を選択したときに呼ばれるメソッドを記述します。手順は次のとおりです。

  1. 選択していた会話のConversationオブジェクトからイベントの関連付けを削除
  2. 新たに選択した会話のConversationオブジェクトのMessageReceivedイベントを関連付け
  3. ConversationオブジェクトのHistoryプロパティからメッセージの履歴を取得・表示

選択したConversationオブジェクトを記憶しておく必要があります。次のようにprototypeオブジェクトを使用してselectedConversationプロパティを作って管理するようにしました。

Gihyo.LiveSample.prototype.selectedConversation = null;

Gihyo.LiveSample.selectConversationメソッドの内容は次のように記述します。Conversation.Historyプロパティには,Conversationオブジェクトが作成されてからのメッセージが格納されています。これを用いて会話を選択したときメッセージ履歴を表示しています。プロパティの型はMessageHistoryクラスです。コレクションとして扱え,メッセージを表すMessageオブジェクトを列挙できます。

Gihyo.LiveSample.selectConversation = function(index) {

    // イベント関連付けの削除
    if (Gihyo.LiveSample.selectedConversation != null) {
        Gihyo.LiveSample.selectedConversation.remove_messageReceived(Gihyo.LiveSample.messageReceived);
    }
    
    // Conversationオブジェクト取得
    var conversation = Gihyo.LiveSample.User.get_conversations().get_item(index);

    // イベント関連付け
    conversation.add_messageReceived(Delegate.create(null, Gihyo.LiveSample.messageReceived));

    Gihyo.LiveSample.selectedConversation = conversation; // 選択したConversationオブジェクトを記憶させておく
    $('messages').innerHTML = ''; // 会話表示欄をクリア

    // 会話の履歴を表示
    var history = conversation.get_history().getEnumerator();
    while (history.moveNext()) {
        Gihyo.LiveSample.displayMessage(history.get_current());
    }
}

続いてMessageReceivedイベントに関連付けたGihyo.LiveSample.messageReceivedメソッドです。イベント引数のオブジェクトからMessageオブジェクト取得し,Gihyo.LiveSample.displayMessageに渡しています。

Gihyo.LiveSample.messageReceived = function(sender, e) {
    Gihyo.LiveSample.displayMessage(e.get_message());
}

最後に会話の履歴表示とメッセージ受信時に呼び出しているGihyo.LiveSample.displayMessageメソッドは次のようになります。

Gihyo.LiveSample.displayMessage = function(message) {
    if (message.get_type() === Microsoft.Live.Messenger.MessageType.textMessage) {
        var span = document.createElement('span');
        var name = message.get_sender().get_presence().get_displayName();
        span.appendChild(document.createTextNode(name + 'の発言: '));
        
        var div = document.createElement('div');
        div.appendChild(span);
        div.appendChild(message.createTextElement());
        $('messages').appendChild(div);
    }
}

受信されるメッセージにはいくつか種類があり,通常のテキストメッセージのときのみ処理するよう条件式を入れています。Messageオブジェクトには,IMAddress クラス型Senderプロパティがあり,送信者の情報が取得できます。また,TypeプロパティがMicrosoft.Live.Messenger.MessageType.textMessageのとき,CreateTextElementメソッドが使用できます。このメソッドは文字色などの修飾を適用したメッセージをspanタグで括られたDOMエレメントとして返します。

以上で受信したメッセージの表示までできるようになりました。アクティブな会話一覧から会話を選択すると,その会話のメッセージが表示されます。ユーザに対してメッセージが送信されると,そのメッセージが追加表示されると思います。別アカウントを利用して試して見ましょう。実行結果を図5に示します。

図5 メッセージの受信・表示

図5 メッセージの受信・表示

著者プロフィール

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

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

URL:http://katamari.jp