はじめに
Webアプリケーションのレポート画面を作成するときに、そのレポート中に一部のユーザーには意味が分かりにくい部分があることは珍しくありません。レポートで多用される頭文字や略語は、見慣れたユーザーには第二の言語のようなものかもしれませんが、たまにしかオンラインレポートに目を通さない上司や会社幹部には意味不明であることも多いのです。また、レポートでテキストを色分けしたり、イメージファイルやアイコンを使って情報を表している場合、そのような視覚的なヒントがレポートの読者にとって常に直感的に理解できるとは限りません。
このような場合は、状況依存ヘルプ（context-sensitive help）を用意すると便利です。状況依存ヘルプがあると、ユーザーはアプリケーション内で出会った特定の要素や状態について、簡潔な説明を参照できます。最もシンプルな例がツールヒントです。ツールヒントは、特定のユーザーインターフェイス要素をマウスで指したときに、その要素の用途や機能に関する説明を表示する機能です。今回は、同様の機能をWebアプリケーションのレポートに組み込んでみます。これにより、状況依存ヘルプを使って、紛らわしい略語の完全なスペルを表示することや、レポートで使っている色分けや各種イメージの意味を説明することができます。
HTML標準では、事実上すべてのHTML要素にtitle属性が用意されています。ほとんどのブラウザでは、マウスをHTML要素の上に移動すると、その要素のtitle属性の値がツールヒントとして表示されます。試しに、デモページの「ここをポイント」をマウスでポイントしてみてください（このテキストは<span>タグで囲まれており、title属性の値は「よく見て！これがツールヒントです！」に設定されています）。
残念ながら、ツールヒントで表示できるのは、比較的短いテキストに限られます。では、サイズや色が異なるテキストが混在し、イメージが含まれるような高度なヘルプを表示するには、どうすればよいでしょうか。
私はツールヒントの限界を乗り越えるため、簡単なJavaScriptコードを使う状況依存ヘルプシステムを利用しています。これは、画面上の事前に定義した部分にマウスが移動すると、ヘルプのウィンドウがポップアップするというものです。このヘルプ ウィンドウには、複雑な書式を設定したテキストやイメージを含むHTMLコンテンツを表示することができます（ライブデモを参照）。以降では、このような複雑な状況依存ヘルプをWebページに追加する方法を説明します。
マウスが特定のHTML要素の上に移動したときにアクションを実行する
HTML標準では、ユーザーのアクションに応じてなんらかのアクションを実行するためにクライアントサイドイベントが定義されています。onmouseoverイベントとonmouseoutイベントを使うと、マウスが特定の領域に入ったときと、そこから去ったときにアクションを実行できます。これを状況依存ヘルプに利用するには、マウスが特定の領域（レポート内の略語またはイメージの上）に移動したときに関連ヘルプウィンドウを表示し、マウスが領域を去ったときにそのウィンドウを消去する必要があります。
例えば、状況依存ヘルプをHTMLボタンに適用するには、次のようなマークアップを使います。
<input type="button" value="Submit"
onmouseover="showHelpWindow"
onmouseout="hideHelpWindow" />
ヘルプウィンドウをポップアップ表示する
事前に定義した領域にマウスが移動したときにヘルプウィンドウを表示する位置を決める必要があります。候補として考えられるのは、画面上の固定した位置（ページの中央上部のポップアップウィンドウなど）か、マウスポインタに近い位置です。今回は、後者の方法で表示することにします。ポップアップウィンドウを表示するには、まずウィンドウをページに追加する必要があります。私の場合は、<iframe>を含んだ<div>要素を画面の外側に（絶対位置指定で）配置しておき、これをヘルプウィンドウとしてポップアップさせる方法をよく使います。<iframe>は、表示用マークアップを定義した別のスタンドアロンのHTMLファイルを参照しています。状況依存の領域にマウスが移動したら、画面外にあった<div>要素をユーザーのマウスの横に移動させ、適切なヘルプファイルを<iframe>に読み込みます（CSSを使って要素の配置を指定する方法については、CSSレイアウトのチュートリアルを参照してください）。
以下に、このような<div>要素の例を示します（ここでは<div>要素のスタイル情報をCSSクラスに分離しています）。
<style> .HelpWindow { z-index: 999; position: absolute; top: -999px; left: -999px; display: none; visibility: hidden; width: 300px; height: 250px; ... feel free to add additional style settings here ... } </style> <div id="MyHelpWindow" class="HelpWindow"> <iframe frameBorder="0" height="100%" src="HelpPage.htm"></iframe> </div>
HelpWindowクラスに定義したCSS設定では、最初にヘルプウィンドウを非表示の状態にし、絶対座標で位置を指定します。<iframe>要素のsrc属性は、ヘルプコンテンツとして表示するHTMLページを参照します。状況依存ヘルプがある領域にマウスが移動してきたら、id属性値を使ってヘルプウィンドウを参照し、ヘルプウィンドウのtop、left、display、visibilityの各値を更新する必要があります（CSSのwidthとheightの設定値はヘルプウィンドウの幅と高さを表します。これらの値を適切な値に設定しておけば、後は状況依存の領域にマウスが移動したときも変更する必要はありません）。
状況依存ヘルプウィンドウの表示/非表示を切り替えるには、以下の4つのJavaScript関数を使います。
- showHelpFloatWindow(windowID, contextSensitiveHTMLElement, horizPadding, vertPadding, goRight)
- hideHelpFloatWindow(windowID)
- getAscendingLefts(elem)
- getAscendingTops(elem)
windowID値に一致するid属性を持つヘルプウィンドウを表示します。ヘルプウィンドウを表示する位置は、2番目の入力パラメータ（contextSensitiveHTMLElement）で指定されたHTML要素の横です。goRightがtrueの場合はウィンドウを要素の右横に表示し、trueではない場合は左横に表示します。contextSensitiveHTMLElement要素とヘルプウィンドウの間隔は、入力パラメータhorizPaddingとvertPaddingで指定できます。elemの左端のピクセル位置を確認します。elemの上端のピクセル位置を確認します。 showHelpFloatWindow関数とhideHelpFloatWindow関数は、特定のヘルプウィンドウの表示/非表示を切り替えるために、状況依存の領域のクライアントサイドイベントonmouseoverとonmouseoutで使用します。getAscendingLefts関数とgetAscendingTops関数は、showHelpFloatWindow関数の内部で使用します。
