CodeZine(コードジン)

特集ページ一覧

Webページ上の状況依存ヘルプの自動作成

ASP.NETの分離コードを利用しスクリプトやマークアップを自動的に追加する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/10/30 00:00

前稿『Webページ上に状況依存ヘルプを作成する』では基礎に重点を置いていたため、いくつか足りない点がありました。今回は、ヘルプウィンドウの開閉タイミングの調整方法や、ASP.NETの分離コードを利用して必要なスクリプトとマークアップを自動的に追加する方法などについて解説します。

目次

はじめに

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

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

 この状況依存ヘルプシステムには、こうした操作性の問題の他に、ページ開発者にとってそれほどユーザーフレンドリでないという問題もあります。すべてのスクリプトと<div>および<iframe>要素をWebページに手動で追加してヘルプ領域のイベントハンドラ(onmouseoveronmouseout)を定義する必要があるからです。理想的には、必要なすべてのスクリプトとマークアップを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に設定します。詳細については、この記事のダウンロードサンプルを参照してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5