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

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

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

メッセージの表示

インスタントメッセージを送受信したときに,画面にそれらのメッセージを表示するようにしましょう。メッセージの送信者のアイコンと名前はUI Controlsを利用し,メッセージの送受信時に動的に追加します。<ul>要素に以下のような内容を追加するコードを書きます。

<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>

実際のコードは以下の通りです。メッセージの表示(画面へ追加)処理はshowMessageという関数に記述します。既に出てきたコードでもshowMessageを呼び出すようにしています。

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で検索

最後に送受信したメッセージテキスト内に「○○で検索」という内容が含まれていた場合,その内容でWeb検索結果を自動送信するようにします。

Bingでの検索はBing APIを利用します。Bing APIについては本連載で扱っていいませんが,その内容はBingブランド移行前のLive Search API 2.0とほぼ同じです(Bing APIの最新バージョンはLive Search APIのバージョンを引き継いで2.2です⁠⁠。Live Search APIについては第25回で紹介しています。併せて参照してください。

コードは次の通りです。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"
    });
}

「○○で検索」という形式であれば検索ワード部分を取り出し,jQueryのajaxメソッドを使ってBing APIを非同期で呼出します。受信結果はsuccessオプションに指定した関数が呼ばれるように記述しています。検索結果のメッセージを自動で送信する必要があるため,各呼び出しの元となった送信者のCIDがわかるようにしています。

検索結果を元にメッセージを送信する関数は次のようになります。

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連載のまとめというわけではないですが,簡単なアプリケーションを作成しました。本連載では作成できませんでしたが,Webサーバー上のデータベースを用意してユーザー情報を保存できるようにし,前回のアプリケーションコンタクトを活用するとより本格的なLive Messengerと統合したWebアプリケーションが作成できるかと思います。Twitterと連携もおもしろいかもしれません。

今回のアプリケーションは,例外処理や送信失敗時の処理などは実装していませんので実用に耐えるものにするには,もう少し作り込みが必要です。より詳細な情報は,Live Messenger Libraryのリファレンスをご確認ください。

著者プロフィール

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

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

URL:http://katamari.jp