お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

LDD Today: アンビエント Sametime アクティブデスクトップ

Darren Shaw, Emerging technology specialist, IBM Corporation

Java、WebSphere、および ANTS をメインとする新進のテクノロジー・スペシャリスト。

概要： 仮想オーブ (球体) を使用して、グループまたはユーザーがオンラインになったことを知らせるアンビエント Sametime アプリケーションをアクティブデスクトップに作成しましょう。この記事では、Sametime Links toolkit による作成方法を解説します。このツールキットは、developerWorks の Lotus のサイトからダウンロードできます。

このシリーズの他の記事を見る

タグを付ける!

日付: 2004年 7月 12日
レベル: 初級
この記事の原文: 英語
アクティビティー： 1249 ビュー
お気軽にご意見・ご感想をお寄せください：

ここ数か月、アンビエント・デバイスは新聞や雑誌などで取り上げられることが多くなりました。最も有名なのは、マサチューセッツ州ケンブリッジに本社を置く Ambient Devices（US）社製のオーブとダッシュボードです。アンビエント・デバイスは、周囲の情報をユーザーに伝える機能を持ちます。アンビエント・デバイスは机の上、つまりデスクトップに置かれ、高レベルで低解像度のデータを表示します。たとえば、アンビエント・オーブの場合は、会社の株価に変動があったときに色を変えるよう設定できます。

このようなアンビエント表示は、PC デスクトップのバーチャル・ワールドでも使用できます。この記事では、グループまたはユーザーの Sametime 接続状況を仮想オーブに表示するアンビエント・デスクトップ (図 1 参照) の作成方法を解説します。ここでは、Web 開発の経験があり、HTML と JavaScript の両方の知識を持っている読者を想定しています。

図 1. アンビエント Sametime アプリケーション

アンビエント Sametime アプリケーションは、 HTML ファイル内の 2 つのオーブ画像に基づいています。オンラインまたは離席中のユーザーの割合が変化すると、JavaScript によって画像の高さと幅が HTML ファイル内で調整されます。この効果により、仮想オーブがリアルタイムで拡大または縮小されて表示されます。HTML 文書はブラウザーで表示できます。また、Windows 2000 または XP マシンでは、アクティブデスクトップに表示するよう設定できます。このアプリケーションは、Sametime バージョン 2.5 以降で動作します。

メモ:この記事で説明する方法は、Microsoft Internet Explorer でのみ使用できます。

Sametime Links

アンビエント Sametime アプリケーションは、Sametime Links toolkit に含まれる機能を利用しています。(このツールキットは、developerWorks の「Lotus Instant Messaging/Web Conferencing（US）」製品ページまたは「ダウンロード」ページ（US）からダウンロードできます。)Sametime Links toolkit を使用すると、Sametime の機能を HTML ファイルに埋め込むことができます。アンビエント Sametime アプリケーションは、Sametime Links JavaScript ライブラリーを使用する HTML ファイル、小さな Java アプレット、いくつかのカスタム JavaScript、および画像ファイルのセットで構成されています。Sametime Links の Java アプレットは、ブラウザーから Sametime サーバーへの通信を処理し、JavaScript を介してその機能へのアクセスを可能にする API を提供します。

Sametime Links を使用するには、stlinks.css スタイルシートと JavaScript ファイルの stlinks.js を文書のヘッダーでインクルードする必要があります。これらのファイルの場所は、ご使用の環境で Sametime Links をどこにインストールしたかに応じて異なります。一般的に、これらのファイルは Sametime サーバーの /sametime/stlinks ディレクトリーにあります。

Sametime Links アプリケーションの規模を拡大する
ソリューションの規模を拡大するには、一般的に、使用する HTML、JavaScript、CSS、および画像ファイルを別の高トラフィックの Web サーバーから提供します。これによって、常にアプレットを提供する Sametime Links サーバーの負荷が軽減されます。

<head>
.
.
<link rel="stylesheet" href="http://localhost/sametime/stlinks/stlinks.css" type="text/css">

<script src="http://localhost/sametime/stlinks/stlinks.js"></script>
.
.
</head>

上に戻る

Web ブラウザー経由で Sametime へ接続する

ブラウザーを Sametime サーバーに接続するには、ユーザー名とパスワードを与える必要があります。これらは、script タグの内部にある変数として定義されています (今回のケースでは、HTML のヘッダー要素の内部でもあります)。また、setSTLinksURL 関数を使用して、Sametime Links を実行するシステムを定義する必要があります。今回の例では、Sametime Links はローカル・マシンで実行されます。

