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

第10回IM Control & Presence API ―― WebページにLive Messengerの表示

IM Control & Presence API

今回はWindows Live Messenger IM ControlWindows Live Messenger Presence APIについて紹介します。どちらもWindows Live Messenger SDKに含まれ、Live Messengerの特定ユーザのプレゼンス[1]を表示できるものになります。特にIM Controlは、SDKに含まれていますがコーディングすることなく利用ができ、ブログなどのWebページにLive Messengerユーザのプレゼンスの表示およびメッセージの送受信が可能になります。

IM Control

Windows Live Messenger IM Controlを利用すると、Webサイト上にWindows Live Messengerの特定ユーザのプレゼンスを表示できます。またWebサイトの訪問者は、そのユーザとメッセージのやり取りもできるようになります。訪問者はWebブラウザから直接 図1のウィンドウを利用してメッセージの送受信が可能です。訪問者はWindows Live Messengerのインストールは必要なく、Windows Liveアカウントを持っている必要もありません。匿名として発言が可能になっています。アカウントを持っている場合、そのアカウントでサインインしてから発言も可能です。

図1 IMウィンドウ
図1 IMウィンドウ

IM Controlの設置

まず、ユーザ自身が管理するWebサイトへユーザ自身のプレゼンスを設置してみましょう。ここでユーザ自身のプレゼンスとしているのは、自分以外のユーザのプレゼンスも設置が可能だからです。これについては後ほど説明します。

ユーザ自身による設置は簡単です。その手順を以下に示します。

  1. http://settings.messenger.live.com/applications/WebSettings.aspxへ移動します。Windows Liveアカウントによるサインインが必要です。

  2. プレゼンスを公開するため「Web 上で Messenger のオンライン状態を公開し、他のユーザからのメッセージを受け取る」チェックボックスをチェックし[保存]をクリックします。これによりほかのユーザがプレゼンスを確認でき、メッセージの送受信も可能になります。注意書きに電子メールアドレスの公開とありますが、現時点のIM Controlを利用する限りではアカウントのメールアドレスは公開されません。

  3. 左のメニュー「Webの設定」から「HTMLの作成」を選択します。図2のようなページが表示されます。メッセージをやり取りするIMウィンドウと呼ばれるコントロール以外にプレゼンスを表示するボタンと状態アイコンの形式が選択でき、いずれかの形式を選択します。またテーマ(色)の選択も可能になっています。

    図2 HTMLの作成
    図2 HTMLの作成

    ボタンと状態アイコン形式の場合、IMウィンドウが開くリンクになっています。

  4. ページ下部にHTMLが生成されています。このコードをWebページに貼り付ければ利用できます。

設置が完了したら実際に利用してみましょう。匿名でメッセージの送信が可能ですので、自分自身に送ることもできます。メッセージを送る場合IMウィンドウの「会話を開始します」をクリックします。その際に匿名(デフォルトではビジターという名前になります)またはサインインが選択できます。いずれの場合も表示された文字列を入力する認証が必要です図3⁠。

図3 IMウィンドウの認証画面
図3 IMウィンドウの認証画面

Windows Liveアカウントでサインインした場合、IM Controlのユーザとしかメッセージ交換ができませんが、ほかのユーザからはオフライン状態として扱われているため、IM Controlを使用時にほかのメンバーからのメッセージ受信を取りこぼしているということはありません。

プレゼンスの公開はいつでも手順の1番目に示したURLから変更が可能です。許可しない状態の場合、IM Controlはオフライン状態で表示され、オフライン状態の場合はプレゼンスの公開・非公開に関係なく名前は表示されません。

IM Controlの利用案内

IM Controlは、ユーザ自身でWebサイトへ設置するだけでなく、例えばソーシャルネットワークサイトにて会員の各プレゼンスを表示するなど、ほかのユーザのプレゼンスを表示する利用方法も考慮されています。その場合、ユーザにプレゼンス表示を承諾してもらいプレゼンス表示に必要なIDを取得する必要があります。その手順についても説明します。

