Webページ上に状況依存ヘルプを作成する - japan.internet.com デベロッパー

はじめに

　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)

この関数は、渡されたwindowID値に一致するid属性を持つヘルプウィンドウを表示します。ヘルプウィンドウを表示する位置は、2番目の入力パラメータ（contextSensitiveHTMLElement）で指定されたHTML要素の横です。goRightがtrueの場合はウィンドウを要素の右横に表示し、trueではない場合は左横に表示します。contextSensitiveHTMLElement要素とヘルプウィンドウの間隔は、入力パラメータhorizPaddingとvertPaddingで指定できます。

hideHelpFloatWindow(windowID)

指定されたヘルプウィンドウを非表示にします。

getAscendingLefts(elem)

この関数は、指定されたHTML要素elemの左端のピクセル位置を確認します。

getAscendingTops(elem)

この関数は、指定されたHTML要素elemの上端のピクセル位置を確認します。

　showHelpFloatWindow関数とhideHelpFloatWindow関数は、特定のヘルプウィンドウの表示/非表示を切り替えるために、状況依存の領域のクライアントサイドイベントonmouseoverとonmouseoutで使用します。getAscendingLefts関数とgetAscendingTops関数は、showHelpFloatWindow関数の内部で使用します。

JavaScript関数を確認する

　getAscendingLefts関数とgetAscendingTops関数は、4Guysで以前に発表した記事でも使用しました。例えば、以前の記事『親子データを表示するタブ付きインターフェイスの作成』では、次のように説明しました。

　詳細情報を含む<div>の上座標と左座標を求めるには、2つの再帰関数getAscendingTops(element)とgetAscendingLefts(element)を使います。これらの関数は、渡された要素に含まれるHTML要素の集合を調べ、それぞれ上オフセットと左オフセットを足し合わせていくものです。この手法の詳細については、『Determining the Location of a Nonpositioned Element』を参照してください。私が提供しているフリーのオープンソース部品、ASP.NETメニューコントロールskmMenuでは、この手法を利用しています。

　これらの関数の完全なコードは、ライブデモに含まれています。この記事のダウンロードサンプルにも収録されています。

　getAscendingLeftsとgetAscendingTopsの説明はこれで終わりにして、次に最初の2つのJavaScript関数について説明します。showHelpFloatWindow関数では、渡されたwindowID要素をまず参照して、CSS設定を更新します。getAscendingLefts関数とgetAscendingTops関数を使って上端と左端の絶対ピクセル位置を決定し、状況依存領域の左上隅の座標、縦と横の間隔の広さ、ウィンドウを領域の右と左のどちらに表示するかに基づいて、ヘルプウィンドウのleftとtopを設定します。

function showHelpFloatWindow(windowID, obj,
 horizPadding, vertPadding, goRight)
{
   var w = document.getElementById(windowID);
   if (w != null)
   {
         w.style.display = ’block’;
      w.style.visibility = ’visible’;
      w.style.top = getAscendingTops(obj) + vertPadding;
      if (getAscendingTops(obj) + vertPadding < 0) w.style.top = 0;
      if (goRight == true)
         w.style.left = getAscendingLefts(obj)
 + obj.offsetWidth + horizPadding;
      else
      {
         w.style.left = getAscendingLefts(obj) - horizPadding;
         if ((getAscendingLefts(obj) - horizPadding) < 0)
            w.style.left = getAscendingLefts(obj)
 + obj.offsetWidth + horizPadding;
      }
   }
}

　hideHelpFloatWindow関数では、位置関連のCSS設定を初期値にリセットします。その結果、ヘルプウィンドウは非表示になります。

function hideHelpFloatWindow(windowID)
{
   var w = document.getElementById(windowID);
   if (w != null)
   {
      w.style.display = ’none’;
      w.style.visibility = ’hidden’;

      w.top = -999;
      w.left = -999;
   }
}

全体を組み立てる

　以上のJavaScriptスクリプトをWebページに追加し（単体のJavaScriptファイルに格納すればさらに良い）、ヘルプウィンドウをポップアップするための<div>要素を追加した後で、状況依存ヘルプ領域に戻ってonmouseover属性とonmouseout属性を次のように完成させます。

