メッセージの表示
インスタントメッセージを送受信したときに,
<li>
<div class="picture"><msgr:display-picture cid="..." presence-enabled="false" size="medium"></msgr:display-picture></div>
<div class="name"><msgr:display-name cid="..." editable="false" linked="true"></msgr:display-name></div>
<span class="message">メッセージ</span>
</li>
実際のコードは以下の通りです。メッセージの表示
function showMessage(cid, text) {
var li = $("<li>");
var pic = $("<div>").addClass("picture");
$create(Microsoft.Live.UI.Messenger.DisplayPictureControl,
{ cid: cid, presenceEnabled: false, size: "medium" },
null, null, pic.get(0));
li.append(pic);
var name = $("<div>").addClass("name");
$create(Microsoft.Live.UI.Messenger.DisplayNameControl, { cid: cid }, null, null, name.get(0));
li.append(name);
li.append($("<span>").addClass("message").text(text));
$("#messages>ul").prepend(li);
}
この動的なUI Controlsの作成は第35回でも紹介しています。
Bingで検索
最後に送受信したメッセージテキスト内に
Bingでの検索はBing APIを利用します。Bing APIについては本連載で扱っていいませんが,
コードは次の通りです。search関数の引数には送受信メッセージのテキストと送信者のCIDを渡すようにします。
var appId = "取得したApplication ID";
function search(text, cid) {
if (!text.match(/(.+)で検索/) || RegExp.$1.match(/で検索/)) {
return false;
}
// Bing で検索
$.ajax({
type: "GET",
url: "http://api.bing.net/json.aspx",
dataType: "jsonp",
data: {
AppId: appId,
Version: 2.2,
Market: "ja-JP",
Query: RegExp.$1,
Sources: "web",
"Web.Count": 1,
JsonType: "callback"
},
success: function (data, dataType) {
procSearchResult(data, cid);
},
jsonp: "JsonCallback"
});
}
「○○で検索」
検索結果を元にメッセージを送信する関数は次のようになります。
function procSearchResult(response, cid) {
if (response.SearchResponse.Errors) {
var text = "";
$.each(response.SearchResponse.Errors, function () {
text += this.Message + "\n";
});
alert(text); // error!
return false;
}
var text = "";
if (response.SearchResponse.Web.Total == 0) {
text = response.SearchResponse.Query.SearchTerms + "の検索結果 (0件)";
} else {
text = response.SearchResponse.Query.SearchTerms + "の検索結果 (" +
response.SearchResponse.Web.Total + "件)\n" +
response.SearchResponse.Web.Results[0].Title + "\n" +
response.SearchResponse.Web.Results[0].Url;
}
// 検索結果を送信
sendMessage(cid, text);
}
以上で完了です。実際にアプリケーションをWebに配置して確認してみましょう。
おわりに
いかがでしたでしょうか。今回はここまでです。Live Messenger Web Toolkit連載のまとめというわけではないですが,
今回のアプリケーションは,