Webページ上に状況依存ヘルプを作成する

JavaScriptによるHTML形式のヘルプウィンドウの表示

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

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