画像とテキストの架け橋

ハイパーカードと画像

ハイパーカードはその誕生の時から画像も含めた情報を総合的に扱う機能を備えていた。あの当時、図形、音声、テキストをパーソナルな環境でこれだけバランスよくしかも手軽に処理できるシステムは他にはなく、まさに画期的な環境だったのだ。インターネットにＷＷＷがあらわれたのはごく最近であることをみても、ハイパーカードがいかに先進的だったかがよくわかる。

これまで、この連載では「情報をテキストとして蓄積する」ことに主眼を置き、ハイパーカードのグラフィック部分はほとんど目を向けないできた。オフィスで扱う情報は第一義的にテキストが中心であり、将来の互換性や処理の柔軟性を考えても、テキストで情報を持つことが有利だからだ。

しかし、ＷＷＷでもイメージマップ（*注1）が好んで用いられているように、画像を使うことで情報がより理解しやすくなる場合も少なくない。もともとハイパーカードはイメージを簡単に扱えるのだから、必要とあらばいつでもこれを活用することができる。とはいっても、単に飾りの絵をつけたり、ボタンアイコンの代わりにカラフルなピクチャを用意するだけでは、趣味のスタックならともかく、オフィスシステムとしては役不足だ。ここはひとつ、蓄積しているテキスト情報と画像を有機的に結びつけ、より使いやすくメンテナンスも容易なハイパークリッカブルマップを検討してみることにしよう。

テキスト情報と画像情報の橋渡し

ハイパーカード上でクリッカブルマップに相当するものを作るのは簡単である。カードに絵を描き、マウスクリックに反応させたいところに透明ボタンを置けばできあがりだ。ボタンごとに必要なカードにリンクするスクリプトを用意すれば、いちおうテキスト情報との連動らしきものが実現できる。しかしそれだけではテキスト情報との有機的なリンクとは言いがたい。これはあらかじめ定められたデータとの静的なつながりを、イメージを使って分かりやすく表現したものに過ぎないからだ。ダイナミックに変化する情報のリンクをつくるには、もう少し頭をひねる必要がある。

テキストと画像を有機的に結びつけるにはどのような方法が考えられるか。一般にクリッカブルマップは、絵だけではどこをクリックすべきか不明確なため、文字による指示や名前を埋め込んでいることが多い。例えば地図に地名を入れておくというような場合がそれに当たる。このやり方はハイパーカードでも応用可能だ。ボタンに情報の内容を表す名前を付け、名前を表示したボタンから同じ名前をもつカードにリンクさせるという方法は、

go cd (short name of me)

のように、わずか１行のボタンスクリプトで実現できる（*注2）。

これはボタンの名前を画像とテキストの橋渡しにするという点で一歩進んだアイデアではあるが、静的なリンクであるところは透明ボタンと違いがない。ダイナミックに変更されるデータを自在に呼び出せるようにするには、やはり外部のテキストファイルを利用する方法を考えるべきだろう。

ボタンから外部ファイルの情報を得る

いちばん手っ取り早いのは、ボタンと同じ名前のテキストファイルを用意して、その内容をどこかのフィールドに表示するというものだ。この方法ならリスト1のようなごく簡単なスクリプトで十分である。

簡単なのはよいが、しかしこれでは全体の情報を体系的に管理することが難しい。個々のボタンが全く異なるタイプの情報とリンクするのならともかく（ホームページの入り口などはこういうケースに当たる）、相互に関連する情報を扱うツールとしてイメージマップを利用するのなら、ひとつのデータファイルに情報をまとめた方がはるかに便利である。

それでは、情報を体系的に扱えるテキストファイルとしてはどんなものがあるか。いつもならここでHDB形式のファイル（*注3）となるところだが、毎度同じものでは芸がないし、データベースの多項目の情報はHDBでは扱いにくい。そこで今回は、もっと単純なタブ区切りテキスト形式のデータファイルを使って必要な情報を取り出す方法を考えることにする。この形式なら、情報はExcelなどを使って表を作り、「テキスト」ファイルとして書き出すだけでよいから作成も簡単である。

