Twitter風？ Live Messengerアプリ
今回は，第33回から36回までに渡り紹介してきたLive Messenger Web Toolkitを利用して，簡単なTwitter風？ のWebアプリを作ってみたいと思います。これまでに紹介したUI Controlsに加え，Live Messenger Libraryとも連携し，アプリケーションを作ります。
作成するアプリケーションは図1のような画面のアプリケーションです。サインイン後，左上のリストからメンバーを選択してインスタントメッセージを送れます。異なるユーザーとの会話のメッセージを1画面に時系列で列挙するところがTwitterぽいと言えるかもしれません……。
図1 Twitter風？Live Messengerアプリ
実装する機能はそう多くありません。次の機能を実装します。
- サインインユーザーの表示
- オンラインメンバーの表示
- メッセージの送信
- メッセージの受信
- メッセージの表示
- Bingの検索結果表示
少しオリジナルな機能として「○○で検索」とメッセージを送信または受信するとBingの検索結果を自動で応答するようにします。
検索を除いて基本的な機能ばかりですが，これまでのUI Controlsの使用だけでは実現できません。Live Messenger Libraryを利用してメッセージの送信処理や受信イベント，オンラインユーザーの取得や更新を実装する必要があります。
ベースとなる部分はこれまでと同じようにSDKに含まれるASP.NETのサンプルを元にします。認証部分さえ別のプログラミング言語で実装すればASP.NETである必要はありません。Live Messenger Web LibraryはJavaScriptを記述して利用しますが，画面の操作などにJavaScriptのライブラリーのjQueryも利用します。jQueryについては本連載では解説していません。
画面の作成
最初に本題ではない，見た目の部分を作成してしまいましょう。アプリケーションの画面となるXHTMLは次のように記述します。ASP.NETの場合，Default.aspxに記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja-jp"
xmlns:msgr="http://messenger.live.com/2009/ui-tags">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Live Messenger Web Toolkit</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.wlmessenger.net/api/3.7/loader.js" type="text/javascript"></script>
<script type="text/javascript">
// ここにコードを追加
Microsoft.Live.Core.Loader.load(['messenger.ui.styles.core', 'messenger.ui']);
</script>
<style type="text/css">
body {
background-color: #cde; }
#content {
margin: 30px auto;
width: 800px;
background-color: White; }
#console {
padding: 20px; }
#consoleLeft {
float: left;
width: 520px; }
#consoleRight {
float:right;
width: 220px; }
#userPicture {
float: left;
width: 30px;
height: 30px; }
#userMessage {
clear:both; }
#text {
margin: 10px 0 10px 0; }
#sendButton {
float:right;
width: 120px;
height: 30px; }
#messages {
clear: both;
margin-top: 50px; }
#messages ul {
margin: 0;
padding: 20px 20px 50px 20px;
list-style: none; }
#messages li {
clear: left;
border-top: 1px solid #ccc;
padding: 5px; }
#messages .picture {
float: left;
width: 55px;
height: 54px; }
#messages .name {
padding-right: 5px; }
</style>
</head>
<body>
<!-- Messenger Appliaction コントロール -->
<msgr:app
id="appTag"
application-verifier-token="<%= ApplicationVerifier %>"
privacy-url="Privacy.html"
channel-url="Channel.html"
token-url="RefreshMessengerToken.aspx"
onAuthenticated="onAuthenticated"
onSignedIn="onSignedIn"
onSignedOut="onSignedOut">
</msgr:app>
<div id="content">
<div id="console" style="clear: both;">
<div id="consoleLeft">
<!-- コンタクトリストの表示とテキスト入力エリア -->
<form action="#">
<select id="onlineContacts"><option /></select>
<span>にインスタントメッセージを送る。</span>
<div><textarea id="text" cols="30" rows="2" style="width:512px;"></textarea></div>
<input id="sendButton" type="button" value="送信" disabled="disabled" />
</form>
</div>
<div id="consoleRight">
<!-- サインイン ユーザーの情報表示エリア -->
</div>
</div>
<div id="messages">
<ul>
<!-- インスタントメッセージ表示エリア -->
</ul>
</div>
</div>
<!-- for Debug -->
<msgr:bar></msgr:bar>
</body>
</html>
Messenger Applicationコントロールについては第34回を参考にしてください。Messenger Web Barコントロールは，デバッグや動作確認のため追加しています。上記でコメントとなっている部分に，これから追記していきます。
ここまでのVisual Studioの環境は図2のようになっています。
図2 Visual Studio 画面
