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

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

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

使ってみようMessenger Web Bar

Live Messenger UI ControlsのひとつにMessenger Web Barというコントロールが用意されています。これはLive Messengerのほぼすべての機能が利用できる特徴的なコントロールです。コンタクトリストの表示・編集やインスタントメッセージの送受信,ユーザーのプロフィールの表示・編集などが可能です。

それでは実際に使ってみましょう。次回の内容と少し重なるのですが,オンライン上で簡単にUI Controlsを試すことのできるInteractive SDKが用意されています図4⁠。このWebサイトへアクセスし,LeanタブのBarを選択するとMessenger Web Barを使えます。

図4 Live Messenger Web Toolkit Interactive SDK

図4 Live Messenger Web Toolkit Interactive SDK

Barを選択時にウィンドウ下に表示されているのがMessenger Web Barです。⁠サインイン」ボタンをクリックすることでLive Messengerにサインインします。はじめてサインインしたときはバルーンで簡単な使い方が表示されます。

サインインの際には,当然のことながらLive IDアカウントによるサインインが必要です。IDによるサインインに加えて図5のような確認画面が表示されると思います。これは,本連載でこれまでに紹介したWindows Live APIやSDKの一部でも使用していたWindows Live ID Delegated Authentication(委任認証)です。Live Messenger Web Toolkitを利用したWebサイトはユーザーの情報を入手できることになります。そのため,ユーザーはWebサイトに対して許可を与えるという手順を踏みます。

図5 確認画面

図5 確認画面

サインインが完了したら,実際にいろいろと操作してみてください。Webサイト上であるにも関わらず多くの機能が使えることがわかります図6⁠。図に示した以外にも,メンバーの招待やコンタクトリストにカテゴリの作成なども可能です。このページではわかりませんが,違うページに移動した場合もサインイン状態を維持することもできます。

図6 Messenger Web Bar

画像

画像

画像

PCのLive Messengerと比較してできない機能もあげておくと,表示アイコンやサウンドの変更,手書き入力,写真の共有,映像・ゲーム・アプリ関連などがあります。複数人の会話もMessenger Web Barからは招待されない限りできません。

Messenger Web Barの設置

次にMessenger Web Barを自分のWebサイトに設置してみましょう。すでに述べたようにUI Controlsの利用にプログラミングは必要ありません。WebサイトのXHTMLコードに以下のタグを追加することでMessenger Web Barがページ下部に表示されます。

<msgr:bar></msgr:bar>

XHTML文書の作成

上記でXHTMLと書いたように,UI Controlsの設置にはXHTMLで記述されたWebページである必要があります。また、<html>要素にはmsgrという名前空間を追加しておきます。さらに、日本語表示に対応する場合は<html>要素にxml:lang="ja-jp"と記述することで行います。

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

ライブラリーの参照とロード

UI Controlsを利用するには<script>要素によって,JavaScriptライブラリーを参照する必要があります。ライブラリーは非同期の読み込みをサポートしており,必要なライブラリーだけロードします。そのコードも記述します。

<script type="text/javascript" src="http://www.wlmessenger.net/api/3.5/loader.js"></script>
<script type="text/javascript">
    Microsoft.Live.Core.Loader.load(['messenger.ui.styles.core', 'messenger.ui']);
</script>

Messenger Applicationコントロールの追加

Messenger Web BarなどUI Controlsを利用する場合,必ずApplicationコントロールと呼ばれるコントロールも一緒に追加する必要があります。これは実際にWebページに表示されるものではなく,認証情報などを設定するものです。<msgr:app>要素をUI Controlsを使用する各ページの<body>要素内に追加します。

以上までをまとめると次のようになります。

<!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 type="text/javascript" src="http://www.wlmessenger.net/api/3.5/loader.js"></script>
    <script type="text/javascript">
        Microsoft.Live.Core.Loader.load(['messenger.ui.styles.core', 'messenger.ui']);
    </script>
</head>
<body>
    <msgr:app   
        id="appTag"   
        application-verifier-token="***Application Verifier***"
        privacy-url="Privacy.html"
        channel-url="Channel.html"
        token-url="RefreshMessengerToken.aspx">
    </msgr:app>
    <msgr:bar></msgr:bar>
</body>
</html>

残念ながらまだこのままでは動作しません。<msgr:app>要素には,認証に必要な各種属性の値を設定しなければなりません。

UI Controlsは簡単に使用できると書いてきましたが,認証部分がとてもやっかいです。またプログラミングも必要とし,JavaScriptのコードだけでは解決できません。ただし,各種サンプルが用意されていますので,それらを使ってできるだけ簡単にUI Controlsを設置して動作させるまでの作業を,次回にその他のUI Controlsの利用と併せて行います。

先に進みたい方は,Interactive SDKのBeginタブからサンプルコードがダウンロードできます。各種言語のサンプルが含まれています。Visual BasicではWebToolkit\GettingStarted\VBフォルダーにASP.NET Webサイトプロジェクトがあります。これを元に利用するとMessenger Web Barが使えるようになります。ただし,Live Services Developer PortalでApplication IDの取得や,web.configファイルの編集が必要です。

また,次回以降も委任認証の詳しい仕組みについては紹介しません。委任認証については第14回15回で紹介しています。興味のある方はこちらを参照してください。若干,内容が古くなっていますが,基本的な考えは変わりありません。ただし,Live Messenger Web Toolkitでは,図5のように専用の認証画面や手続きが用意されています。

著者プロフィール

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

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

URL:http://katamari.jp