プレゼンス表示の許可を得るため、ユーザに対してサインアップページと呼ばれるWebページを案内します。次の構文からなるURLのリンクを示します。

http://settings.messenger.live.com/applications/websignup.aspx?returnurl=[returnurl]&privacyurl=[privacyurl]
パラメータ 説明
[returnurl] サインアップページから戻り先のURL
[privacyurl] サイトのプライバシーポリシーが書かれたページのURL

ユーザは一度live.comドメインにあるサインアップページ図4に移動し、承諾・拒否の選択後、元のサイトに戻ってきます。利用案内を行うサイトはプレゼンスに関する情報を取得するためプライバシーポリシーを提示する必要があります。

図4 サインアップページ
図4 サインアップページ

サインアップページにてユーザが同意またはキャンセルを行うと、戻り先に指定したアドレスへ移動します。そのときに戻り先のURLに以下のパラメータが付いてアクセスされます。

パラメータ名 説明 値の例
Result

承諾の結果。次のいずれか。

  • Accepted
  • Declined
  • NoPrivacyUrl
Accepted
id

ユーザ固有のID。resultがAcceptedの場合のみ。

12BACD345678@apps.messenger.live.com

例えば、戻り先にURLに「katamari.jp」を指定していた場合、次のようなアドレスにユーザは戻ってきます。

http://katamari.jp/?result=Accepted&id=afe8504aa8cd166f@apps.messenger.live.com

戻り先のサイトでは、resultパラメータがAcceptedの場合にidパラメータの値を取得・保存しておくことでユーザのプレゼンスの表示が可能になります。IM ControlのHTMLコードにこのIDが使用されていますので、その部分を参考にIDを置き換えて使います。

ユーザはサイトごとに承諾するような形になりますが、固有IDはIM Control、Presence APIとも共通になっています。特定のサイトのみ承諾や拒否はできません。

Presence API

Windows Live Presence APIは、Windows Live Messengerの特定ユーザのプレゼンスをJSON(JavaScript Object Notation)形式または画像形式で返すAPIです。JSONとはデータをJavaScriptで処理する際に便利な表記方法です。JavaScriptを使用してプレゼンスが取得でき、IM Controlより柔軟なプレゼンスの表示や処理が可能です。メッセージを送受信することはできないのでIM Controlと組み合わせて使うのがよいでしょう。

Presence APIの利用

Presence APIは次の構文からなるURLを利用します。

http://messenger.services.live.com/users/[ID]/[resource]/[?queryparameters]

[ID]は、id@apps.messenger.live.comの形式をしたプレゼンス表示のための固有IDを指定します。ユーザ自身のIDを確認するには、IM Controlを設置したときに利用したページhttp://settings.messenger.live.com/applications/WebSettings.aspxからHTMLを作成し、コード中のIDを抜き出してください。IM Controlの利用案内で取得できるIDも同一です。

[resource]は、次のいずれかを指定します。

  • presence: JSON形式で取得する場合
  • presenceimage: 画像形式で取得する場合

[?queryparameters]は、JSON形式でプレゼンスを取得する場合に使用します。

画像形式で取得

画像形式の場合、URLへアクセスするとプレゼンスを表す16x16のPNG画像が取得できます。これはIM Controlの状態アイコン形式のHTML作成に使用されています。IM ControlのHTML作成では、IMGタグとIMウィンドウへのリンクと組み合わせたHTMLになっています。

JSON形式で取得

JSON形式の場合、URLへアクセスすると次のような文字列が返ってきます。

{
    "icon":{
        "url": "http://settings.messenger.live.com/static/w13r2/Conversation/img/Status_Away.gif", 
        "height": 16,
        "width": 16
        },
    "statusText": "\u9000\u5e2d\u4e2d",
    "status": "Away",
    "displayName": "\u677e\u6c5f",
    "id": a7c9efe5c10b4fbc@apps.messenger.live.com
}

"status"などのキー名と"Offline"など その値の組み合わせになっています。Presence APIにより返ってくる値には次のものがあります。

