.NET TIPS [ASP.NET]Webフォームでクリッカブル・マップを作成するには?[2.0のみ、C#、VB]山田 祥寛2006/03/10 |
![]() |
|
クリッカブル・マップとは、複数のクリック領域を定義(マッピング)した画像のこと。クリッカブル・マップを利用することで、例えば地図画像において、任意のエリアをクリックすると対応する地域の情報が表示される、というような効果も容易に実現できるわけだ。
もちろん、クリッカブル・マップは「クライアントの環境に依存しやすい」「画像データの多用によってページ・サイズが膨らむ原因になる」などの難点もあるので、過度な乱用はお勧めできない。しかし、適切な個所で補助的な機能として利用する限りは、効果的なナビゲーションを実現できるはずだ。
そして、このクリッカブル・マップの機能をASP.NET上で実現するのがImageMapコントロールだ。
シンプルなクリッカブル・マップを実現するならば、HTML標準の<map>タグも利用可能だが、ImageMapコントロールでは、単にほかのページへのリンクを定義するだけではない。自分自身へのポストバック処理を記述したり、クリック可能なエリアの有効/無効をサーバ側で動的に切り替えたりといった、より<ASP.NET的>な操作を実現できるようになっている。
ImageMapコントロールを使った具体的な例を見てみよう。以下は1つの画像中に含まれた3つの図形(写真)をクリックすると、それぞれに対応するメッセージがLabelコントロール上に表示されるというサンプル・アプリケーションだ。
![]() |
||||||
![]() |
||||||
![]() |
||||||
ImageMapコントロールを利用したクリッカブル・マップ | ||||||
ImageMapコントロールを使って1枚の画像データに対して3つのクリック領域を定義したサンプル・アプリケーションを実行したところ。クリック領域としては写真が表示されている円、星、四角形の3つを定義している。 | ||||||
|
それではさっそく、具体的な構築の手順をVisual Studio 2005(以降、VS 2005)環境を前提に見ていくことにしよう。なお、クリッカブル・マップの対象となる以下のような画像(ham.jpg)をあらかじめ用意しておくものとする。
![]() |
クリッカブル・マップとして利用する画像(ham.jpg) |
1. Webフォームをデザインする
フォーム・デザイナ上には、以下の画面の要領でImageMapコントロールとLabelコントロールを配置する。そして、それぞれのコントロールのプロパティを、表の内容のとおりに設定する。
![]() |
|||||||||||||||||
|
|||||||||||||||||
Webフォーム(C#:imageMap_cs.aspx/VB:imageMap_vb.aspx)のフォーム・レイアウト フォーム・デザイナ上に、ImageMapコントロールとLabelコントロールを配置して、それぞれのプロパティを表のように設定する。 |
|||||||||||||||||
|
ImageMapコントロールのHotSpotModeプロパティは、クリッカブル・マップをユーザーがクリックしたときの動作を示すもので、以下のような値を指定できる。
設定値 | 概要 |
NotSet | 無指定(デフォルト。各領域でNotSetが指定された場合にはImageMapコントロールでの設定がデフォルト値として適用される) |
Inactive | 何も行わない(無効) |
Navigate | それぞれの領域で指定されたURL(NavigateUrlプロパティ)へリンク |
PostBack | サーバへのポストバックを行う |
![]() |
|
HotSpotModeプロパティで利用可能な設定値 | |
HotSpotModeプロパティは、クリッカブル・マップをユーザーがクリックしたときのアクションの方法を示す。 |
2. クリック可能な領域を定義する
次にクリック可能な領域を定義する。これには、(先ほど説明を省略した)プロパティ・ウィンドウのHotSpotsプロパティから[HotSpot コレクション エディタ]を起動することで行う。ここでは、画像データham.jpg上の円、星、四角形に対して、それぞれ領域を設定してみよう。
新しい領域を作成するには、[HotSpot コレクション エディタ]の[追加]ボタンの右端の▼をクリックして領域の種類をCircleHotSpot(円形)、RectangeHotSpot(四角形)、PolygonHotSpot(多角形)の中から選択する。ここでは、CircleHotSpot、PolygonHotSpot、RectangleHotSpot、の順に3つの領域を追加する。さらに追加した各領域に対して、右にあるプロパティ・ウィンドウからそれぞれ以下の表のようなプロパティ値を設定しておこう。
![]() |
||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||
HotSpotコレクション・エディタ | ||||||||||||||||||||||||||||||||||||||||
HotSpotコレクション・エディタを利用することで、クリッカブル・マップ上のクリック可能な領域を編集することができる。 | ||||||||||||||||||||||||||||||||||||||||
|
HotSpotModeプロパティにNotSet(無指定)を指定した場合、それらの領域はImageMapコントロールにおけるHotSpotModeプロパティの設定値(この場合はPostBack)を引き継ぐことになる。
通常は、ImageMapコントロールでデフォルトのアクションを指定しておき、それぞれの領域ではデフォルトと異なる場合のみNotSet以外の値を指定するようにするとスマートだろう。なお、ImageMapコントロールとそのイメージ内の各領域の双方のHotSpotModeプロパティがNotSetである場合、ImageMapコントロールはデフォルトでそれぞれの領域に設定されたURL(NavigateUrl属性)に対してリンクしようとする。
それぞれの領域のHotSpotModeプロパティがPostBack(またはNotSetの場合で上位のImageMapコントロールがPostBack)である場合には、PostBackValueプロパティを指定する必要がある。
PostBackValueプロパティは、クリッカブル・マップの各領域がクリックされたタイミングでサーバ側にポストバックされる値を指定するためのものだ。ここで指定した値は、後からImageMapコントロールのClickイベントを処理する際に参照することができる。
ちなみに、HotSpotModeプロパティの値がNavigateである場合には、PostBackValueプロパティの代わりにNavigateUrl属性(リンク先のURL)とTargetプロパティ(リンク先のフレーム)を指定する必要がある。Targetプロパティでは、ターゲットとなる任意のフレーム名のほか、「_self」(自分自身)、「_parent」(親フレーム)、「_blank」(新たなウィンドウ)、「_top」(最上位フレーム)を指定可能だ。
最後に領域の範囲を定義する方法であるが、これは領域の種類によって異なる。それぞれの領域で指定可能なプロパティは、以下の表にまとめておこう。
領域の種類 | プロパティ | 概要 |
CircleHotSpot | Radius | 半径 |
X | 中心のX座標 | |
Y | 中心のY座標 | |
PolygonHotSpot | Coordinates | 各点の座標を「x1,y1,……」で指定 |
RectangleHotSpot | Left | 左上のX座標 |
Top | 左上のY座標 | |
Right | 右下のX座標 | |
Bottom | 右下のY座標 | |
![]() |
||
各領域の定義に必要なプロパティ |
これで、クリッカブル・マップの表示にかかわる設定は完了だ。ここで参考までにVS 2005によって自動生成されたコードを引用しておく。
|
|
VS 2005が生成したWebフォームのソース・コードの抜粋(C#:imageMap_cs.aspx/VB:imageMap_vb.aspx) |
3. クリック時の処理を記述する
各領域のHotSpotModeプロパティにNavigateを設定したならば、これでクリッカブル・マップは正しく動作するはずだ。しかし、今回はHotSpotModeプロパティをPostBackに設定しているので、それぞれの領域をクリックしたタイミングでサーバ側が行うべき処理を記述する必要がある。
本稿の例では次のようなコードを記述すればよい。
|
||
クリッカブル・マップのクリック時の動作(上:imageMap_cs.aspx.cs/下imageMap_vb.aspx.vb) |
im_Clickイベント・ハンドラの第2パラメータであるImageMapEventArgsオブジェクト(System.Web.UI.WebControls名前空間)は、クリッカブル・マップ上で発生したClickイベントの情報を管理するためのオブジェクトだ。そのPostBackValueプロパティを介することで、先ほどそれぞれの領域で定義したPostBackValueプロパティの値を取得できる。
ここでは単純に渡されたポストバック値に基づいてラベルに異なる値を出力しているだけであるが、もちろん、実際のアプリケーションでは渡された値を基にデータベースを検索するなどの処理が発生するはずだ。
以上を理解できたら、Webフォーム(imageMap_cs.aspx/imageMap_vb.aspx)を実行してみよう。冒頭に挙げたような結果が得られれば成功だ。
利用可能バージョン:.NET Framework 2.0のみ カテゴリ:Webフォーム 処理対象:ImageMapコントロール 使用ライブラリ:ImageMapコントロール 使用ライブラリ:ImageMapEventArgsクラス(System.Web.UI.WebControls名前空間) |
![]() |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |