NCSA httpd-1.0 を用いた ISMAP 機能の設定方法

高田敏弘 (takada@mdma.brl.ntt.co.jp)

この文書は NCSA httpd-1.0 を用いた ISMAP による画像/URL間のマッピングの設定について, Clickable W3 Map for Japan を例にとって説明します. 以降の説明を分かりやすくするためにも, まずはこの Clickable Map を試してみて下さい.

以下の説明では, httpd 関連のファイルは /usr/local/etc/httpd/ というディレクトリの下にあることを仮定しています. あなたが設定しようとするサーバーではそれ以外のディレクトリに httpd が置かれている場合もありますので, その点は注意して下さい.

それでは始めましょう.

Step 1: Creating HTML file

まず最初にマッピングを行なう, すなわち ISMAP 機能を指定する画像ファイルを含む HTML ファイルを作ります. 例えばそのファイルを

/usr/local/etc/httpd/htdocs/japan/map/index.html

としましょう. このファイルの中身は以下のようになっています.

____________________________________________________
<HEAD>
<TITLE> Clickable W3 Map for Japan </TITLE>
</HEAD>
<BODY>
<H1> Clickable W3 Map for Japan< /H1>
This is an overview of all the WWW servers in Japan.
...
<A HREF="/cgi-bin/imagemap/resource-map">
<IMG SRC="resource-map.gif" ISMAP> </A>
...
</BODY>
____________________________________________________

ここでのポイントは太字になっている２行です.

まずマッピングを行なわせたい画像ファイルを指定する <IMG ... > の中に ISMAP という呪文を入れます. このおまじないにより, そのイメージ上でマウスをクリックした際にポインタの座標が httpd に渡されるようになります.

更にその IMG タグ全体を <A HREF="/cgi-bin/imagemap/resource-map"> </A> で囲みます. 最後の resource-map の部分は「マッピング名」というもので, 既に同じサーバ内で使われているマッピング名と重複しない限り, 好きな名前にして構いません. このマッピング名が次のステップへのキーワードとなります.

Step 2: Setting "imagemap.conf"

次に, Step 1: で定義した「マッピング名」に対応する「マップ設定ファイル名」を指定します. 次の１行を "/usr/local/etc/httpd/conf/imagemap.conf" ファイルに追加して下さい.

__________________________________________________________________
resource-map : /usr/local/etc/httpd/htdocs/japan/map/resource-map.map
__________________________________________________________________

"マッピング名 :" の後に書かれたものが, 「マップ設定ファイル名」となります. この名前も自由に選ぶことができます.

Step 3: About Map Configuration File

さて, いよいよ次に「マップ設定ファイル」自身を定義します. この「マップ設定ファイル」により, マウスクリックで指定されたイメージ上の座標と, その結果として飛んで行く先の URL との対応付けが定義されます.

まずは実際の "/usr/local/etc/httpd/htdocs/japan/map/resource-map.map" の内容を見てみましょう.

______________________________________________________________
# default
default /japan/index.html
# Hokkaido
circle http://www.huie.hokudai.ac.jp/ 352,81 358,81
# Hokkaido Univ.
rect http://www.huie.hokudai.ac.jp/ 378,124 506,143
...
# Ube College
rect http://www.ube-c.ac.jp/home/www/ube-c.html 106,227 211,245
______________________________________________________________

例えば４行目の circle で始まる行は, 地図上で札幌あたりにある赤い丸の近辺でマウスがクリックされたら http://www.huie.hokudai.ac.jp/ に飛べ, という記述です.

正確に言うと, 最初の circle は円形の領域指定を表し, 次がその領域に対応する URL, そして３番目と４番目の値はその円形領域の中心の座標と周縁 (どこでも良い)の座標を定義しています. 座標は "x, y" という形式で表されます.

６行目の rect は, 同じく地図上で "＊ Hokkaido Univ." と書かれている近辺の矩形領域でマウスがクリックされた場合も北大のサーバに飛ぶように設定しています. rect の場合, 第３引数と第４引数はそれぞれ矩形領域の左上の座標と右下の座標を表します.

そして, ２行目の default という記述を用いて, circle や rect で指定された領域以外の所でマウスがクリックされた場合に起こる動作を定義することもできます.

NCSA httpd-1.0 では default, circle, rect 以外に多角形領域を指定する poly というメソッドも使用可能です. これらのメソッドに関しては, 詳しくは NCSA httpd Image Mapping を参考にして下さい.

Step 4: How to Write Map Configuration File

とりあえず「マップ設定ファイル」の書式は分かったとしましょう. さて, それでは実際にどうやって画像ファイルの座標を調べてマップ設定ファイルを書くのでしょうか？

これはとっても大変です. 世の中では, xv を使ってその画像ファイル中の必要な点の座標値を調べては (xv では左ボタンを押すと座標等が表示されます) 手で書き写す, という原始的な方法が用いられている場合も多いようです. これは非常に疲れます.

しかしこれは, Mac の HyperCard 上で動く hyper-map-edit というツールを使えば簡単にマップ設定ファイルの設定ができるらしいです. 私は使ったことはないのですが, これから挑戦される方は試してみてはいかがでしょうか？
(情報ありがとうございました > 益岡さん, 山本さん)

まあ, そういった苦労の末に完成した実際の

/usr/local/etc/httpd/htdocs/japan/map/resource-map.map

は, こんな感じになっています. 参考にしてみて下さい.

Get it?

ともあれ, マップ設定ファイルが無事に出来たならば, これで ISMAP を用いた画像/URL間のマッピングの設定は終了です.

皆さんのところでは, 無事に動きましたか？より詳しくは NCSA httpd Image Mapping を参考にしてみて下さい. 成功をお祈りしてます.

[index]

TAKADA Toshihiro