第3部 NCSA httpd-1.0を使ったISMAP機能の設定方法

 この文書はNCSA httpd-1.0を使ったISMAPによる画像、URL間のマ
ッピングの設定について、NTTにある「Clickable W3 Map for Japan
を例にとって説明します。以降の説明を分かりやすくするためにも、
まずはこのクリッカブルマップを試してみてください。

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

ステップ1:HTMLファイルの作り方

 まず最初にマッピングを行う、つまり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>
 ここでのポイントは太字になっている2行です。まずマッピングを
行わせたい画像ファイルを指定する<IMG ... >の中にISMAPという呪
文を入れます。このおまじないにより、そのイメージ上でマウスを
クリックした際にポインタの座標がhttpdに渡されるようになりま
す。

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

ステップ2:imagemap.confファイルの設定

 つぎに、ステップ1で定義した「マッピング名」に対応する「マッ
プ設定ファイル名」を指定します。つぎの1行を
「/usr/local/etc/httpd/conf/imagemap.conf」ファイルに追加して
ください。

  resource-map : /usr/local/etc/httpd/htdocs/japan/map/resource-map.map
「マッピング名 :」の後に書かれたものが、「マップ設定ファイル
名」となります。この名前も自由に選ぶことができます。

ステップ3:マップ設定ファイルについて

 さて、いよいよ「マップ設定ファイル」自身を定義します。この
「マップ設定ファイル」により、マウスクリックで指定されたイメ
ージ上の座標と、その結果として飛んで行く先の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
 たとえば4行目のcircleで始まる行は、地図上で札幌あたりにある
赤い丸の近辺でマウスがクリックされたら
「http://www.huie.hokudai.ac.jp/に飛べ」という記述です。

 正確に言うと、最初のcircleは円形の領域指定を表し、つぎがそ
の領域に対応するURL、そして3番目と4番目の値はその円形領域の中
心の座標と周縁(どこでもよい)の座標を定義しています。座標は
x,y」という形式で表されます。

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

 そして、2行目のdefaultという記述を使って、circlerectで指
定された領域以外の所でマウスがクリックされた場合に起こる動作
を定義することもできます。

 NCSA httpd-1.0ではdefaultcirclerect以外に多角形領域を指
定するpolyというメソッドも使えます。これらのメソッドに関して
は、詳しくはNCSA httpd Image Mappingを参考にしてください。

Mappingを参考にしてください。

ステップ4:マップ設定ファイルの書き方

 とりあえず「マップ設定ファイル」の書式は分かったとしましょ
う。さて、それでは実際にどうやって画像ファイルの座標を調べて
マップ設定ファイルを書くのでしょうか?これはとても大変です。
一般的にはX Window 用のアプリケーションであるxvを使ってその
画像ファイル中の必要な点の座標値を調べては(xvでは左ボタンを
押すと座標などが表示されます)手で書き写すという原始的な方法
が使われていることも多いようです。

 しかしこれは、マッキントッシュのハイパーカード上で動く
hyper-map-editというツールを使えば簡単にマップ設定ファイルの
設定ができるようです。私は使ったことはないのですが、これから
挑戦される方は試してみてはいかがでしょうか?

 そういった苦労の末に完成した実際の、

  /usr/local/etc/httpd/htdocs/japan/map/resource-map.map
は、こんな感じになっています。参考にしてみてください。

ステップ5:うまくできましたか?

 ともあれ、マップ設定ファイルが無事にできたならば、これで
ISMAPを使った画像/URL間のマッピングの設定は終了です。

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