ソフトウェア > Lotus > Lotus Developer Domain > 製品別技術情報 > Lotus Sametime >

LDD Today

Sametime Linkにポップアップ・メニューを追加する方法

by ハイム・シュナイダー
レベル：中級者
対象: Sametime
原文の掲載：2003年7月1日

LDD Todayの原文（US）

インデックス

	サンプル・ポップアップ・メニュー
	Sametimeリンク対応ページから始める
	サンプル・ページの使い方
	まとめ

Sametime Links Toolkitは、オンライン在席確認機能と簡易コラボレーション機能によって、Webアプリケーションの価値を容易に高めることができる優れた手段です。たった数行のHTMLコードをWebアプリケーションに追加するだけで、既存の名前がライブSametimeリンクとなります。読者の皆さんは、すでにアプリケーションをSametimeリンク対応にしているかもしれませんが、そうしたからにはライブネームをもっと幅広く活用したいとお考えのことでしょう。メッセージの送信以外のさまざまなオプションが提供できるようにアプリケーションを強化する、オフライン・ユーザーに電子メールを送信する、あるいは、そのユーザー名を自分の連絡先リストに追加したり、ユーザーのプロフィールを表示したり、他のユーザーを音声ミーティングに招集したりする。Sametime Links Toolkitを使用すれば、これらすべてを極めて簡単に実現できます。この記事では、Sametimeリンクのクリック時の動作を指定変更する方法と、リンクがクリックされたときにポップアップ・メニューを表示する方法について説明します。また、動的HTMLとSametime LinksのJavaScript APIを使用して、選択されたユーザーに関連するさまざまなオプションを提供するポップアップ・メニューを作成します。

この記事は、動的HTMLとJavaScriptの基本知識があり、Sametime Links Toolkitに精通している方を対象としています。

サンプル・ポップアップ・メニュー

これから追加するサンプル・ポップアップ・メニューには、次の4つのメニュー項目があります。

Message（メッセージ）
選択されたユーザーにインスタント・メッセージを送信します。
Share Application（アプリケーションを共有）
選択されたユーザーをアプリケーション共有ミーティングに招集します。
Send Mail（メールを送信）
デフォルト・メール・クライアントを使用して、選択されたユーザーへの新規メール・メッセージを作成します。
Add to Contact List（連絡先リストに追加）
選択されたユーザーをページ・ユーザーのSametime Connectの連絡先リストに追加します。

次の画面に、このサンプル・ポップアップ・メニューを示します。

Sametimeリンクは通常、オフライン状態では単にHTMLテキストとして表示されます。オフライン・ユーザーにインスタント・メッセージを送信することはできないため、クリッカブル・リンクではありません。しかし、このポップアップ・メニューを導入すると、状況は変わります。一部のオプションはオフライン・ユーザーにも適用されるため、オフライン・ユーザー名に対してもメニューを使用可能にする必要があります。それによって、オフライン・ユーザーに電子メールを送信したり、そのユーザーを自分の連絡先リストに追加したりすることが可能になります。そのために、リンクのデフォルト動作を変更し、オフライン・ユーザー名がHTMLリンクとして表示されるようにします。次の画面からおわかりのように、オフライン・ユーザー名をクリックした場合、オンライン・ユーザーのみに適用されるメニュー項目は使用不可となります。

メニューは、サンプルとして示しただけであり、簡単にカスタマイズできます。この記事では、メニューのフレームワークをインプリメントする方法とメニュー項目を追加する方法を示します。メニューをそのまま使用することも、項目を追加したりアプリケーションに表示したいものに置き換えたりすることもできます。たとえば、選択されたユーザーが作成した文書の一覧表示やユーザー・プロフィールの表示など、アプリケーション固有のオプションを追加することができます。

上に戻る

Sametimeリンク対応ページから始める

Sametimeリンク対応ページから始める

この記事では、Sametimeリンク対応のWebページにポップアップ・メニューを追加することから始めます。アプリケーションがまだSametimeリンクに対応していない場合は、『Sametime Links Toolkit Developer's Guide』の説明をご覧ください。これは本当に簡単な作業で、基本的には数行の単純なHTML/JavaScriptコードをWebページに追加し、ユーザーのログイン名とパスワード、またはシングル・サインオン・トークンを指定するだけです。また、ツールキットに付属するいずれかのサンプル・ページにポップアップ・メニューを追加することから始めることもできます。

『Developer's Guide』とサンプルを入手するには、Sametime Links Toolkitホーム・ページにアクセスします。それには、Sametimeサーバーのホーム・ページにあるSDKリンクを選択し、ToolkitsページのSametime Links Toolkitリンクを選択します。リンクが表示されていない場合は、まずSametimeサーバーにSametime Toolkitsパッケージをインストールする必要があります。また、Toolkits and Drivers page から『Developer's Guide』とツールキットをダウンロードすることもできます。

なお、Sametime Linksランタイム・ファイルはSametime 3.0サーバーにプリインストールされているため、サンプル用のツールキットと『Developer's Guide』だけをインストールします。Sametime 2.5サーバーを使用している場合は、Sametime Links for Sametime 2.5をインストールしてください。

オフライン・ユーザー名をクリッカブル・リンクにする
デフォルトでは、オフラインのSametimeリンクは通常のHTMLテキストとして表示されます。オフラインのSametimeリンクに対してメニューが表示されるようにするには、オフライン・ユーザー名をクリッカブルにする必要があります。それには、writeSametimeLinkの呼び出しにofflineLinkオプションを追加します。

writeSametimeLink("Haim Schneider/Haifa/IBM",
"Haim Schneider", true, "offlineLink:yes")

このオプションは、クリック時の動作を指定変更する場合にのみ使用してください（次のステップで行います）。それ以外の場合は、リンクをクリックすると、Sametimeリンクによってオフライン・ユーザーへのインスタント・メッセージが開始され、言うまでもなく失敗します。

offlineLinkオプションを使用すると、オフライン・ユーザー名は通常のHTMLリンクとして、つまり青色の下線付きテキストで表示されます。その結果、リンクのスタイルは、オンライン・ユーザーを表す緑色の太字のリンクと、オフライン・ユーザーを表す通常の青色のリンクの2種類となります。スタイルが入り交じっていると紛らわしいので、オンライン・リンクのスタイルを変更し、オフライン・リンクと同じスタイルにすることにします。緑色の太字は通常、オンライン・ユーザー名を強調表示する場合に使用されますが、ユーザー名の横に表示される状況アイコンだけでもオンライン状態であることはすぐにわかります。

オンライン・リンクとオフライン・リンクのスタイルは、CSS（Cascading Style Sheet）ファイルの「stlinks.css」に定義されています。このファイル内のオンライン・スタイルを変更すれば、このスタイル・シートにリンクしているすべてのWebページでスタイルが変更されます。あるいは、次のスタイル定義を追加することによって、ページのスタイルを指定変更することも可能です。

<STYLE>
a.online:link {color:blue; font-weight:normal}
a.online:visited {color:blue; font-weight:normal}
a.online:hover {color:blue; font-weight:normal}
a.offline {color:blue; font-weight:normal}
</STYLE>

stlinks.cssのオンライン・スタイル定義が指定変更されるように、このファイルにリンクしている <LINK> タグの後にこのスタイル定義を挿入します。

クリック・イベントの処理
デフォルトのクリック時の動作の指定変更には、STLinkClickedイベントを使用します。Sametime Links Toolkitの特定のイベント・タイプを処理するには、イベント名とともに関数をページに追加します。関数には、イベント・タイプによって指定されたパラメーターを付ける必要があります。ここでは、クリック・イベントを処理するために、STLinkClickedのインプリメンテーションを追加します。この関数は、Sametimeリンクがクリックされると常に呼び出されます。STLinkClickedは、ツールキットの他のすべてのイベントとは異なり、デフォルトの動作を指定変更します。その結果、デフォルトの動作であるインスタント・メッセージの開始ではなく、指定した関数が呼び出されます。他のすべてのイベントの場合は、デフォルトのハンドラーが呼び出された後にカスタム・イベント・ハンドラーが呼び出されます。

