182 lines
14 KiB
HTML
182 lines
14 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
|
|
<!-- generated by to_html.pl from ClickableMap.xml -->
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>クリッカブルマップを使おう</title>
|
|
<meta name="author" content="W.Dee" />
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
|
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
|
<link href="browser.css" type="text/css" rel="stylesheet" title="吉里吉里関連リファレンス用標準スタイル" />
|
|
<link href="mailto:[email protected]" rev="Made" />
|
|
<link href="index.html" target="_top" rel="Start" title="トップページ" />
|
|
</head>
|
|
<body>
|
|
<h1><a id="id7" name="id7">クリッカブルマップとは</a>
|
|
</h1><div class="para"><div>
|
|
クリッカブルマップは、直訳すれば「クリック」できる「地図」で、一つの画像の中にいくつかの「領域」を定義して、それらをマウスなどでクリックして選択できるようにする物です。<br />
|
|
<br />
|
|
吉里吉里/KAGでは、本体の画像の他に「<a id="id8" name="id8" class="targanchor"><dfn>領域画像</dfn></a>」と「<a id="id9" name="id9" class="targanchor"><dfn>領域アクション定義ファイル</dfn></a>」という２つのファイルを使ってこれを実現します。<br />
|
|
</div></div>
|
|
<h1><a id="id10" name="id10">領域画像とは</a>
|
|
</h1><div class="para"><div>
|
|
領域画像は、本体の画像と同じサイズの 256 色の画像です。フルカラーの画像ではいけません。JPEG はこのような用途には向かないので、 PNG か BMP などの、256 色を使用できる画像形式を使います。<br />
|
|
<br />
|
|
領域画像とは、本体の画像の各領域に対応して、各領域を任意の<a id="id11" name="id11" class="targanchor"><dfn>パレットインデックス</dfn></a>で塗りつぶした物です。たとえば、<br />
|
|
<br /><div class="descimg"><img width="365" height="379" alt="map1.png" src="map1.png" /><img width="365" height="379" alt="map1_p.png" src="map1_p.png" /><br />本体の画像(左)と領域画像(右)</div><br /> のようなものです。左が本体の画像で、この例では関東地方の地図です。右が、各都県に対応して各領域を塗りつぶした「領域画像」です。<br />
|
|
領域画像は、各領域を任意の ( それぞれ異なる ) パレットインデックスで塗りつぶした物です。上の例で各領域に書いてある数字はそのパレットインデックスです ( 説明のために入れてあるので本来は必要ありません )。パレットインデックス 0 ( 図では海 ) で塗りつぶされた領域は領域としては使われない部分です。<br />
|
|
<br />
|
|
グラフィック編集ソフトなどには 256 色の画像で「パレットインデックス」を扱える物がありますが、そのようなソフトを用いて編集する必要があります ( パレット番号とか、カラーインデックス、インデックスカラー、色番号など名称は異なる場合があります )。このとき、重要なのはパレットインデックス ( 色番号 ) であって、色ではありません。吉里吉里は領域画像を見るとき、色ではなくてそのパレットインデックスのみを見ます。色は、編集時に他の領域と見分けが付きやすいように、適当にばらけた色をつけておいてかまいません。<br />
|
|
<br />
|
|
領域画像のファイル名は、通常、本体の画像のファイル名 ( 拡張子を除く ) に _p をつけたファイル名です。たとえば、本体の画像の名前が map.png であれば、領域画像のファイル名は ( PNGで保存する場合 ) map_p.png にします。<br />
|
|
</div></div>
|
|
<h1><a id="id12" name="id12">領域アクション定義ファイルとは</a>
|
|
</h1><div class="para"><div>
|
|
領域アクション定義ファイルとは、クリッカブルマップの各領域の振る舞いを定義したファイルです。<br />
|
|
拡張子は .ma で、通常は本体の画像ファイルと同じファイル名にします。たとえば、本体の画像の名前が map.png であれば、領域アクション定義ファイルのファイル名は map.ma にします。<br />
|
|
<br />
|
|
領域アクション定義ファイルはテキストファイルですのでテキストエディタで編集します。<br />
|
|
<br />
|
|
領域アクション定義ファイルは、一行ごとに、「領域番号 ： アクション」を領域の数だけ書いた物です ( コロンは半角 )。<br />
|
|
たとえば、上記の地図の例だと、<br />
|
|
|
|
<br />
|
|
<code class="bq">11: hint="埼玉"; storage="maptest2.ks"; target="*m11";<br />
|
|
8: hint="群馬"; storage="maptest2.ks"; target="*m8";<br />
|
|
7: hint="栃木"; storage="maptest2.ks"; target="*m7";<br />
|
|
9: hint="茨城"; storage="maptest2.ks"; target="*m9";<br />
|
|
10: hint="千葉"; storage="maptest2.ks"; target="*m10";<br />
|
|
12: hint="東京"; storage="maptest2.ks"; target="*m12";<br />
|
|
2: hint="神奈川"; storage="maptest2.ks"; target="*m2";<br />
|
|
3: hint="山梨"; storage="maptest2.ks"; target="*m3";<br />
|
|
1: hint="静岡"; storage="maptest2.ks"; target="*m1";<br />
|
|
4: hint="長野"; storage="maptest2.ks"; target="*m4";<br />
|
|
5: hint="新潟"; storage="maptest2.ks"; target="*m5";<br />
|
|
6: hint="福島"; storage="maptest2.ks"; target="*m6";<br />
|
|
</code>
|
|
<br />
|
|
|
|
のような記述になります。領域番号と、上の例の領域画像のパレットインデックスは一致しています。<br />
|
|
「<a id="id13" name="id13" class="targanchor"><dfn>アクション</dfn></a>」 ( コロンより後の部分 ) は KAG の文法からは離れ、TJS の文法で書きますが、難しい物ではありません。<br />
|
|
「名前=値;」の形式で必要なだけ書くというものです。セミコロンを忘れないようにしてください。<br />
|
|
<br />
|
|
使用できる名前には以下の物があります。<br />
|
|
<dl>
|
|
<dt>storage, target, onenter, onleave, hint, exp, countpage </dt>
|
|
<dd> これらはすべて link タグと同様の機能を持っていますが、すべて、属性の値を " " ( ダブルクオーテーション ) で囲んで指定してください ( 上記の例のように )。" " で囲まないとエラーになったり、正常に動作しなかったりします。</dd>
|
|
<dt>cursor</dt>
|
|
<dd> 領域の上にマウスカーソルがある場合のマウスカーソル形状を指定します。cursor タグでの指定に似ていますが、 cr で始まるマウスカーソル定数を用いる場合は、& をつけずにそのまま書きます ( たとえば cursor = crSizeAll; )。マウスカーソルのファイルを指定する場合は " " ( ダブルクオーテーション ) で囲んで書きます ( たとえば cursor = "wagtail.ani"; )。</dd></dl><br />
|
|
領域アクション定義ファイルでは、領域番号 0 は特別な指定をするために使用されます。現バージョンでは autodisable が使用可能です。たとえば、
|
|
<br />
|
|
<code class="bq">0 : autodisable=false;</code>
|
|
<br />
|
|
|
|
とすると、クリッカブルマップをクリックしても、クリッカブルマップが無効な ( クリッカブルマップとして操作できない ) 状態になりません。通常はこの指定を行わなくて OK です。<br />
|
|
この指定を行わなかったり、領域アクション定義ファイルに領域番号 0 の指定がなかったりすると、クリッカブルマップをクリックしたとき、再び <a id="id14" name="id14" class="targanchor"><dfn>image</dfn></a> タグか <a id="id15" name="id15" class="targanchor"><dfn>mapaction</dfn></a> タグで領域アクション定義ファイルが読み込まれるまで、クリッカブルマップは無効な ( クリッカブルマップとして操作できない ) 状態になります。<br />
|
|
<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
アクションが何も定義されなければ、その領域は無視されます。たとえば、条件によって領域を使用可能にしたり不可能にしたりしたい場合は、TJS の if 文を使って、<br />
|
|
11: if(f.flag == 1) { hint="埼玉"; storage="maptest2.ks"; target="*m11"; }<br />
|
|
のように記述することができます。この場合は、f.flag が 1 の場合のみに、「hint="埼玉"; storage="maptest2.ks"; target="*m11";」というアクションを定義する、という意味になります。</div><br />
|
|
</div></div>
|
|
|
|
<h1><a id="id16" name="id16">クリッカブルマップを使ってみる</a>
|
|
</h1><div class="para"><div>
|
|
クリッカブルマップを使ってみます。<br />
|
|
上記の例を、本体の画像を map1.png、領域画像を map1_p.png、領域アクション定義ファイルを map1.ma とします。<br />
|
|
image タグは、読み込もうとした本体ファイル名をもとにして、ファイル名に _p がついたファイルと、拡張子が ma のファイルを探して、それぞれ領域画像と領域アクション定義ファイルとして読み込みます。<br />
|
|
ですので、通常は、クリッカブルマップを使用可能にするためには image タグのみを使います。<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
個別に領域画像や領域アクション定義ファイルを読み込みたい場合のために、それぞれ <a id="id17" name="id17" class="targanchor"><dfn>mapimage</dfn></a> タグと mapaction タグがあります。</div><br />
|
|
たとえば、maptest.ks に以下の内容を書いたとします。<br />
|
|
|
|
<br />
|
|
<code class="bq">*start<br />
|
|
@image layer=0 page=fore visible=true storage=map1<br />
|
|
@position left=400 width=220<br />
|
|
@wt<br />
|
|
クリッカブルマップのテスト。<br />
|
|
@s<br />
|
|
</code>
|
|
<br />
|
|
|
|
これだけで、クリッカブルマップが使用可能な状態で s タグで停止します。<br />
|
|
<br />
|
|
<br /><div class="descimg"><img width="650" height="528" alt="clickable.png" src="clickable.png" /><br />実行してみた画面</div><br /><br />
|
|
クリッカブルマップがクリックされたときにジャンプするシナリオも記述しなければなりません。たとえば、maptest2.ks に以下のような内容を書きます。<br />
|
|
|
|
<br />
|
|
<code class="bq">*m11<br />
|
|
@cm<br />
|
|
そこは埼玉です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m8<br />
|
|
@cm<br />
|
|
そこは群馬です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m7<br />
|
|
@cm<br />
|
|
そこは栃木です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m9<br />
|
|
@cm<br />
|
|
そこは茨城です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m10<br />
|
|
@cm<br />
|
|
そこは千葉です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m12<br />
|
|
@cm<br />
|
|
そこは東京です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m2<br />
|
|
@cm<br />
|
|
そこは神奈川です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m3<br />
|
|
@cm<br />
|
|
そこは山梨です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m1<br />
|
|
@cm<br />
|
|
そこは静岡です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m4<br />
|
|
@cm<br />
|
|
そこは長野です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m5<br />
|
|
@cm<br />
|
|
そこは新潟です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
<br />
|
|
*m6<br />
|
|
@cm<br />
|
|
そこは福島です。[l]<br />
|
|
@jump storage="maptest.ks" target="*start"<br />
|
|
</code>
|
|
<br />
|
|
|
|
<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
(非表示、表裏に限らず) KAG 内にクリッカブルマップを使用した画像があると、キーボードのカーソルキーでマウスの移動をエミュレーションするモードに切り替わります。そのため edit タグのようなキーボードを用いるほかの機能が正常に使用できなくなります。<br />
|
|
使い終わったら mapdisable タグで無効化するか、あるいはそのレイヤに別の画像を読み込んだり freeimage タグを使用したりしてクリッカブルマップを破棄すれば、通常のキーボードの操作モードに戻ります。</div><br />
|
|
</div></div>
|
|
<script type="text/javascript" charset="UTF-8" src="documentid.js" ></script>
|
|
<script type="text/javascript" charset="UTF-8" src="postcontent.js" ></script>
|
|
</body>
|
|
</html>
|