はじめに
前回はLive Messenger Web ToolkitのUI ControlsのMessenger Web Barを紹介し、
Messenger Applicationコントロール
Web Barを単純にXHTMLページに記述するだけでは、
委任認証に必要な情報を記述するコントロールが前回にも紹介したMessenger Applicationコントロールです。このコントロールは次のように記述します。
<msgr:app
id="appTag"
application-verifier-token="***Application Verifier***"
privacy-url="Privacy.html"
channel-url="Channel.html"
token-url="RefreshMessengerToken.aspx">
</msgr:app>
application-verifier-token、
アプリケーションの登録
委任認証を行うためには、
![図1 Live Services Developer Porta 図1 Live Services Developer Porta](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_001.png)
![図2 Service Component Properties 図2 Service Component Properties](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_002.png)
Service Component Labelには、
最後にCreateボタンをクリックして登録完了です。完了すると、
サンプルコードの利用
Messenger Applicationコントロールに設定する値の生成処理は、
使用するコードはWebToolkit\GettingStarted\VBフォルダーにあります
![図3 サンプルファイル 図3 サンプルファイル](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_003.png)
Visual Studioを使用してASP.
![図4 ASP.NET Webサイトプロジェクトの作成 図4 ASP.NET Webサイトプロジェクトの作成](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_004.png)
作成されたプロジェクトにサンプルのファイルを追加します。ソリューションエクスプローラの右クリックメニュー
![図5 ASP.NETフォルダーの追加と既存項目の追加 図5 ASP.NETフォルダーの追加と既存項目の追加](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_005.png)
web.
サンプルの下記の部分を、
<appSettings>
<add key="wll_appid" value="%%YOURAPPID%%"/>
<add key="wll_secret" value="%%YOURAPPKEY%%"/>
<add key="wll_consenturl" value="http://consent.messenger.services.live.com/"/>
</appSettings>
また、
Messenger Web Barの動作確認
以上で、
<!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>
上記は前回のものとほぼ同様ですが、
それでは、
![図6 Webサイトのコピー 図6 Webサイトのコピー](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_006.png)
Webサイトへアクセスし、
Sign Inコントロール
Messenger Web BarとMessenger Applicationコントロール以外も見ていきましょう。最初は、
<msgr:sign-in></msgr:sign-in>
するとWebページを開いたとき図7のように表示されます。
![図7 Sign Inコントロール 図7 Sign Inコントロール](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH400_007.png)
以下のようにタグに属性をつけると図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コントロールのカスタマイズ](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH400_008.png)
属性による変更以外にもSign Inコントロールを構成するXHTMLタグの各要素にはCSS
以上の属性のほかにもonconsentcompletedという属性にJavaScriptの関数名を指定すると、
ProfileコントロールとCID
次はProfileコントロールというものです。これはユーザーの名前、
![図9 Profileコントロール 図9 Profileコントロール](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH400_009.png)
タグは次のように記述します。
<msgr:profile cid="$user"></msgr:profile>
editable属性を付けると、
<msgr:profile cid="$user" editable="false"></msgr:profile>
さてProfileコントロールに指定されているcid属性について、
つまり、
UI Controlsでは、
ユーザーのCIDを確認するにはLive Messengerのプロフィールの表示
![図10 プロフィールの表示 図10 プロフィールの表示](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_010.png)
URLは次の書式になっていると思います。
http://cid-{16進数表記の値}.profile.live.com
この16進数表記の値を符号付の10進数表記にするとUI Controlsのcid属性値として使えます。$userの代わりに知り合いのCIDなどに変えて表示が変わることを確認してみてください。Profileコントロール以外の多くのコントロールでもCIDが必要になってきます。
Basic Presence/Contact/Sharingコントロール
Profileコントロールは、
- Display Nameコントロール
(表示名の表示・ 変更) - Display Pictureコントロール
(表示アイコンの表示) - Presence Statusコントロール
(オンラインなどの状態の表示・ 変更) - Personal Messageコントロール
(表示メッセージの表示・ 変更) - Profileコントロール
また、
- Add Contactコントロール
(コンタクトの追加) - Contact Listコントロール
(コンタクトの表示など) - Contact Pickerコントロール
(コンタクトの選択)
少し変わったコントロールとしてSharingコントロールというのもあります
![図11 Sharingコントロール 共有ボタン 図11 Sharingコントロール 共有ボタン](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH400_011.png)
![図12 Sharingコントロール コンタクトの選択 図12 Sharingコントロール コンタクトの選択](/assets/images/dev/serial/01/wl-sdk/0034/thumb/TH800_012.png)
ユーザーは共有ボタンをクリックし、
以上のコントロールは、
今回はここまでです。UI Controlsにはまだ種類があります。次回にはまた別のコントロールを紹介します。また今回は、