状況依存ヘルプを自動的に追加する
特定の領域にヘルプウィンドウを関連付けるには、以下のクライアントサイドタスクを作成する必要があります。
- ヘルプウィンドウを開閉する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クラスを実際に使ってみたい方は、この記事のダウンロードサンプルをご利用ください。
ContextSensitiveHelpクラスの開発にはVisual Studio 2005を使用しました。このクラスはASP.NET 2.0のWebアプリケーションで使うことを想定しています。クライアントサイドスクリプトの発行に関して.NET Framework 2.0で新たに登場したクラスやメソッドを使用しているので、そのままだとASP.NET 1.xアプリケーションでは正常に動作しません。しかし、2.0の新しいスクリプト機能も少し修正すれば1.xで実現できます。ASP.NET 1.xアプリケーションでクライアントサイドスクリプトを自動的に操作する方法については、『Working with Client-Side Script』を参照してください。まとめと次のステップ
今回は、以前の記事『Webページ上に状況依存ヘルプを作成する』で紹介した状況依存ヘルプシステムに大幅な改良を加えました。JavaScriptのsetTimeout関数を使用してヘルプウィンドウを表示するまでの猶予時間を追加する方法と、ヘルプ領域からマウスが出た後もヘルプウィンドウを表示したままにしておく方法を説明しました。また、ContextSensitiveHelpクラスについて紹介しました。このクラスには、ヘルプウィンドウを作成してヘルプ領域と関連付ける簡単なメソッドが用意されています。
しかし、この状況依存ヘルプシステムには、まだ足りない点があります。例えば、ヘルプウィンドウの高さと幅を明示的に指定する必要があり、ウィンドウサイズが実際の内容に応じて変化しません。そのため、ヘルプウィンドウのサイズが400x350なのに内容がたった数ワードといったことが起こります。ウィンドウ内の空白部分を切り詰めてヘルプウィンドウのサイズを200x150というように自動的に調整する機能があれば理想的です。また、ヘルプ領域がブラウザの右端または下端近くにあるときに、ヘルプウィンドウがブラウザの右端または下端で切れてしまうようです。右端で切れそうなら左へ、下端で切れそうなら上へとウィンドウの位置を自動的にずらす機能があるとよいと思います。これらの問題は、多分今後の記事で扱うことになるでしょう。
それでは、ハッピープログラミング！
