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の会話ウィンドウにあたる部分ですね。

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

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⁠）⁠。

これらのクラス名を用いて実際に運用するときは見た目を変更しましょう。その他のコントロールへ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⁠）⁠。

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

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

※1

会話作成はContact Listコントロールを使用すると可能です。

タグは次のように記述すると，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>