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

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

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

動的なコントロールの生成

次はLive Messenger Libraryで取得した値を用いて,JavaScriptのコードから動的にUI Controlsを生成します。

先ほど作ったJavaScriptのonSignedIn関数内に処理を記述します。この関数内ではサインインが完了しているため,ユーザーのコンタクトリストの参照も可能です。試しにコンタクト全員分のDisplay Pictureコントロールを生成してみましょう。

コードは次のようになります。

function onSignedIn(e) {
    for (var i = 0; i < User.get_contacts().get_count(); ++i) {
        // コンタクトユーザーの CID 取得
        var c = User.get_contacts().get_item(i).get_cid();
        
        // Display Picture コントロールの追加 (<div id="contacts"></div>が<body>内にあること)
        $create(Microsoft.Live.UI.Messenger.DisplayPictureControl,
        { cid: c },
        null,
        null,
        $get('contacts'));
    }
}

UserオブジェクトのContactsプロパティーからコンタクトのメンバー情報を取得しています。コンタクト人数分,ループしDisplay Picture コントロールを生成しています。実行結果は図7のようになります。

図7 コントロールの動的追加

図7 コントロールの動的追加

コントロールの生成には,$createというヘルパーメソッドが用意されていますので,それを使用します。第1引数にコントロールの種類(型)を指定し,第2引数に属性とその値を指定しています。最後の引数には,DOM要素を指定します。上記の例では,<body>要素内に以下の記述があると動作します。この<div>要素内にコントロールが追加されていきます。

<div id="contacts"></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>要素を次のものに変更するだけです。

<script type="text/javascript" src="http://www.wlmessenger.net/api/3.7/loader.js"></script>

いかがでしたでしょうか。次回もLive Messenger Web Toolkitについて紹介する予定です。Live Messenger Web Toolkit特有の重要な機能を使ってみたいと思います。

著者プロフィール

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

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

URL:http://katamari.jp