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

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

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

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 会話の切り替え

※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>

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入