<head>
.
.
var userID = "richard";
var password = "richard";

setSTLinksURL("http://localhost/sametime/stlinks");
.
.
</head>

また、ユーザーの Sametime 接続状況を識別するために使用されるいくつかの定数も定義しなければなりません。これは、同じ HTML ヘッダー要素で行います。

<head>
.
.
// sametime status constants
var ST_STATUS_AWAY = 96;
var ST_STATUS_ONLINE = 32;
var ST_STATUS_OFFLINE = 0;
.
.
</head>

Sametime Links は、HTML ファイル内に記述する必要がある Java アプレットを介して機能します。これは、writeSTLinksApplet 関数を使用して行われます。アプレットは表示されないので、ファイルの本文 (body) 内のどこに記述してもかまいません。writeSTLinksApplet 関数は、前に定義したユーザー名とパスワードのパラメーターと、ユーザーの認証にトークンではなくパスワードが使用されることを示す false パラメーターを受け取ります。

<body>
.
.
<div>
	<script language="JavaScript" type="text/javascript">
		<!--
		writeSTLinksApplet(userID, password, false);
		//-->
	</script>
</div>
.
.
</body>

上に戻る

オーブを描画する

各オーブは、2 つの GIF 画像を使用して描画されます。1 つはフォアグラウンドのオーブ用の画像で、もう 1 つはシャドウ (影) 用の画像です。シャドウの画像は、表内の <td> 要素のバックグラウンドに配置されます。フォアグラウンドのオーブ画像は、<td> 要素内で使用されます。<td> 要素は ID 属性を持つので、その内部の <img> 要素は JavaScript によって容易に変更できます。

2 つのオーブの下で、1 つの画像が Sametime に再接続するためのボタンとして使用されます。ここでも ID 属性が使用されているので、JavaScript コードによってこのイメージを制御できます。

<table align="right">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td background="images/greenballshadow.gif" width="220" 
height="220" align="center" id="onlineImage">
<img align="middle" src="images/greenball.gif" 
height="0" width="0"></td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td background="images/redballshadow.gif" width="220" 
height="220" align="center" id="awayImage">
<img src="images/redball.gif" height="0" width="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div id="logonpanel">
<a onclick='logon()'>
<img src='images/connect.gif'>
</a></div>
</td>
</tr>
</tbody>
</table>

上に戻る

イベントを処理する

イベントを処理する
アンビエント Sametime アプリケーションは、Sametime の在席確認サービスを使用して機能します。ここでは、2 つの選択肢があります。2 つの配列を使用してユーザーとその接続状況を定義する方法と、1 つの配列を使用して両方を定義する方法です。最初の方法では、まず、モニターするユーザーの配列を定義し、次に、ユーザーの接続状況を格納する 2 番目の配列を定義します。2 番目の方法では、sametimeData という 1 つの配列を定義します。この配列には、userData という 2 要素配列が含まれます。a[0] は名前で、a[1] は接続状況です。2 番目の方法は最初の方法よりも複雑ですが、より洗練されています。次のコードは最初の方法を示します。

var userIDs = new Array("Darren Shaw",
"Britney Spears",
"Michael Owen");
var statuses = new Array();

Sametime Links によって JavaScript イベントがトリガーされると、オーブ画像が再描画されます。ログオン・イベントが発生すると、モニターするユーザーのリストが反復処理され、セミコロンで区切られた文字列が生成されます。ユーザーのこのリストは、STLinksWatchUsers 関数によってウォッチ・リストに追加されます。

ログオン・ボタンは、ログオン・パネルの HTML をブランクにすることによって消去されます。

function STLinksLoggedIn(myUserId, myUserName){
		
	var userList = "";
		
	for(var i=0; i < userIDs.length; i++){
		userList = userList + userIDs[i] + ";";
	}
		
	STLinksWatchUsers(userList, true);
	document.all.logonpanel.innerHTML = "";
	
}

ユーザーのリストが Sametime ウォッチ・リストに追加されたので、STLinksUserStatusChanged イベントを使用して、モニターしているユーザーの接続状況が変わるたびにオーブを変更することができます。STLinksUserStatusChanged イベントが発生すると、updateGroupStatus 関数が呼び出されます。この関数は、現在の接続状況 (オンライン、オフライン、または離席中) に設定されているユーザー数をカウントし、ユーザーの合計数を使用して各接続状況のパーセンテージを計算します。

このパーセンテージを使用して、オーブ画像のサイズが変更されます (100% のユーザーがオンラインのときは、緑色の球体がフルサイズになります)。この画像要素は、前に定義した <td> 要素の ID 属性を参照することにより、メイン文書内で設定されます。