status

ユーザの状態を表し、次の8種類の文字列になります。

  • Online: オンライン
  • Away: 退席中
  • Idle: 退席中(しばらく操作していない状態)
  • BeRightBack: 一時退席中
  • Busy: 取り込み中
  • OutToLunch: 昼休み
  • OnThePhone: 通話中
  • Offline: オフライン

statusText

ユーザの状態を表すローカライズされた文字列。日本語などのマルチバイト文字列の場合、⁠\」をエスケープシーケンスとして利用したUnicode形式で表現されています。

id

APIを呼び出す際に指定したID(id@apps.messenger.live.com形式⁠⁠。

displayName

ユーザの表示名。ユーザが Live Messenger で指定している表示名になります。statusTextと同様にエスケープされています。この値は空文字(⁠⁠)の場合もあります。

icon

ユーザの状態を表すアイコン画像情報。データが入れ子構造になっており、iconの中に次の3種類のデータがあります。

url
ユーザの状態を表すアイコン画像のURL。状態によってアドレスは変化します。得られる画像は、[resource]に画像形式を指定したときと同じものです。
width
アイコン画像の横幅ピクセル。
height
アイコン画像の縦幅ピクセル。

mkt

カルチャ情報のID。必ずしも含まれている値ではありません。ja-JPやen-USなどの値になります。

コールバック関数の利用

先ほど示したURLの構文の[?queryparameters]部分にコールバック関数を指定することで、より便利にJavaScriptからAPIの利用が可能になります。例えば次のように指定します。

http://messenger.services.live.com/users/12BACD345678@apps.messenger.live.com/presence/?cb="ShowStatus"&mkt=ja-JP

指定できるパラメータは2種類あり、cbにコールバック関数名、mktを指定することでカルチャ情報の指定も可能です。コールバック関数を指定すると、その関数名にJSON形式の値を指定した文字列が帰ってきます。scriptタグと組み合わせHTMLのBODY内に次のように記述します。

<script type="text/javascript" src="http://messenger.services.live.com/users/12BACD345678@apps.messenger.live.com/presence/?cb=ShowStatus&mkt=ja-jp"></script>

ここではShowStatusという関数を指定していますので、プレゼンスのデータを処理するShowStatus関数を作りましょう。次の例ではオリジナルの状態アイコンおよびユーザの表示名を表示しています。

<div id="presence">
<img id="statusIcon" />
<span id="displayName"></span>
</div>

<script type="text/javascript">
function ShowStatus(presence) {
    var img = document.getElementById("statusIcon");
    var span = document.getElementById('displayName');
    img.src = presence.status + ".png";
    span.appendChild(document.createTextNode(presence.displayName));
}
</script>

当然ながら関数の引数presenceを使用しています。このとき「presence.displayName」など簡単にデータにアクセスできるのがわかります。もしアイコン情報を取得する場合は「presence.icon.width」のように記述します。また、マルチバイト文字列が表示名に使用されていますが特別な処理は必要ありません。

サンプルを動作させるにはstatusと同じ名前の画像ファイルを用意する必要があります。実行結果を図5に示します。

図5 Presence API利用例
図5 Presence API利用例

プレゼンスの共有案内

IM Controlと同様に、ユーザ自身のプレゼンスを処理するだけでなくほかのユーザのプレゼンスを取得することができます。これはIM Controlの利用案内とまったく同様ですので説明は省きます。Presence API用のサインアップページというのはなくIM Controlと同じものを使用します。

おわりに

いかがでしたでしょうか。IM ControlやPresence APIを利用すると簡単にWebページにLive Messengerのプレゼンスを表示することができ、IM ウィンドウによりメッセージのやり取りも可能になります。ブログに表示する項目のひとつに加えてみるとよいかもしれません。いろいろと活用してみてください。基本的な部分はすべて示せたと思いますが、詳細はMSDN Libraryも参照してください。6月に多くのWindows Liveに関するSDKが日本語化されています。

おすすめ記事

記事・ニュース一覧