STLinkClickedイベントのパラメーターは次のとおりです。

パラメーター	説明
userName	writeSametimeLink呼び出しで指定された固有のユーザー名
displayName	ユーザーの表示名
status	ユーザーの現在の状況を示す数値定数（状況値のリストについては『Developer's Guide』を参照）
evt	マウス位置など、クリック・イベントに関する情報を提供するJavaScript Eventオブジェクト

ここでは、クリックされたユーザーの名前を格納するselectedNameというグローバル変数を使用します。この変数は、メニューを描画する関数とメニュー項目のアクションをインプリメントする関数によって使用されます。

var selectedName = "";

function STLinkClicked(userName, displayName, status, evt)
{
selectedName = userName;
showMenu(userName, displayName, status, evt.clientX, evt.clientY );
evt.cancelBubble = true;
}

STLinkClickedイベントのインプリメンテーションは、selectedName変数を設定し、showMenuを呼び出してメニューを表示するだけです。また、リンク自体を越えたイベントのバブリングを取り消すために、イベント・オブジェクトのcancelBubbleプロパティーを「true」に設定する必要があります。

メニューの表示
メニューのHTMLコードを追加する前に、メニュー・ボックス、メニュー項目、および使用不可のメニュー項目のスタイル定義を追加します。スタイルはページの先頭セクションに追加します。

<STYLE>
.stMenu {background-color:darkgray; position:absolute; visibility:hidden;
border-Width:1px; border-Style:solid; border-Color:black}
a.menuItem {color: black; font: 10pt Arial; font-weight:bold; text-decoration:none;}
a.menuItem:hover {color: white}
.menuDisabled {color: lightgrey; font: 10pt Arial; font-weight:normal; text-decoration:none;}
</STYLE>

これで、メニューの背景色はダーク・グレー、メニュー項目のテキストは黒の太字体となります。強調表示されたメニューのテキストは白色で表示され、使用不可のメニュー項目はライト・グレーのプレーン・テキストとして表示されます。色、フォント、およびその他のスタイル属性は簡単に変更できますので、たとえばメニューを緑色、背景を紫色、ボーダーを黄色にしたい場合は、そのようにスタイル定義を変更するだけです。また、text-decoration: none属性値を使用してリンクから下線を除去している点にも注目してください。HTMLリンクはデフォルトでは下線付きですので、テキストをよりメニュー項目らしく見せるために下線を除去する必要があるわけです。

これでスタイルが定義されましたので、メニューを追加する準備が整いました。メニューは表を含む <DIV> タグで、各メニュー項目は表セルです。メニューの <DIV> タグは、ページ内のどこにでも配置することができます。これは、visibility: hidden属性を有するstMenuスタイルを使用しているため、最初は非表示です。

メニューは、最初は空です。4つのメニュー項目に対して4つの表セルがありますが、これらのセルは空です。セルは、メニューがオープンされると動的にデータが設定されます。これによって、オンライン状況に応じてメニュー項目の使用可能/使用不可を設定したり、選択されたユーザーの電子メール・アドレスに対する「Send Mail」メニュー項目を作成したりすることが可能になります。
setMenuItem関数は、1つのメニュー項目の内容を設定します。

