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ページに記述するタグは次のようになります。
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>要素で囲むことが推奨されています。
こうすることで、ConversationコントロールのみCSSを設定できます。
Conversation Listコントロール
もうひとつのConversation Listコントロールは、サインインユーザーの現在の会話をリスト表示するためのコントロールです(図3)。
インスタントメッセージを受信すると、相手の名前が表示され、点滅します。Conversation Listコントロールは、Conversationコントロールと同等の会話機能も備えており、名前の部分をクリックすることでその相手と会話を開始できます(図4)。
複数人から会話を受信した場合は、リストに名前が追加され、会話の表示を切り替えて使用します(図5)。新たに会話を始めることはできませんが[1]、名前部分を右クリックすることで会話の終了が可能になっています。
タグは次のように記述すると、Webページにコントロールが追加されます。
属性を指定することで各種イベントが発生したときにJavaScriptの関数を呼ぶことも可能です。上から順に会話の終了・作成・選択時のときのものです。
Conditional Flowコントロール
少し変わったコントロールとして、Conditional Flowコントロールというものがあります。これはユーザーのオンライン状態によって表示内容を変更するために用います。IfコントロールとElseコントロールがあり、プログラミングのIf Else(分岐)構文を実現します。
使用方法は次の通りです。
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コントロールにはあります。
JavaScriptの関数は次のように書きます。XHTML<head>要素内に追加してください。ここではユーザーのCIDを表示しています。
実行した結果は、図6の通りです。サインインしたユーザーのCIDが表示されたでしょうか。
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コントロールを生成してみましょう。
コードは次のようになります。
UserオブジェクトのContactsプロパティーからコンタクトのメンバー情報を取得しています。コンタクト人数分、ループしDisplay Picture コントロールを生成しています。実行結果は図7のようになります。
コントロールの生成には、$createというヘルパーメソッドが用意されていますので、それを使用します。第1引数にコントロールの種類(型)を指定し、第2引数に属性とその値を指定しています。最後の引数には、DOM要素を指定します。上記の例では、<body>要素内に以下の記述があると動作します。この<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>要素を次のものに変更するだけです。
いかがでしたでしょうか。次回もLive Messenger Web Toolkitについて紹介する予定です。Live Messenger Web Toolkit特有の重要な機能を使ってみたいと思います。