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

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

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

Messenger Web Barの動作確認

以上で,サンプルファイルをWebサイトプロジェクトにできました。前回にDefault.aspxにあたる部分のXHTMLは記述しています。Default.aspxの<!DOCTYPE から</html>までの内容を以下の内容に変更します。

<!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="<%= ApplicationVerifier %>"
        privacy-url="Privacy.html"
        channel-url="Channel.html"
        token-url="RefreshMessengerToken.aspx">
    </msgr:app>
    <msgr:bar></msgr:bar>
</body>
</html>

上記は前回のものとほぼ同様ですが,<msgr:app>要素のapplication-verifier-tokenの値のところだけ異なります。ここに生成されたアプリケーション検証トークンが設定されるように記述します。サンプルを用いた場合,上記のように記述することでWebサイトが表示されたときに正しい値が設定されるようになります。

それでは,実際にMessenger Web Barが動作するか確認してみましょう。Live Messenger Web Toolkitは,アプリケーション登録で指定したドメイン下でしか動作できません。動作確認には,実際にWebサイトへアップロードするか,Windowsであればhostsファイルを編集しローカルの開発サーバーに対象ドメインでアクセスできるように細工する必要があります。サイトプロジェクトのアップロードは,ソリューションエクスプローラの右クリックメニューにあるWebサイトのコピーからできます図6⁠。

図6 Webサイトのコピー

図6 Webサイトのコピー

Webサイトへアクセスし,Messenger Web Barからサインインしてみてください。ただしく動作したでしょうか? サインインできれば正しく認証処理ができていますので,この後紹介するUI Controlsも動いてくれるでしょう。少し長い道のりでしたが,ここまでがMessenger Applicationコントロールに有効な値を設定する方法でした。

Sign Inコントロール

Messenger Web BarとMessenger Applicationコントロール以外も見ていきましょう。最初は,Sign Inコントロールです。名前のとおりLive Messengerにサインインするためのコントロールです。次のようにXHTMLページに記述します。

<msgr:sign-in></msgr:sign-in>

するとWebページを開いたとき図7のように表示されます。

図7 Sign Inコントロール

図7 Sign Inコントロール

以下のようにタグに属性をつけると図8のように簡単に見た目を変更することもできます。

<msgr:sign-in theme="Light"></msgr:sign-in>
<msgr:sign-in theme="Blue"></msgr:sign-in>
<msgr:sign-in theme="Dark"></msgr:sign-in>
<msgr:sign-in theme="Light" size="small"></msgr:sign-in>
<msgr:sign-in theme="Blue" size="Medium"></msgr:sign-in>
<msgr:sign-in theme="Dark" size="Large"></msgr:sign-in>

図8 Sign Inコントロールのカスタマイズ

図8 Sign Inコントロールのカスタマイズ

属性による変更以外にもSign Inコントロールを構成するXHTMLタグの各要素にはCSS(Cascading Style Sheets)のクラス名が定義されています。開発ツールなどを用いて値を確認し,CSSの値を上書き定義することで見た目の変更もできます。クラス名のリファレンスはMSDN Libraryでも確認できます。

以上の属性のほかにもonconsentcompletedという属性にJavaScriptの関数名を指定すると,認証後にその関数呼び出しという動作も可能です。

著者プロフィール

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

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

URL:http://katamari.jp