function STLinksUserStatusChanged(userId,displayName,statusType, _
statusDesc,groupName){
updateGroupStatus(userId, statusType);
}

function updateGroupStatus(userID, statusType){
var onlineCount = 0;
var offlineCount = 0;
var awayCount = 0;

for (var i=0; i<userIDs.length; i++){
if(userIDs[i] == userID){
statuses[i] = statusType;
}
}

for (var i=0; i<statuses.length; i++){
if(statuses[i] == ST_STATUS_ONLINE){
onlineCount = onlineCount + 1;
}
if(statuses[i] == ST_STATUS_OFFLINE){
offlineCount = offlineCount + 1;
}
if(statuses[i] == ST_STATUS_AWAY){
awayCount = awayCount + 1;
}
}

var onlineImageSize = 220*(onlineCount/userIDs.length);
var onlineImageHTML = "<img src='images/greenball.gif' align='middle' _
height='"+onlineImageSize+"' width='"+onlineImageSize+"'>";

var awayImageSize = 220*(awayCount/userIDs.length);
var awayImageHTML = "<img src='images/redball.gif' align='middle' _
height='"+awayImageSize+"' width='"+awayImageSize+"'>";

document.all.onlineImage.innerHTML = onlineImageHTML;
document.all.awayImage.innerHTML = awayImageHTML;
}

最後に処理する Sametime のイベントは、ログアウト・イベントです。この状況では、フォアグラウンドのオーブのサイズを 0 に設定し、Sametime へ再接続するボタンを表示する必要があります。

function STLinksLoggedOut(reason){

var onlineImageHTML = "<img src='images/greenball.gif' align='middle' height='0' width='0'>";
var awayImageHTML = "<img src='images/redball.gif' align='middle' height='0' width='0'>";

document.all.onlineImage.innerHTML = onlineImageHTML;
document.all.awayImage.innerHTML = awayImageHTML;
document.all.logonpanel.innerHTML = "<a onclick='logon()'>_
<img src='images/connect.gif'></a>";
}

ユーザーが接続ボタンをクリックすると、ページが更新され、Sametime への接続がトリガーされます。再接続ボタンは、ユーザーのクリックによって、ログオン関数を呼び出します。

function logon(){
document.location.reload();
}

以上で、このシンプルなアンビエント Sametime アプリケーションを実行する準備が整いました。アプリケーションは、ブラウザー内で実行するか、Windows 環境のアクティブデスクトップ上に設定して実行します。アンビエント Sametime アプリケーションをアクティブデスクトップ上に設定するには、デスクトップ上で右クリックし、[プロパティ] を選択します。[Web] タブを選択し、[追加] をクリックします。[新規の Active Desktop 項目] ダイアログボックスで、[参照] ボタンをクリックし、作成したアンビエント Sametime アプリケーションの HTML ファイルを選択します。

上に戻る

まとめ

この記事では、Sametime の在席確認イベントに基づいて、HTML ベースの動的 Web ページを駆動する基本的な方法を解説しました。この中で、ユーザーまたはユーザー・グループの接続状況を表すために、アンビエント・オーブが使用されました。このアプリケーションは、Sametime イベントに応じて、テキスト、グラフィック、オーディオによる多彩な表現が可能になるよう容易に調整できます。次の一歩としては、アンビエント・インジケーターとして色を使用することが考えられます。この記事で解説した手法を用いると、ユーザーの空き状況に応じて色が変化するバージョンを開発できます。

ファイルのダウンロードアンビエント Sametime アプリケーションに必要な HTML、CSS、および GIF の各ファイルは、Sandbox（US）からのダウンロードに含まれています。

参考文献

Sametime Links toolkit および他の Sametime のツールキットの詳細については、記事「A tour of Sametime toolkits（US）」を参照してください。Sametime Links toolkit および他の Sametime のツールキットは、developerWorks の「Lotus Toolkits and Drivers（US）」ページからダウンロードできます。
Sametime Links アプリケーションのパフォーマンスに関する情報については、記事「Running a Sametime Links application in a Lotus Instant Messaging environment（US）」を参照してください。
Sametime Links toolkit を使用して、Web アプリケーションで在席確認やインスタント・コラボレーションを有効にする方法については、記事「Adding a pop-up menu to your Sametime inks（US）」を参照してください。
developerWorks Japan: Lotus: Lotusの日本の技術情報サイトです
developerWorks: Lotus(US) : Lotusの英語の技術情報サイトです