<input type="button" value="Submit"
   onmouseover="showHelpFloatWindow(’MyHelpWindow’, this, 10, 20, false);"
   onmouseout="hideHelpFloatWindow(’MyHelpWindow’);" />

ライブデモを見る

　どちらの関数も、最初の入力パラメータとして値「MyHelpWindow」を渡します。<div>要素のid属性が「MyHelpWindow」だからです。また、それ自身への参照（this）を渡すのは、ヘルプウィンドウを表示する位置の基点となる要素が自分自身だからです。このスクリプトの動作を確認するには、ライブデモを表示してください。

複数のブラウザで使えるツールヒントのJavaScriptライブラリ

　読者から、複数のブラウザで使えるツールヒントの、フリーなJavaScriptライブラリの共有の申し出がありました。詳しくは、『A Cross Browser Tooltip JavaScript Library』を参照してください。

次のステップ

　この段階の状況依存ヘルプシステムは、かなり単純で、欠点があります。第一の欠点は、すべてのヘルプが静的なマークアップで処理されることです。新しいヘルプウィンドウを追加するためには、適切な<div>タグおよび<iframe>タグと、onmouseover文およびonmouseout文を状況依存の領域に追加する必要があります。多くの場合は、この方法よりも、ASP.NETのデータWebコントロールのテンプレートまたは分離コードクラス自体からプログラム的に各ヘルプウィンドウを取得するというアプローチを採用した方が良いでしょう。また、このコードをダウンロードして試したときに、ヘルプウィンドウの高さが足りなくて、ヘルプテキストの最後の方が見えなくなるかもしれません。<iframe>にはスクロールバーが表示されますが、マウスをスクロールバー上に移動するとonmouseoutイベントが発生してウィンドウが消えてしまうので、テキストをスクロールできません。これと同様に、ヘルプウィンドウ内にハイパーリンクがあってもマウスでクリックできません。マウスがヘルプ領域を去ると、ヘルプウィンドウがすぐに消えるからです。

　このような問題点については、記事『Programmatically Creating Context-Sensitive Help on a Web Page』で解説します。

状況依存ヘルプシステムを強化する

　この記事の目的は、状況依存ヘルプシステムの基礎部分を作ることですので、このヘルプシステムには欠点があります。すぐに気付くのは、マウスが状況依存の領域に達した瞬間にヘルプウィンドウが表示され、マウスが領域を去った瞬間にウィンドウが消えることです。この動作には、操作性に関する2つの問題があります。まず、画面の上を移動しているマウスがたまたまヘルプ領域を通過しただけでもヘルプウィンドウが表示されるので、めざわりなことがあります。また、ヘルプウィンドウ内にリンクがあったり、長すぎてスクロールしないと読めないテキストがある場合、マウスをヘルプ領域からヘルプウィンドウに移動しようとすると、マウスがヘルプ領域を出てしまうため、ヘルプウィンドウが消えます。
　このような操作性の問題点に加えて、この状況依存ヘルプシステムは、ページの開発者にとってもユーザーフレンドリではありません。すべてのスクリプトおよび<div>要素と<iframe>要素を手動でWebページに追加して、ヘルプウィンドウと、ヘルプ領域のonmouseoverイベントハンドラとonmouseoutイベントハンドラを定義する必要があるからです。開発の手間という面から考えれば、必要なすべてのスクリプトとマークアップを、ASP.NET分離コードクラスの1行のコードで追加できるのが理想的です。
　記事『Programmatically Creating Context-Sensitive Help on a Web Page』では、これらの欠点を解消する方法を説明します。

結論

　HTMLのtitle属性を使って、各種のHTML要素にツールヒントを追加すれば、状況依存ヘルプを作成できます。ただし、ツールヒントで表示できるテキストメッセージの文字数には限りがあり、複雑な書式設定、イメージ、色なども表示できません。この記事では、事前に定義した画面上の領域にマウスが移動したときに複雑なヘルプウィンドウを表示できる、ツールヒント型のヘルプシステムを独自に作る方法を説明しました。

　それでは、ハッピープログラミング！

著者紹介

Scott Mitchell（Scott Mitchell）

http://www.4guysfromrolla.com/ScottMitchell.shtml