はじめに

　前回の記事『Webページ上に状況依存ヘルプを作成する』では、ブラウザの特定の領域にリッチテキストのヘルプツールヒントを関連付けるにはどうすればよいかを考察しました。特定のイメージやテキストの上にマウスポインタを置いたときに、クライアントサイドの簡単なJavaScriptとHTMLマークアップによって、画像やリッチテキストを含むヘルプウィンドウが表示されるようにしたわけです。このような状況依存ヘルプには、Webページに追加的な情報を表示する場合やWebページ上のデータをさらに詳しく説明する場合に、表示スペースを節約できるメリットがあります。

　前回の記事は、状況依存ヘルプシステムの基礎作りに重点を置いていたため、いくつか足りない点がありました。すぐ気付くのは、マウスが状況依存領域を横切るとすぐにヘルプウィンドウが表示され、状況依存領域を離れるとすぐに消えることです。この動作は操作性の面で2つの問題を引き起こします。第一の問題は、画面上を移動するマウスがたまたまヘルプ領域を通過しただけでヘルプウィンドウが表示され、目障りになることです。第二の問題は、ヘルプウィンドウ内にリンクが含まれている場合や長いテキストのためにスクロールが必要な場合に、ヘルプ領域の外にマウスを移動するとヘルプウィンドウが消えてしまうことです。

　この状況依存ヘルプシステムには、こうした操作性の問題の他に、ページ開発者にとってそれほどユーザーフレンドリでないという問題もあります。すべてのスクリプトと<div>および<iframe>要素をWebページに手動で追加してヘルプ領域のイベントハンドラ（onmouseoverとonmouseout）を定義する必要があるからです。理想的には、必要なすべてのスクリプトとマークアップをASP.NET分離コードクラスの1行のコードで自動的に追加できるようにしたいところです。

　この記事では、前回紹介した初歩的な状況依存ヘルプシステムの改良方法を考えます。まず前述の操作性の問題を解決し、次にASP.NET 2.0のクラスを作成します。このクラスのメソッドを使って、特定のヘルプ領域のヘルプウィンドウと必要なスクリプトを追加しようというわけです。では、本題に入りましょう！

　前回の記事『Webページ上に状況依存ヘルプを作成する』をまだお読みでない方は、そちらから先に読むことをお勧めします。

ヘルプウィンドウの開閉がすぐに行われないようにする

　一般的なWebページやWindowsアプリケーションでは、ツールヒント対応のインターフェイス領域上をマウスが通過しただけではツールヒントは表示されず、マウスをその領域で一呼吸止めたときに初めて表示されるようになっています。しかし、先週の記事で紹介した状況依存ヘルプシステムでは、マウスがヘルプ領域を横切るとヘルプウィンドウが直ちに表示されます。この過敏な動作は、ブラウザ画面上でマウスを移動するときに目障りな印象を与えます。状況依存ヘルプを表示するつもりがなくてもマウスを画面上で動かすとヘルプ領域をいくつか通過してヘルプウィンドウが表示されてしまうからです。これらのヘルプウィンドウは、画面上でそのままマウスを動かせば消えますが、ヘルプウィンドウがパッと現れてすぐ消えるとユーザーが混乱するばかりでなく、ユーザーに不快な思いをさせる可能性があります。

　この問題を改善するには、少し猶予時間を置いてからウィンドウを表示するようにします。つまり、ヘルプ領域上にマウスが来てもヘルプウィンドウを直ちに表示せず、半秒ほど待ってからヘルプウィンドウを表示します。半秒の待ち時間以内にマウスがヘルプ領域を出た場合はヘルプウィンドウを表示しません。

　JavaScriptのsetTimeout(expression, delay)関数は、指定された猶予時間（ミリ秒単位）の経過後に特定の式を実行します。setTimeoutを使用するときに注意すべき点は、この関数が非ブロック関数であることです。setTimeout文のところまで来ると、この文中の式が、指定時間後に実行される待ち行列に追加されます。待ち行列への追加後、setTimeout関数に続くJavaScript行が間を置かずに実行されます。これは言い換えると、指定した猶予時間は非同期的に消化されるということです。猶予時間が経過するまで制御フローがsetTimeoutコマンドのところで待機するわけではありません。

　そこでこの待機機能を実現するために、前回の記事でヘルプウィンドウを表示するのに使っていたcsi_showHelpFloatWindow関数を次の2つに分割しました。

• csi_showHelpFloatWindow
以前と同じ入力パラメータセットに加え、新たなパラメータwaitDurationInMillisecondsを受け取ります。waitDurationInMillisecondsパラメータには、マウスがヘルプ領域に入ってからヘルプウィンドウを表示するまでの時間をミリ秒単位で指定します。この関数はsetTimeout関数を用いてcsi_showHelpFloatWindowInternalを呼び出します。
• csi_showHelpFloatWindowInternal
ヘルプウィンドウを表示する実際の処理を実行します。

