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

第12回 Live Messenger Library ―― オリジナルLive Messengerの作成(中編)

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

Messenger Library アプリケーションの作成

前回に引き続きWindows Live Messenger Libraryを利用してWebページ上にLive Messengerの機能を実装していきます。はじめに今回作成するアプリケーションを示しておきましょう図1)。ユーザ自身や登録しているメンバーの表示,メンバーとのメッセージのやり取りといったメインとなる処理を今回は紹介します。作成するアプリケーションはMessenger Libraryの機能を単純に利用しただけのものになっています。

図1 作成するアプリケーション

図1 作成するアプリケーション

前回に用意した環境と作成したファイルを使って進めていきます。前回はSign-in Controlをホストするところまで行いました。その状態から,ファイルMain.jsにJavaScriptのコードを追記していきます。Sign-in Controlをホストするところまでは前回の記事を参照してください。

Deafult.htmの編集

Default.htmファイルに関しては,新たな情報をいろいろと表示させるため編集します。スタイルシートのファイルも追加しました。まったく同じようにする必要はありませんが,この後に出てくるコードでは各種情報の表示のために以下のDefault.htmに記述したdivタグのid属性値を使用しています。

Default.htm

<!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">
<head>
<title>Live Messenger Library Sample</title>
<link rel="stylesheet" href="Style.css" type="text/css" /> 
<script type="text/javascript" src="http://settings.messenger.live.com/api/1.0/messenger.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body onload="Gihyo.LiveSample.pageLoaded();">
<div id="frame">

    <div id="signInFrame"></div>

    <div id="userInfo">
        <div id="displayPicture"></div>
        <div id="status"></div>
        <div id="displayName"></div>
        <div id="personalMessage"></div>
    </div>

    <div>Contact List</div>
    <div id="contacts"></div>

    <div>Active Conversations</div>
    <div id="conversations"></div>
    
    <div><input id="message" type="text" /> <input type="button" value="Send" onclick="Gihyo.LiveSample.sendMessage();" /></div>
    <div id="messages"></div>

</div>
</body>
</html>

Style.css

body {
        font-family: メイリオ;
        font-size: 0.8em;
}       

#frame {
        width: 400px;
}

#signInFrame {
        height: 120px;
}

#userInfo {
        margin: 10px 0 10px 0;
        height: 100px;
}

#displayPicture {
        float: left;
        margin-right: 5px;
}

#contacts, #conversations, #messages {
        margin-bottom: 10px;
        border: solid 1px #ccc;
}

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入