タブ区切りテキストから情報を取り出す

具体例を見ながら進めよう。画面1のような、日本地図に支店所在地が記入されているスタックを考える。都市名をクリックすると、支店の住所やその都市の人口などの関連情報がフィールドに表示されるというものだ。

スタックで表示するための情報は、画面2のようにワークシートで表を作成し、テキストとして保存しておく。表の１行目はそれぞれの情報の名称、１列目には支店所在地の都市名（＝ボタン名）が示されている。

ボタンから都市の名前を受け取り、このファイルを読み込んでその都市の情報を抜き出すのは特に難しいことではない。リスト2を見てみよう。

ここではボタンごとにスクリプトを置かず、カードのon mouseUpハンドラでマウスクリックを処理するようにした。2行目でthe target関数を用いてクリックされたオブジェクトを調べているのはそのためだ。こうしておけば、将来ボタンをいくらでも増やせるし、必要ならボタン以外の領域をクリックしたときの処理も定義することができる。今回の場合は、targetの名前が"card button"を含んでいるときにボタン名を引数として6行目からのshowInfoを呼び出すわけだ。

showInfoではデータファイルを読み込み、itemDelimiterをテキストファイルの区切り文字であるTABに設定してから（8行目）ファイルの内容を１行ずつ調べていく。データの最初の行には先に述べたように情報の名称が収められているはずだから、これは別扱いしてdataNamesという変数に保存しておこう（9行目）。したがって、ループではファイルの2行目以降についてデータが目的の都市のものかどうかをチェックすることになる。各データの1列目、すなわちitem 1を都市の名前にしたのだから、これがボタン名と一致したものが目的の情報ということだ。この情報の各項目（列＝item）を、dataIemsに保存した項目名と対応させ（19行目）、分かりやすいフォーマットでフィールドに書き込むようにしてみた。

柔軟にデータを扱えるスクリプト

このスクリプトで注目しておきたいのは、表示する項目をあらかじめスクリプトに設定する必要がないという点だ。言い替えれば、何かの事情で提供する情報が大きく変わっても、データファイルさえ書き直せば、スクリプトに全く手を加えることなく表示内容を変更することができる。データの１行目を項目名にし、わざわざスクリプト中で項目と情報を対応付けさせているのはこの柔軟性を持たせるためだ。項目が変動しても情報を読むたびにスクリプトが確認してくれるので、安心して最新のデータを提供できる。さらに、リスト2の18行目では、データ内容がハイフン（-）１文字の場合はその項目を無視するように設定している（*注4）。これによって、都市ごとに用意するデータ項目が異なっても、フィールドは虫食い状態にならずすっきり表示することができるわけだ。

このあたりは、1995/8号で考えた定義ファイルによる変数の抽象化と共通する発想である。スタックに直接組み込む命令はできるだけ個別の情報に密着しない、融通の利くものにしておく方がよい。そうしておけば、メンバーにスタックを配布した後でデータの一部を変更することになっても、スタックを書き直して再配布する必要はなく、単にデータファイルを修正するだけで事足りる。情報が増えるたびにスタックを作りなおさなければならないとなると、面倒だから情報は当分このままで、という消極姿勢になってしまうだろう。その意味では、スクリプトの7行目で指定しているデータファイル自身も、別の定義ファイルを使って変数として抽象化し、自由に書き換えができるようにする方がよいかもしれない。

ＷＷＷ用のマップファイルを作る

さて、せっかく画像をクリックして情報を呼び出す仕組みを作ったので、ここからＷＷＷ用のマップ設定ファイルも簡単に作成できるようにしておこう。同じ画像を使ってＷＷＷのイメージマップも作れば一石二鳥というわけだ（画面3）。もっともイメージマップはクリックした場所に応じて別のファイルにジャンプするという機能しかないので、スタックのような柔軟な処理が期待できるわけではない。ここで行なうのは、ハイパーカード上のボタンの位置を、マップ設定ファイルで使う情報に置き換えるという試みである。

マップ設定ファイルの基本的な書式は、

＜図形＞ ＜リンク先のURL＞ ＜座標1＞ ＜座標2＞