　その他に、ウィンドウの表示をキャンセルするかどうかを指示するフラグ変数が必要です。例えば、マウスがヘルプ領域に入ったときは、csi_showHelpFloatWindow関数が呼び出され、setTimeout関数を通じて、csi_showHelpFloatWindowInternal関数を例えば500ミリ秒後に呼び出すように設定されます。500ミリ秒以内にマウスがヘルプ領域から出た場合は、本来ならばヘルプウィンドウを表示する必要はないのですが、現在のままではcsi_showHelpFloatWindowInternal関数が実行されてしまいます。マウスの動きに応じてこの関数を取り消す機能が用意されていないからです。

　そこで、オープンコマンドがキャンセルされたかどうかを示すフラグ変数を使うことにします。この変数はcsi_showHelpFloatWindow内でfalseに設定され、ヘルプ領域のイベントハンドラcsi_showHelpFloatWindow内でtrueに設定されます。csi_showHelpFloatWindowInternal関数は、キャンセルフラグがfalseの場合にのみ実行を継続します。1つのページ上に複数の種類のヘルプウィンドウ（windowIDの異なるヘルプウィンドウ）が存在する可能性があるので、フラグ変数が1つではうまくいきません。ヘルプウィンドウの種類ごとにフラグが必要です。これを実現するには、次のように配列を使用します（強調表示されている部分に注目）。

// Array to hold the ’flags’ to determine
// whether a window’s open has been cancelled
var csi_cancelOpenArray = new Array();

function csi_showHelpFloatWindow(windowID, objID, horizPadding,
    vertPadding, goRight, waitDurationInMilliseconds)
{
   // keep the window open
   csi_cancelOpenArray[windowID] = false;

   setTimeout("csi_showHelpFloatWindowInternal(’" + windowID
      + "’,’" + objID + "’," + horizPadding + "," + vertPadding
      + "," + goRight + ");", waitDurationInMilliseconds);
}

function csi_showHelpFloatWindowInternal(windowID, objID,
   horizPadding, vertPadding, goRight)
{
   // exit function immediately if open command has been cancelled
   if (csi_cancelOpenArray[windowID] == true) return;

   ... Same logic for displaying the help window
          as seen in last week’s article ...
}

　マウスがヘルプ領域の外に出たら、フラグ（csi_cancelOpenArray[windowID]）をtrueに設定する必要があります。これを実現するためにcsi_hideHelpFloatWindow関数を書き換えます（この関数はヘルプ領域のonmouseoutイベントから実行されます）。

function csi_hideHelpFloatWindow(windowID)
{
   // cancel the open
   csi_cancelOpenArray[windowID] = true;

   ...
}

　同様にして、ヘルプウィンドウを開いたヘルプ領域からマウスが出てからヘルプウィンドウを閉じるまでの猶予時間を追加します。この猶予時間を設けることで、ユーザーはマウスをヘルプ領域からヘルプウィンドウへ移動し、そこでヘルプウィンドウの操作（スクロールやハイパーリンクのクリックなど）を行えるようになります。これを実現するために別のフラグ配列（csi_cancelCloseArray）を使用します。これはヘルプ領域から出るときにcsi_hideHelpFloatWindow関数内でfalseに設定され、マウスがヘルプ領域に入ったとき、あるいはマウスがヘルプウィンドウそのものに入ったときにtrueに設定されます。ウィンドウ表示前の猶予時間と同じく、これを実現するためにcsi_hideHelpFloatWindow関数を次の2つの関数に分割します。

• csi_hideHelpFloatWindow
新たな入力パラメータwaitDurationInMillisecondsを受け取ります。このパラメータには、マウスがヘルプ領域を出てからヘルプウィンドウを隠すまでの猶予時間をミリ秒単位で指定します。この関数はsetTimeout関数を使用してcsi_hideHelpFloatWindowInternalを呼び出します。
• csi_hideHelpFloatWindowInternal
ヘルプウィンドウを隠す実際の処理を実行します。

// Array to hold the ’flags’ to determine
// whether a window’s close has been cancelled
var csi_cancelCloseArray = new Array();

function csi_hideHelpFloatWindow(windowID, waitDurationInMilliseconds)
{
   // cancel the open
   csi_cancelOpenArray[windowID] = true;

   // wait before hiding window
   csi_cancelCloseArray[windowID] = false;

   setTimeout("csi_hideHelpFloatWindowInternal(’"
      + windowID + "’);", waitDurationInMilliseconds);
}

