Messenger Library アプリケーションの作成
前回に引き続きWindows Live Messenger Libraryを利用してWebページ上にLive Messengerの機能を実装していきます。はじめに今回作成するアプリケーションを示しておきましょう
図1 作成するアプリケーション
前回に用意した環境と作成したファイルを使って進めていきます。前回はSign-in Controlをホストするところまで行いました。その状態から，
Deafult.htmの編集
Default.
Default.
<!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.
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;
}