というものだ。例えばハイパーカードのボタンのような長方形の図形をクリックする場合は

rect city1.html 60,81 150,175

となる。カードに配置したボタンの位置を調べて、順番にcity1.html, city2.html...といったURLにリンクするマップファイルを作るにはリスト3のようなスクリプトを考えればよい。3行目で設定している"default"は、指定領域以外がクリックされた場合のリンク先。マッピング情報の設定は5行目で一気に行なっている。リンク先のURLはカード名+ボタン番号+".html"とし（したがってcityというカードの最初のボタンからはcity1.htmlにリンクする）、それぞれのボタンの左上と右下の位置を＜座標1＞ ＜座標2＞に割り当てているわけだ。実際にマップファイルとして使うにはいくつかの修正が必要だろうが、とりあえずの雛形としては十分役に立つ。ＷＷＷ用のGIFファイルは、画面をキャプチャして加工すればよいだろう（*注5）。

このマップ設定ファイルを"image.map"とし、画像を"image.gif"とすれば、クリッカブルマップは

<a href="/cgi-bin/imagemap/image.map">
<img src="image.gif" ismap></a>

のようなタグを書くことで実現できる。

さらに一歩進めて、先ほどのデータファイルを変換してリンク先のファイル（city1.htmlなど）を自動的に作成するのも、ここまで進んできた読者の方ならさほど苦労なく可能だと思う。お楽しみの宿題ということにしておきたい。

＊　　　　　＊　　　　　＊

マップ設定ファイルへの応用は、今回の記事の主旨からは少しはずれたものだが、データの徹底活用という連載の基本テーマがここでも可能であることを示すために敢えて紹介してみた。

オフィス情報はその表現形態ではなく情報自身が価値を持つ。そのことは常に念頭に置いておく必要がある。しかし一方で使いやすさという面も忘れてはならない。両者のバランスをうまく図りながら、情報の活用に知恵を絞っていこう。

注

リスト

--ボタンのスクリプト
-- ReadFile()はファイルの中身を読み出す関数
 1: on mouseUp
 2:   put short name of me into FileName
 3:   put ReadFile(FileName) into cd fld 1
 4: end mouseUp

--カードスクリプトに置き、カード上の全てのクリックを処理する
 1: on mouseUp
 2:   if the target contains "card button"
 3:   then showInfo (short name of the target)
 4:   else pass mouseUp
 5: end mouseUp
 
 6: on showInfo city
 7:   put ReadFile(<data file>) into theData
 8:   set itemDelimiter to TAB
 9:   put line 1 of theData into dataNames
10:   repeat with i=2 to number of lines of theData
11:     if item 1 of line i of theData is city then
12:       put line i of theData into cityData
13:       exit repeat
14:     end if
15:   end repeat
16:   put "＝＝＝＝＝" & city & "の情報＝＝＝＝＝" & RETURN into output
17:   repeat with i=2 to number of items of dataNames
18:     if item i of cityData is "-" then next repeat
19:     put item i of dataNames & "：" & item i of cityData & RETURN after output
20:   end repeat
21:   put output into cd fld "Info"
22: end showInfo

 1: function makemap
 2:   put short name of this cd into defName
 3:   put "default" && defName & ".html" & RETURN into res
 4:   repeat with i=1 to number of btns
 5:     put "rect" && defName & i & ".html" && the TopLeft of btn i && the BottomRight of btn i & RETURN after res
 6:   end repeat
 7:   return res
 8: end makemap

用語

the target

一番最初にメッセージを受け取ったオブジェクトの名前を返す関数。例えば、カードボタンをクリックすることで送られるmouseUpメッセージは、ボタンに対応するハンドラがなければカードに送られる。このとき、カードのon mouseUpハンドラでthe target関数を使うと、結果は「card button "東京"」のようになり、マウスクリックはカードボタンから送られてきたことが分かる。

short name

先のthe target関数では「card button "東京"」のようなオブジェクトのタイプも含めた長い名前が返されたが、ここで"東京"というボタンの名前そのものが欲しいときはshort name of the targetとする。

（MacUser Japan, April 1996)