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

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

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

Twitter風? Live Messengerアプリ

今回は,第33回から36回までに渡り紹介してきたLive Messenger Web Toolkitを利用して,簡単なTwitter風? のWebアプリを作ってみたいと思います。これまでに紹介したUI Controlsに加え,Live Messenger Libraryとも連携し,アプリケーションを作ります。

作成するアプリケーションは図1のような画面のアプリケーションです。サインイン後,左上のリストからメンバーを選択してインスタントメッセージを送れます。異なるユーザーとの会話のメッセージを1画面に時系列で列挙するところがTwitterぽいと言えるかもしれません……。

図1 Twitter風?Live Messengerアプリ

図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 画面

図2 Visual Studio 画面

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入