function setMenuItem(itemId, text, action, isEnabled)
{
var menuItem = document.getElementById(itemId);
//add spaces to the left of the text
text = "&nbsp " + text;
if (isEnabled)
menuItem.innerHTML =
"<A class=menuItem + href='" + action + "'>"
+ text + "</A>";
else menuItem.innerHTML =
"<SPAN class=menuDisabled>" + text + "</SPAN>";

項目へのアクセスには、表セル（<TD> タグ）のIDを使用します。setMenuItemは、セルにメニュー項目の内容を設定します。使用可能な項目は、「action」パラメーターで指定されたアクションを持つHTMLリンクとして表示されます。アクションは、JavaScript URLまたはmailto:リンクです。使用不可の項目は、先ほど定義したmenuDisabledスタイルでプレーン・テキストとして表示されます。
次に、showMenu関数について見ていきましょう。

function showMenu(userName, displayName, status, x, y )
{
var isOnline = (status != 0);

setMenuItem("menu_message", "Message...",
"javascript:onMessage()", isOnline);
setMenuItem("menu_meeting", "Share Application...",
"javascript:onMeeting()", isOnline);
setMenuItem("menu_addContact", "Add to Contact List",
"javascript:onAddContact()", isLoggedIn);
setMenuItem("menu_mail", "Send Mail...", "mailto:"
+ getEmailAddress(userName), true);

var theMenu = document.getElementById("menu");
theMenu.style.left=x - 10 + document.body.scrollLeft;
theMenu.style.top=y + 10 + document.body.scrollTop;

theMenu.style.visibility='visible';
}

showMenuは、メニューを表示する前に、4つのメニュー項目の内容を設定します。そして、画面上のマウスがクリックされた位置にメニューを配置し、最終的にメニューを可視にします。

最初の2つの項目、「Message」と「Share Application」は、「status」パラメーターが0の場合、つまり選択されたユーザーがオフラインである場合に使用不可となります。「Add to Contact List」項目は、ページのユーザーがログインしていない場合に使用不可となります。ページのユーザーは、選択したユーザーを連絡先リストに追加するためには、Sametime Linksアプレットを使用してログインする必要があります。showMenuでは、isLoggedInフラグを使用して、ユーザーが現在ログインしているかどうかをテストします。このフラグは、APIによって提供されるものではありません。ユーザーがログインしているかどうかをテストするための直接のAPI呼び出しはないため、ここではSTLinksLoggedIn APIイベントとSTLinksLoggedOut APIイベントを使用して、isLoggedInフラグを設定します。

var isLoggedIn = false;

function STLinksLoggedIn(myUserId, myUserName)
{
isLoggedIn = true;
}

function STLinksLoggedOut(reason)
{
isLoggedIn = false;
}

メニュー・オプションのインプリメンテーション
次に、サンプル・メニュー項目のアクションとして使用されるonMessage、onMeeting、およびonAddContact関数をインプリメントします。以下を見ればおわかりのように、Sametime Links Toolkitを使用すれば、これらの関数を極めて簡単にインプリメントできます。

onMeeting関数は、選択されたユーザーとのアプリケーション共有ミーティングを作成します。STLinksCreateMeetingに渡されるパラメーターは、招待者の名前、ミーティング・ツールのリスト（ここではチャット、アプリケーション共有、およびホワイトボードを選びました）、ミーティングのトピック、および招待メッセージです。

onAddContact関数は、選択されたユーザーをページ・ユーザーの連絡先リストに追加します。そのユーザー名は、「Work」グループに追加されます。ユーザーが「Work」という個人グループを持っていない場合、自動的に作成されます。わかりやすくするために、ハード・コーディングされたグループ名を使用しましたが、必要ならユーザーの追加先のグループをページ・ユーザーが選択できるようにすることも可能です。Sametime Links Toolkitでは、ユーザーの個人グループのリストを取得することができます。グループのリストを取得するには、STLinksGetPrivateGroupsを呼び出します。結果は、STLinksPrivateGroupsReceivedイベントで戻されます。個人グループのリストの取得後、ユーザーが既存グループのリストからグループを選択するか、あるいは新規個人グループ名を入力するためのダイアログを表示するように、onAddContactを変更することができます。

注：

　Sametime Links Toolkitsを使用して連絡先リストに対して行える操作は、個人グループのリストの取得と個人グループへのユーザーの追加だけです。このAPIには、連絡先リストの検索、あるいは公開グループの追加やユーザーの削除といった操作のための他の関数は用意されていません。そうしたAPIが追加されなかったのは、Sametime Linksアプレットのサイズをできる限り小さく抑えるためです。Sametime Links Toolkitは、クライアント側のアプリケーションに必要とされる主な機能を提供するものです。Webアプリケーションで連絡先リストの検索や操作を行う必要がある場合は、Sametime Community Server Toolkitを使用してサーバー側で行うことを検討してください。また、Sametime Java Toolkitを使用すれば、クライアント・アプリケーションで連絡先リストにアクセスすることができます。

電子メール・アドレスの取得
「Send Mail」項目は、実際には、選択されたユーザーの電子メール・アドレスへのHTML mailto:リンクです。では、そのアドレスはどこから得られるのでしょうか。残念ながら、魔法のように取得できるわけではなく、ページを生成する際に電子メール・アドレスをページ上に配置しなければなりません。ここでは、ページを生成するアプリケーションが、名前と電子メール・アドレスのマッピングをページ内に配置することを前提としています。このマッピングは、ページ内にSametimeリンクを持つすべての名前を含んでいなければなりません。このマッピングは、JavaScriptオブジェクトを使用してインプリメントしています。たとえば、ページ内に「Robert Carter」と「Ann Banks」というSametimeリンクがある場合、ページを生成するアプリケーションが、これらの名前を各自の電子メール・アドレスにマッピングするJavaScriptコードを追加します。

<SCRIPT>
var emailAddress = new Object();
emailAddress["Robert Carter"] = "rcarter@acme.com";
emailAddress["Ann Banks"] = "abanks@acme.com";
</SCRIPT>

このマッピングで使用される名前は、writeSametimeLink呼び出しの第1パラメーターで渡されるストリングと同じでなければなりません。getEmailAddress関数は、showMenuが選択されたユーザーの電子メール・アドレスを取得する際に使用します。

function getEmailAddress(name)
{
return emailAddress[name];
}

メニューのクローズ
いよいよ終わりが見えてきました。後は、メニューが確実にクローズされるようにするだけです。他のメニューと同様に、このメニューも、メニュー項目が選択されたか、あるいはメニュー・エリア外でマウスがクリックされたときにクローズする必要があります。そこで、メニューをクローズする必要がある場合に<DIV>タグを隠すhideMenu関数を追加します。

function hideMenu()
{
document.getElementById("menu").style.visibility='hidden';
}

さて、hideMenuはどのようにして呼び出されるのでしょうか。最も簡単な方法は、ページの<BODY>タグのonClick属性で呼び出すことです。

あるいは、<BODY>タグを変更したくない場合は、JavaScriptでonClickアクションを設定することもできます。その場合には、次のコードをページ内のどこかに追加します。

<SCRIPT>
document.onclick = hideMenu;
</SCRIPT>

上に戻る

サンプル・ページの使い方

Sandboxから入手できるこの記事のサンプル・ページは、Sametime Links Toolkitに付属するサンプル・ページの1つをベースにしています。元のサンプルは、メッセージ・ボード・ページにSametimeリンクを埋め込む方法を示すためのものです。この記事では、サンプル・メニューを追加してそのページを拡張しました。このサンプルをそのまま実行しようとしてはなりません。このサンプルはサーバー・アドレスとユーザー名のプレースホルダーを含んでいるため、実際のアドレスと名前を指定してからでないと実行できません。
まず、ページの先頭セクションにある3つの<your Sametime server>をSametimeサーバーのホスト名に置き換えます。たとえば、Sametimeサーバーのホスト・アドレスがsametime.acme.comの場合、ページの先頭セクションに次の記述が含まれている必要があります。

<LINK REL=STYLESHEET
HREF=http://sametime.acme.com/sametime/stlinks/stlinks.css
TYPE="text/css">
<SCRIPT src=" http://sametime.acme.com/sametime/stlinks/stlinks.js">
</SCRIPT>
<SCRIPT>
setSTLinksURL("http://sametime.acme.com/sametime/stlinks");
</SCRIPT>

リンクにオンライン・ユーザーが表示されるようにするために、Sametimeリンクの「Name1」から「Name5」までのパラメーターを、ディレクトリーに登録されたユーザーの名前に変更します。たとえば、

writeSametimeLink("Name1", "Name1", true, "offlineLink:yes")

を

writeSametimeLink("Ann Banks", "Ann Banks", true, "offlineLink:yes")

に置き換えます。
名前が固有のものになるようにするために、正準名形式を使用することもできます。たとえば、次のようにします。

writeSametimeLink("Ann Banks/HR/Acme", Ann Banks", true, "offlineLink:yes")

次に、電子メール・アドレスのマッピングを入力します。「Name1」から「Name5」まで5つのマッピング割り当てがありますので、それらの名前をwriteSametimeLinkの呼び出しで使用した名前に置き換え、電子メール・アドレスを対応する電子メール・アドレスに置き換えます。たとえば、

emailAddress["Name1"] = "email1";

を

emailAddress["Ann Banks"] = "bann@acme.com";

に置き換えます。
それから、writeSTLinksApplet呼び出しのログイン名とパスワード

writeSTLinksApplet("<login name>", "<password>", false)

を、登録ユーザーのログイン名とパスワードに置き換えます。このサンプルではパスワード認証を使用していますが、Sametimeリンク対応のWebアプリケーションのほとんどは、シングル・サインオンの実現とセキュリティーの強化のためにトークン認証を使用します。トークン認証の使い方については、『Developer's Guide』をご覧ください。

ページをWebサーバーに置き、ブラウザーで開いてみてください。ページにアクセスする際は、ローカル・ファイル・システムのアドレスではなく、URLを使用する必要があります。というのも、Sametimeリンクは、ローカル・ファイルとして対応ページにアクセスした場合の動作が完全ではないからです。ローカル・ファイルとして対応ページにアクセスした場合、Sametimeリンクはアクティブになりますが、メッセージ・ウィンドウを開こうとするとJavaScriptエラーが表示されます。

上に戻る

まとめ

Sametimeリンクにポップアップ・メニューを追加すると、アプリケーションにおけるライブネームの機能がさらに強化されます。この記事では、メニューをインプリメントするためにページに追加する必要があるコードについて順を追って説明しました。その過程で、SametimeリンクのカスタマイズとHTML/JavaScript APIに関するトピックもいくつか取り上げました。この記事で取り上げたAPIに関するトピックを以下にまとめます。

HTMLリンクとしてのオフライン・ユーザー名の表示
オンライン・ユーザー名の表示に使用するスタイルの変更
クリック時の動作の指定変更
APIイベントの処理
APIによる連絡先リストへのユーザーの追加、インスタント・メッセージの作成、およびミーティングの作成

このサンプル・ポップアップ・メニューは、APIの簡潔性をよく表しています。このサンプルは、基本的なSametimeリンクへの対応だけにとどまらず、『Developer's Guide』で拡張APIと呼んでいるものにまで踏み込んでいますが、おわかりのように拡張APIも使い方は簡単です。たった1行のJavaScriptコードで、連絡先リストへのユーザーの追加、インスタント・メッセージの作成、アプリケーション共有ミーティングの作成といったことを実現することができます。

著者について
ハイム・シュナイダーは、Sametime Links Toolkit担当アーキテクトです。ハイムは、かつての勤務先のUbique社が1998年にIBMによって買収された後、Sametimeの立ち上げ以来、イスラエルのレホボートを拠点とするSametime開発チームに在籍し、ツールキットを中心に、Sametimeコミュニティー・サービスのさまざまな部分に取り組んでいます。彼は、ワイツマン科学研究所で情報工学の理学修士号を、エルサレム・ヘブライ大学で物理学および数学の理学士号を取得しています。

上に戻る