function csi_hideHelpFloatWindowInternal(windowID)
{
   // exit function immediately if close command has been cancelled
   if (csi_cancelCloseArray[windowID] == true) return;

   ... Same logic for hiding the help window
          as seen in last week’s article ...
}

• ライブデモを見る

　また、csi_showHelpFloatWindowとヘルプウィンドウのonmouseoverイベントで、csi_cancelCloseArray内の適切なフラグをtrueに設定します。詳細については、この記事のダウンロードサンプルを参照してください。

状況依存ヘルプを自動的に追加する

　特定の領域にヘルプウィンドウを関連付けるには、以下のクライアントサイドタスクを作成する必要があります。

• ヘルプウィンドウを開閉するJavaScript
• ヘルプウィンドウのCSSスタイル（絶対位置を決めるためのz-indexなど）
• ヘルプウィンドウのマークアップ（<div>タグと<iframe>タグ）

　状況依存ヘルプを必要とする各ページにこれらの要素を手動で追加するのは手間がかかりますし、間違いのもとです。そのような方法によらず、ASP.NETページの分離コードクラスの1行のコードで画面上の領域とヘルプウィンドウを関連付けることができれば理想的です。そうすれば、メソッドを1回呼び出すだけで、必要なJavaScript、CSS、そしてヘルプウィンドウのマークアップが自動的に挿入されるからです。

　これを実装するために、状況依存ヘルプ関連メソッドを含むContextSensitiveHelpというクラスを作成しました。ContextSensitiveHelpはSystem.Web.UI.Pageクラスの派生クラスです。ContextSensitiveHelpの状況依存ヘルプ関連メソッドをASP.NET内で利用するには、今回のサンプルアプリケーションのASP.NETページの分離コードクラスを、System.Web.UI.PageではなくContextSensitiveHelpから派生するように調整します。この手法とメリットについては、記事『Using a Custom Base Class for your ASP.NET Page’s Code-Behind Classes』を参照してください。

　ContextSensitiveHelpクラスのAddContextSensitiveHelpというページレベルアクセスメソッドに各種のオーバロードが用意されています。このメソッドには少なくとも次の情報を渡す必要があります。

• ヘルプ領域となるWebコントロール（LabelまたはImage Webコントロール）
• windowID（ウィンドウ開閉用のヘルプウィンドウを識別する任意の文字列）
• ヘルプウィンドウに表示するヘルプWebページのURL

　オプションで、ヘルプウィンドウの表示位置（ヘルプ領域の右または左側）、ウィンドウの幅と高さ、ヘルプ領域とヘルプウィンドウの間の左右および上限の余白、ヘルプウィンドウ開閉時の猶予時間（ミリ秒）に関する入力パラメータも指定できます。AddContextSensitiveHelpメソッドを呼び出すと、必要なJavaScriptとCSSが追加され、さらにヘルプウィンドウのマークアップが追加されます。

　例えば、WelcomeLabelというLabelコントロールにヘルプウィンドウを関連付けるには、Page_Loadイベントハンドラに次のコード行を追加します。

AddContextSensitiveHelp(WelcomeLabel, "GeneralHelp",
   "~/HelpFiles/GeneralHelp.aspx")

　ContextSensitiveHelpクラスを実際に使ってみたい方は、この記事のダウンロードサンプルをご利用ください。

まとめと次のステップ

　今回は、以前の記事『Webページ上に状況依存ヘルプを作成する』で紹介した状況依存ヘルプシステムに大幅な改良を加えました。JavaScriptのsetTimeout関数を使用してヘルプウィンドウを表示するまでの猶予時間を追加する方法と、ヘルプ領域からマウスが出た後もヘルプウィンドウを表示したままにしておく方法を説明しました。また、ContextSensitiveHelpクラスについて紹介しました。このクラスには、ヘルプウィンドウを作成してヘルプ領域と関連付ける簡単なメソッドが用意されています。

　しかし、この状況依存ヘルプシステムには、まだ足りない点があります。例えば、ヘルプウィンドウの高さと幅を明示的に指定する必要があり、ウィンドウサイズが実際の内容に応じて変化しません。そのため、ヘルプウィンドウのサイズが400x350なのに内容がたった数ワードといったことが起こります。ウィンドウ内の空白部分を切り詰めてヘルプウィンドウのサイズを200x150というように自動的に調整する機能があれば理想的です。また、ヘルプ領域がブラウザの右端または下端近くにあるときに、ヘルプウィンドウがブラウザの右端または下端で切れてしまうようです。右端で切れそうなら左へ、下端で切れそうなら上へとウィンドウの位置を自動的にずらす機能があるとよいと思います。これらの問題は、多分今後の記事で扱うことになるでしょう。

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