MITSUBISHI
三菱Web地理情報システム構築パッケージ
目次
1 概要 ... 3 1.1 G-XML オプション用シンボル生成ツールについて... 3 1.2 前提知識 ... 3 1.3 動作環境 ... 4 1.4 本ドキュメントの構成... 5 2 G-XML オプション用シンボルの作成手順 ... 6 2.1 起動方法 ... 6 2.2 シンボルファイルの作成‐基本... 8 2.2.1 シンボルの作成 ... 9 2.2.2 シンボルの保存 ...13 2.2.3 シンボルの再編集...14 2.2.4 本体用シンボルファイルからの変換 ...16 2.2.5 ツールの終了 ...16 2.3 シンボルファイルの作成‐応用...17 2.3.2 線種の指定 ...17 2.3.3 線色と塗りつぶし色の塗りわけ...17 2.3.4 角丸四角形の指定...17 2.3.5 シンボルバイナリファイルの合成 ...18 3 G-XML オプション用シンボル生成ツールの入出力ファイル...19 3.1 シンボル SVG ファイル...193.1.1 SVG(Scalable Vector Graphics)について ...20
3.1.2 シンボル SVG ファイルで使用する SVG 定義について ...21
3.2 シンボルバイナリファイル...25
3.3 シンボル SVG ファイル参照用ファイル...27
1 概要
1.1 G-XML オプション用シンボル生成ツールについて
G-XML オプションでは、G-XML の<SymbolName>要素で定義する「シンボル名」 と、対応する「図形」を定義したファイルを起動時に読み込みます。 この定義ファイルは、SVG Tiny（3.1.1 節参照）で、図形を定義するために使用され る基本的な要素で構成されます。 G-XML オプション用シンボル生成ツールは、G-XML オプションで使用するシンボル 定義ファイルの作成を行います。シンボル生成ツールと生成するファイル、G-XML オ プションの関係を図 1-1 に示します。 読込み G-XML オプションPreSerV for Web MapViewer シンボル SVG ファイル(*1) シンボルバイナリ ファイル(*2) シンボル定義ファイル どちらかを指定して起動時に読込む(*1) ② ファイル出力 ① 作図 シンボル生成 ツール G-XML2.0 *1:節参照、 *2:節参照 ①,② 事前作業 ③∼⑤ G-XML オプション 使用時の流れ ③ 表示 ⑤ ④ *1: psvGXMLSymbol#setSymbolSource(シンボルバイナリファイル名)メソッド または、psvGXMLSymbol#setSymbolSourceSVG(シンボル SVG ファイル名)メソッドを使用する。 図 1-1 シンボル生成ツールと G-XML オプション
1.2 前提知識
(1) 作成したファイルは G-XML オプションで使用します。G-XML オプションの知識 が必要です。（作図・ファイル作成には特に必要ありません） (2) SVG 形式のファイルを作成するため、XML と SVG の基本知識があれば、出力フ ァイルをテキストエディタ等で参照することが出来ます。（ツールで編集する場 合は、特に必要ありません）1.3 動作環境
G-XML オプション用シンボル生成ツールは、表 1-1 の JAR ファイルで構成される Java アプリケーションです。これらを、任意のディレクトリに配置してください。 表 1-1 G-XML オプション用シンボル生成ツール jar ファイル No 内容 説明 1 G-XML オプション用シンボル生成ツ ール JAR ファイル psvsvgsymboltool50.jar シンボル生成ツールの本体。 2 PreSerV の本体 JAR ファイル preserv50.jarシンボルの作図に、PreSerV for Web MapViewer の 図形を使用する。 3 G-XML オプションの JAR ファイル psvgxml50.jar シンボルの図形管理、シンボル定義ファイルの入出 力に使用する。 上記 JAR ファイルを使用するためには、表 1-2 に示す Java 2 の環境が必要です。 表 1-2 G-XML オプション用シンボル生成ツール動作環境 No 内容 説明
1 Java バージョン 実行には Java 2 Runtime Environment, Standard Edition バージョン 1.3 以上が必要。
2 JAXP（Java API for XML Processing） パッケージ
XML 文 書 の 解 析 に 、 JAXP （ Java API for XML Processing）Specification 1.1 以上を使用する。ただ し，Java バージョンが 1.4 以上の場合，JAXP パッ ケージは Java 実行環境に含まれるのでインストー ルは不要。 http://java.sun.com/xml/jaxp/index.html からダウンロードし、 Javaインストールディレクトリ¥jre¥lib¥ext¥ に配置する。 3 Regexp パッケージ XML 文書の解析に正規表現パッケージ REGEX パッ ケージを使用する。 http://jakarta.apache.org/regexp/index.html から、jakarta-regexp-??.jar(??はバージョン番号)) をダウンロードし、 Javaインストールディレクトリ¥jre¥lib¥ext¥
に配置する。 4 SVG ビューワ SVG ファイルを作成し、Web ブラウザで参照する 場合に、Adobe などが配布している SVG ビューワ のインストールが必要。 http://www.adobe.com/svg/viewer/install/main.html 5 Web ブラウザ SVG ファイルを作成し、Web ブラウザで参照する 場合に必要。（シンボルの作図・ファイル作成では Web ブラウザを使用しない）
1.4 本ドキュメントの構成
本ドキュメントは、以下の構成です。 2 章：本ツールを使用して、シンボルを作図し、シンボル定義ファイルを作成 する手順を説明します。 3 章：本ツールで作成する 3 種類のファイルについて説明します。2 G-XML オプション用シンボルの作成手順
本章では、G-XML オプション用シンボル生成ツールの、起動方法、作図方法を説明し ます。2.1 起動方法
本ツールは、コマンドラインから、以下のコマンドで起動します。 SVG ファイルでは、<!DOCUTYPE>の中で、 http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtdの DTD を指定するため、ツー ルで SVG ファイルを読み込む際(作成した SVG ファイルの再編集時、シンボルバイナリ ファイル作成時)に、ネットワーク上の DTD を参照します。よって、ネットワークの環境 の有無によって、起動方法が異なります。 以降、表 1-1 の 1(psvgxmlsymboltool50.jar)が存在するディレクトリで起動することを 前提にしています。 (1) ネットワーク環境がある場合JDKPath*1/bin/java -classpath JarPath*2/preserv50.jar;JarPath*2/psvgxml50.jar;
JarPath*2/psvsvgsymboltool50.jar jp.co.melco.preserv.tool.svgsymbol.SymbolMain ※太字は固定部分、斜字はユーザによって異なる部分 *1 JDK もしくは JRE をインストールしたディレクトリ *2 それぞれの JAＲファイルが存在するディレクトリ(それぞれ任意) (2) ネットワーク環境がある場合―プロキシを使用している場合― プロキシを使う為の設定を追加します。
JDKPath*1/bin/java -classpath JarPath*2/preserv50.jar; JarPath*2/psvgxml50.jar;
JarPath*2/psvsvgsymboltool50.jar
-DproxySet=true –DproxyHost=<proxyHost>*3 -DproxyPort=<proxyPort>*4 jp.co.melco.preserv.tool.svgsymbol.SymbolMain ※太字は固定部分、斜字はユーザによって異なる部分 *1 JDK もしくは JRE をインストールしたディレクトリ *2 それぞれの JAＲファイルが存在するディレクトリ(それぞれ任意) *3 プロキシホスト名 *4 ポート番号
(3) ネットワーク環境がない場合 ツールで、DTD のチェックを行わないよう-offline オプションを追加します。 また、ネットワークがある環境で作成したシンボル SVG ファイルや、ツール以外で作 成した、 SVG ファイルが作業ディレクトリ上にある場合は、テキストエディタなどで <!DOCTYPE>の記述を削除してください。 -offline オプションを指定して作成したシンボル SVG ファイルは、<!DOCUTYPE>を追 加しません。妥当性をチェックする、別アプリケーションでは、エラーが起きることがあ ります。(表 1-2 で提示した Adobe の SVG Viewer では、表示できます)
JDKPath*1/bin/java -classpath JarPath*2/preserv50.jar; JarPath*2/psvgxml50.jar;
JarPath*2/psvsvgsymboltool50.jar jp.co.melco.preserv.tool.svgsymbol.SymbolMain -offline ※太字は固定部分、斜字はユーザによって異なる部分 *1 JDK もしくは JRE をインストールしたディレクトリ *2 それぞれの JAＲファイルが存在するディレクトリ(それぞれ任意) (1)∼(3)は、-jar オプションを指定して、psvgxmlsymboltool50.jar から起動することも 出来ます。その際は、psvsvgsymboltool50.jar、preserv50.jar、psvgxml50.jar を同一ディ レクトリに配置して実行してください。（環境によって、適宜(1)∼(3)のオプション追加）
JDKPath*1/bin/java (-DproxySet=true –DproxyHost=<proxyHost> -DproxyPort=<proxyPort>) –jar psvsvgsymboltool50.jar (-offline)
上記、(1),(2)の方法で起動すると、作成するシンボル SVG ファイルには、<!DOCTYPE> が追加され、SVG Tiny の DTD が指定されます。また、SVG ファイルを読み込む場合は、 妥当性をチェックします。 (3)の方法で起動した場合、<!DOCTYPE>を省略したシンボル SVG ファイルが作成さ れます。また、読み込み時には妥当性をチェックしません。 よって、必ずどちらかの方法に統一してツールを使用してください。(1)(2)で作成した ファイルは、(3)で起動したツールからは使用できません。同様に、(3)で作成したファイ ルは(1)(2)で使用できません。
外部 DTD を参照する場合と参照しない場合の注意点を表 2-1 に記述します。 表 2-1 外部 DTD 参照の有無による注意点 DTD 参照あり（ネットワーク環境あり） DTD 参照なし（ネットワーク環境なし） シンボル SVG ファイルを再編集する場 合、シンボルバイナリファイルを作成す る場合に、作業ディレクトリ上の SVG フ ァイルを読込みます。このとき、ネット ワークを介して DTD を読み込み構文チェ ックを行うため、通信時間がかかります。 左記の場合に、DTD を参照しないため、構文 チェックが行われません。起動時に offline を 指定している場合に、<!DOCTYPE>タグを含 む SVG ファイルが読込まれた場合は、 java.net.UnknownHostException:www.w3.org のエラーが出ます。
2.2 シンボルファイルの作成‐基本
G-XML オプション用シンボル生成ツールを使用して、シンボルファイルを作成する手 順と、ツールの機能について説明します。画面イメージと説明中で使用する用語を 図 2-1 に示します。 メニューバー 実際の 50×50 サイズのイメージ シンボル作成エリア 左上(0,0) 右下(50,50) マウス座標位置 作図ボタン ポリラインボタン 選択ボタン ポリゴンボタン 円ボタン 円弧ボタン 扇形ボタン 楕円ボタン 文字ボタン 矩形ボタン 線ボタン シンボル名 (新規は---) ステータスバー(編集状況) 図 2-1 画面イメージ2.2.1 シンボルの作成 2.1 節の方法でツールを起動したあと、①∼⑤の順でシンボルを作成します。 ① 新規ファイルを開く ツール起動時は、新規ファイルを開いた状態のため、この作業は省略します。2 つめ 以降のシンボルを作成するときは、「ファイル」−「新規作成」を指定します。作成後 は、「ファイル」−「保存」−「名前を付けて保存」を指定します。「上書き保存」は 指定できません。 ② 図形作成 「作図ボタン」の中から、描画したい図形のボタンをクリックし、作図エリアで描 画を開始します。各ボタンの作図方法を表 2-2 に示します。「選択ボタン」は描画 を行いません。図形の移動・削除・編集時に使用します。 表 2-2 作図方法 No ボタン名 作図方法 1 ポリライン マウスをクリックして、ポリラインの頂点を作成します。ダブルクリックで終了します。 2 ポリゴン マウスをクリックして、ポリゴンの頂点をを作成します。ダブルクリックで自動的に開始 点と終了点を結び、終了します。 3 円 マウスをクリックして、円の中心点を指定した後、マウスを動かして適当なサイズで、マ ウスをクリックして円を作成します。 4 円弧 マウスをクリックして、円弧の中心点を指定した後、マウスをクリックして開始点を決め ます。反時計周りにマウスを動かして適当なサイズで、マウスをクリックして終了点を決 め、円弧を作成します。半径は始点と中心点の距離、終点と中心点の距離の大きいほうを 採用します。 5 扇形 マウスをクリックして、扇形の中心点を指定した後、マウスをクリックして開始点を決め ます。反時計周りにマウスを動かして適当なサイズで、マウスをクリックして終了点を決 め、扇形を作成します。半径は始点と中心点の距離、終点と中心点の距離の大きいほうを 採用します。 6 楕円 マウスをクリックして、楕円の中心点を指定した後、マウスを動かして適当なサイズで、 マウスをクリックして、楕円を作成します。 7 文字 マウスをクリックして、文字の「左下座標」を指定すると、ウィンドウが開きます。文字 列、フォント選択（ゴシックまたは明朝（初期値：ゴシック））を選択し、フォントサイ
ズ（初期値 12）を入力します。（フォントサイズは半角で入力してください）(図 2-2) 8 矩形 マウスをクリックして、矩形の 1 点を指定した後、マウスを動かして適当なサイズで、マ ウスをクリックして、矩形を作成します。 9 線 マウスをクリックして線の始点と終点を決め、線を作成します。 図 2-2 文字描画のウィンドウ ③ 図形移動 「選択ボタン」をクリックして、移動する図形をクリックします。選択された図形 は赤で表示されます。マウスドラッグで図形を移動します。 ④ 図形操作 メニューバー「編集」の各使用方法を (a)∼(d)に示します。(a)(b)の「編集」の各 操作を行うには、編集する図形を選択状態にします。選択ボタンをクリックして、変 更する図形をクリックします。選択状態になると図形は赤で表示されます。 (a) 「図形編集」−「図形変更」「スケール変更」「1 点追加」「1 点削除」 図形を選択状態にして、メニューバーの「編集」から、「図形変更」「スケール 変更」「1 点追加」「1 点削除」のいずれかを選択します。操作方法を表 2-3 に示 します。 表 2-3 図形の変更 No メニュー 使用できる図形 編集方法 ポリライン ポリゴン 頂点位置の変更です。マウスをクリックした点に、最も近い頂点が、 ドラッグにより移動します。 円 使用できません。 1 図形変更 円弧 中心角の変更です。マウスをクリックした点に、最も近い頂点が、
扇形 ドラッグにより移動します。 楕円 x,y 方向半径の変更です。マウスをクリックした位置で、ドラッグす ることにより縦横比率が変わります。 文字 図形変更メニューを選択すると、表 2-2 と同様にウィンドウが開 きます。現在表示されている文字の情報が表示されています。変更 する内容を入力します。(図 2-2) 矩形 幅と高さの変更です。マウスをクリックした位置で、ドラッグする ことにより縦横比率が変わります。 線 始点終点の変更です。マウスをクリックした点に、近い方の点が、 ドラッグにより移動します。 2 スケール変更 文字以外の図形 マウスをクリックし、ドラッグすると、連動して、図形を拡大／縮 小します。 ポリライン 3 1 点追加 ポリゴン マウスをクリックした点に、最も近い頂点を追加します。 ポリライン 3 1 点削除 ポリゴン マウスをクリックした点に、最も近い頂点を削除します。 (b) 「図形削除」 図形を選択状態にした後、メニューバーの「編集」から「図形削除」を選ぶと、 その図形を削除します。選択状態にした後、delete キーを押すことで同様に図形を 削除します。 (c) 「全件削除」 作図エリア内のすべての図形を削除します。図形数 0 のシンボルは生成しない ため、全件削除直後にファイルを保存した場合、変更は反映されません。 (d) 「元に戻す」 (b)で削除した図形を元に戻します。記憶している図形が 1 つのため、直前に削 除した 1 つの図形のみ復元できます。(c)で全件削除した場合は、このメニューを 選択することが出来ず、元に戻りません。編集を直前の状態に戻すことはできませ ん。 ⑤ 図形属性変更 ③の手順で図形属性を選択状態にした後、右クリックで、図形属性変更メニューを 表示します(図 2-3)。表 2-4 に各メニューで変更する属性を説明します。
図 2-3 図形属性変更メニュー(右クリック) 表 2-4 図形属性変更の仕様 No メニュー名 変更仕様 1 表示色の設定 カラーパレットのウィンドウが表示されます。選択した色で、図形を描 画します。塗りつぶし(3)の塗りつぶしが設定されている場合は、塗りつ ぶし色を、解除されている場合は、線の色を変更します。 2 表示色の解除 表示色を黒にします。 3 塗りつぶし設定／解除 塗りつぶしが設定されている場合は、解除し、設定されていない場合は、 塗りつぶします。色は、「表示色の設定」で指定した色を使用します。 4 描画優先度を高くする 重なり合った図形を作成した場合、後から作成した図形が前面に表示さ れます。先に作成した図形を指定すると、図形作成順に順位を上げてい きます。 例）①-②-③の順で作図、①を選択して優先度を高くする 5 描画優先度を低くする 4 と反対の動作をします。 ① ③ 1 回目実行 ① ③ ② ③ ① 2 回目実行 ② ②
2.2.2 シンボルの保存 2.2.1 節で作成したシンボルを、ファイルに保存する方法を説明します。 ① シンボル SVG ファイルの保存 メニューバー「ファイル」−「保存」から「上書き保存」「名前を付けて保存」を 選択します。 新規作成の場合(起動時、または、「ファイル」−「新規ファイルを開く」)は、ツ ールのシンボル名の欄に”Name:---”と表示され、上書き保存が出来ません。 指定したディレクトリにシンボル SVG ファイルを保存します。拡張子は”.svg”を 指定してください。ディレクトリは、シンボル SVG ファイル専用に作成し、全ての シンボルを同一ディレクトリに保存してください。続けて次のシンボルを作成する場 合は、「ファイル」−「開く」−「新規ファイルを開く」を選択してください。 ② シンボルバイナリファイルの作成 G-XML オプションで使用するすべてのシンボル SVG ファイルを作成後、シンボ ルバイナリファイルの作成を行います。「ファイル」−「シンボルバイナリファイル の作成」を選択し、保存するファイル名を指定します。保存先のディレクトリは、① のシンボル SVG ファイルのディレクトリを指定します。拡張子は”.bin”を指定してく ださい。 このメニューを実行した時点での、ディレクトリ内のすべての SVG ファイルを読 み込み、バイナリファイルに登録します(図 2-4)。 シンボル生成ツール 「シンボルバイナリファイル作成」後 に作成したシンボル SVG ファイル ⇒登録されません シンボルバイナリファイル *.svg ファイル以外 *.svg のファイルすべて 作業ディレクトリ 図 2-4 シンボルバイナリファイルの作成 2.1 節で説明したように、ネットワーク環境下では、SVG ファイルの読み込みに DTD のチェックを行いますので、ご使用になる環境によっては、通信時間のため、 作成処理時間がかかる場合があります。
シンボルバイナリファイル作成時に、下記のファイルを作成します。 ・ バックアップファイル（上書きした場合） (上書きするファイル名.bak) ・ シンボル SVG ファイル参照用ファイル（3.3 節参照） (指定したファイル名_ref.html) 2.2.3 シンボルの再編集 2.2.2 節で保存したファイルを開き、再編集するために、ツールにシンボルを読み込 む方法を説明します。 ① 既存シンボル SVG ファイルの入力 既存のシンボル SVG ファイルをツールで開き、再編集する場合は、メニューバー 「ファイル」−「開く」−「シンボル SVG ファイルを開く」を選択してください。 2.2.1 節の①∼⑤で編集します。「ファイル」−「保存」−「上書き保存」で上書 き、「名前を付けて保存」で別名に保存します。 既存ファイルを編集した場合で、そのファイルがシンボルバイナリファイルに登録 されている場合、シンボルバイナリファイルを再作成することを推奨します。（再作 成しない場合、編集前のシンボルがシンボルバイナリファイルに登録されたままにな り、シンボル SVG ファイルの形状と異なります） ② シンボルバイナリファイルの入力 シンボルバイナリファイルに登録されたシンボルをツールに取り込みます。 「ファイル」−「開く」−「シンボルバイナリファイルを開く」を選択してくださ い。この処理を行った後は、「ファイル」−「シンボルバイナリファイル登録一覧」 が有効になり、登録一覧が表示されます(図 2-5)。 図 2-5 からファイルを開くと、シンボルバイナリファイルに登録されている情報 で表示します。（「ファイル」−「開く」−「シンボル SVG ファイルを開く」で開 くと、SVG ファイルの情報で表示します。） この操作によって、最新の情報が登録されているかを確認できます。（最新のシン ボルバイナリファイルが開かれていることが前提です）
2.2.4 本体用シンボルファイルからの変換
PreSerV for Web ver 5 で使用するシンボルファイルを読み込み、シンボル SVG フ ァイルと、シンボルバイナリファイルを作成します。これにより、本体で使用してい るシンボルを G-XML オプションで使用できます。 メニューバーの「本体→G-XML オプション」を選択してください。 本体用シンボルファイルを指定すると、登録されているシンボル数分の、シンボル SVG ファイル（シンボル番号.svg）と、1 つのシンボルバイナリファイル（読み込 んだ本体用シンボルファイル名_gxml.bin）、シンボル SVG ファイル参照用ファイル （読み込んだ本体用シンボルファイル名_gxml_ref.html）を作成します(図 2-6)。 作成したファイルは、「読み込んだ本体用シンボルファイル名_gxml」という名前 のディレクトリを作成し、保存します。ディレクトリの場所は、本体用シンボルファ イルと同じディレクトリです。 本体シンボルでは、文字のフォントファミリーはベクトル文字です。変換後はすべ て Gothic になります。ベクトル文字は、幅と高さを指定できますが、Gothic では幅 と高さが固定のため、文字列がずれて変換されることに注意してください。変換後に ツールで調整が必要です。 G-XML オプション用 シンボル生成ツール AAA_gxml_ref.html [0.svg,1.svg…] 作成 本体シンボルファイル AAA 作成 AAA_gxml(フォルダ名) 保存 作成 シンボル SVG ファイル 参照用ファイル シンボ AAA_gxml.bin ル バイナリファイル シンボル SVG フ SV シンボル SVG ファイル ァイル シンボル ファイル SVG シンボル G ファイル 図 2-6 本体用シンボルファイルと G-XML オプション用シンボルファイルの変換 2.2.5 ツールの終了 「メニュー」−「終了」でツールを終了します。 ツール終了時に、「シンボルバイナリファイルを作成しますか？」というダイアロ グを出します。シンボル SVG ファイルの作成／編集を行った後に、シンボルバイナ リファイルの作成を行わない場合、同一シンボル名で、異なるシンボルを持つことに なります。これを避けるため、ユーザに作成を促します。整合性がとれるよう、作成 途中にも、バイナリファイル化することを推奨します。
2.3 シンボルファイルの作成‐応用
2.2 節で説明した手順でシンボルを作成した後、以下に説明する方法でシンボル定義フ ァイルを編集することができます。 2.3.1∼2.3.3 の編集のように、テキストエディタで直接編集する場合は、文字コード 「UTF-8」に対応している必要があります。保存する際には、文字コードに「UTF-8」を 指定してください。（ファイルについては、3.1.2(2)参照） 以下は、テキストエディタで編集できることを前提に説明します。 テキストエディタで編集したファイルをツールで再読み込みした場合、以下の現象が生 じます。 ① 変更はツールの表示に反映されません。 ② 再読み込み後ツールから保存すると、テキストエディタで編集した内容は失われ ます。 指定する値の制限については付録 A.G-XML オプション、または、SVG の仕様書を参照 してください。 2.3.2 線種の指定 作成したシンボル SVG ファイルの図形要素に、stroke-width 属性を追加します。 例）線幅 3 で表示<circle cx=”20” cy=”20” r=”10” stroke=”rgb(0,0,0)” stroke-width=”3”>
2.3.3 線色と塗りつぶし色の塗りわけ
作成したシンボル SVG ファイルの図形要素の、fill 属性と stroke 属性に異なる色を 指定します。
例）塗りつぶし色＝赤、線色＝緑で表示
<circle cx=”20” cy=”20” r=”10” stroke=”rgb(0,255,0)” fill=”rgb(255,0,0)” >
2.3.4 角丸四角形の指定
作成したシンボル SVG ファイルの rect 図形要素の、rx 属性(矩形の角を丸める x 軸 方向の半径)と ry 属性(矩形の角を丸める y 軸方向の半径)を追加します。
例）x 軸方向＝5、y 軸方向＝3 で角を丸めて表示
2.3.5 シンボルバイナリファイルの合成 複数のディレクトリで作成したシンボルを、ひとつシンボルバイナリファイルにまと めることができます。以下の手順で合成してください。 ① シンボルバイナリファイルにまとめたいシンボル SVG ファイルを、1 つのディレ クトリに保存する。 ② ツールを起動して、「シンボルバイナリファイルの作成」を選択し、①のディレ クトリを指定する。
3 G-XML オプション用シンボル生成ツールの入出力ファイル
G-XML オプション用シンボル生成ツールの出力ファイルは、以下の 3 種類です(表 3-1)。 表 3-1 シンボル生成ツールの出力ファイル No. ファイルの種類 ファイル名・形式 説明 1 シンボル SVG ファイル シンボル名.svg SVG 形式 1 シンボルにつき 1 ファイル。 ファイル名がシンボル名になる。 2 シンボルバイナリファイル ファイル名.bin バイナリ形式 同一ディレクトリ上の No.1 のシ ンボル情報をまとめたファイル。 ファイル名は任意。 3 シンボル SVG ファイル参照用 ファイル ファイル名.html (2 と同じ) HTML 形式 No.2 作成時に作成される。まとめ た No.1 のファイルを HTML でプ レビューするファイル。 3.1 節で、SVG の概要と、シンボル SVG ファイルについて説明し、3.2 節でシンボル SVG ファイルから作成する、シンボルバイナリファイルについて説明します。これらは G-XML オプションで使用するシンボル定義ファイルです。以降、G-XML オプションの入 力ファイルをまとめて、シンボル定義ファイルと呼びます。 シンボルバイナリファイルの内容をプレビューする、シンボル SVG ファイル参照用 HTML ファイルについて、3.3 節で説明します。このファイルは、G-XML オプションの 入力ファイルではありません。3.1 シンボル SVG ファイル
本節では、SVG 形式の「シンボル SVG ファイル」(図 3-1)について、SVG の概要と、 本ツールで使用する SVG の定義を説明します。 SVG は XML 形式のため、シンボルを構成する図形のもつ値をテキストで直接参照する ことができるという利点があります。（<!DOCTYPE>を含む SVG ファイルは、妥当性検 証のために、ネットワークを使用します。ご使用になる環境によっては、通信時間のため ツールや G-XML オプションへの読み込みに時間がかかる場合があります） シンボル ァイル SVG フ SV シンボル SVG ファイル シンボル SVG ファイル シンボル G ファイル G-XML オプション用 シンボル生成ツール 編集 保存 G-XML オプション 入力 図 3-1 シンボル SVG ファイルの位置づけ3.1.1 SVG(Scalable Vector Graphics)について
SVG(Scalable Vector Graphics)は、XML などの標準技術を策定している World Wide Web Consortium（W3C）が勧告している画像フォーマットです。本ツールで使用する 図形属性は、SVG の機能をモジュールに分割し、携帯機器向けに最適化して再統合す る仕様である「Mobile SVG Profiles」の SVG Tiny に準拠しています。(Mobile Profiles: SVG Basic and SVG Tiny)
SVG の表示例と、ソースを図 3-2 に示します。右図のソースをテキストエディタに コピーして、「.svg」で保存すると、左図の画面を表示することが出来ます。 ただし、SVG 形式のファイルを表示するには、Adobe 社など各社から、配布されて いる、専用ビューワのインストールが必要です。 駐車場.svg を bitmap 形式で 表示しています。 駐車場.svg のソースコードです。 <?xml version="1.0" encoding="utf-8?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <svg width="200" height="200" version="1.1" viewBox="0 0 50 50">
<text x="14.0" y="38.0" font-family="Gothic" font-size="8"> 駐車場
</text>
<circle cx="26.0" cy="17.0" r="11.0"
fill="rgb(255,255,51)" stroke="rgb(255,255,51)"/> <text x="22.0" y="24.0" font-family="Mincho" font-size="20">
P </text> </svg> 図 3-2 SVG の表示例とソースコード SVG はアニメーションや外部装置のアクションに対応する動作など、多様な機能を 持ちますが、本ツールでは、シンボルを表現するために必要な、最小限の図形定義のみ を使用しています。次節で使用する定義と制限など詳細を説明します。
3.1.2 シンボル SVG ファイルで使用する SVG 定義について SVG で定義されている画像フォーマットのうち、本ツールで使用する SVG の定義を 説明します。 また、シンボル SVG ファイルの保存方法と注意点について説明します。 (1) 本ツールで使用する図形要素について 本ツールでシンボルの作図に使用する図形要素と、その属性を表 3-2 に示します。 表 3-2 シンボル SVG ファイルで使用する SVG 定義 No 図形種別 SVG 要素 属性名 説明 制限事項 x,y 左上 x,y 座標 − width/height 幅／高さ − 1 矩形 rect rx,ry 矩形の角を丸め る x,y 方向半径 ツールでは指定不可。 テキストエディタから追加可能。 （制限など付録 A 参照） 2 円 circle cx,cy r 中心点座標 半径 − 3 楕円 ellipse cx,cy rx,ry 中心点座標 x 軸 y 軸半径 − 4 線 line x1,y1 x2,y3 始点 終点 − points 点配列 − 5 ポリライン polyline (fill-rule) 塗りつぶし規則 Java のポリライン塗りつぶし仕様にあわ せるため、塗りつぶしが指定されると、 「fill-rule=”eveodd”」(*1)を指定。10 参照。 points 点配列 − 6 ポリゴン polygon (fill-rule) 塗りつぶし規則 Java のポリライン塗りつぶし仕様にあわ せるため、塗りつぶしが指定されると、 「fill-rule=”eveodd”」(*1)を指定。10 参照。 7 パス(円弧) path d 円弧を表す固定 のパターンのみ d 属性に指定できるコマンドは、(M,A)のみ (*2)。塗りつぶしを指定した場合は扇形に なる。10 参照。 8 パス(扇形) path d 扇形を表す固定 のパターンのみ d 属性に指定できるコマンドは、(M,L,A,Z) のみ。
x,y 左下座標 SVG では(x,y)の組を複数指定して、各文字 ごとに座標を指定することが可能だが、左 下座標の 1 組のみ使用する。 font-size フォントサイズ 1∼120 を指定すること。範囲を超える場合 は 1 または 120 が設定される。数字以外が 指定された場合は、デフォルト値(12)が設 定される。指定した値は、文字の高さにな り、単位は指定できない。 9 文字列 text font-family フォントファミ リ名 Mincho”か”Gothic”を指定する。ツール以外 で作成した font-family は明朝体テーブル (*3)に該当する場合は Mincho を指定し、そ れ以外は、Gothic とする。本体シンボルフ ァ イ ル の フ ォ ン ト ( ベ ク ト ル ) は す べ て Gothic に変更。 ツールでは rgb(r 値,g 値,b 値)を指定。 塗りつぶし色と線色を、別の色で指定する 機能は現在未サポート。塗りつぶしを指定 すると、fill, stroke 共に指定した色の属性を 作成する仕様となっている。 ツ ー ル の デ フ ォ ル ト 値 は 、 fill=”none”, stroke=”rbg(0,0,0)”。 ＜塗りつぶしの特例＞ ・ polyline ： Java の 仕 様 は SVG の evenodd(*1)を指定して描画したイメ ージになる。 ・ path(円弧)：SVG の<path>要素で作成 した円弧の塗りつぶしと、Java の円弧 塗りつぶしの仕様が異なる(*4)ため、 <path>で扇形を作成して、塗りつぶ す。そのため、塗りつぶし円弧は塗り つぶし扇形と同じ属性になる。 10 各図形に共通の要素 fill stroke 塗りつぶし色 線色 ・ 文字列：SVG では文字の枠色(stroke 指定)と内部の色(fill)を塗り分けること が可能だが、対応していない。
*1 fill-rule=”evenodd”： SVG には、内側の領域を定義する規則、nonezero と evenodd があ り、evenodd は、「ある点から任意の方向へ射線をひき、点から見て射線の左から右へ交 差する辺は１、右から左へ交差する辺は−１と数えて、その総和が偶数のとき点はパスの外 側にあるとし、それ以外の場合は内側とする」という定義。詳細は SVG の仕様書を参照。 例）evenodd nonezero *2 <path>要素の d 属性：本ツールでは、d 属性のコマンドのうち、M, L, A, Z を使用する。 詳細とこれ以外のコマンドは SVG の仕様書を参照。(相対位置指定 m, l, a, z は使用しない) ・ M：moveto/現在の点を新しく設定する。値は位置を示す x y:の組 ・ L：lineto/直前の点から直線を描く。値は終点を示す x y:の組 ・ A：ellipse arc/現在の点から点 (x, y) へ楕円形の弧を描く。値は、 ・x 軸 y 軸半径 rx, ry ・回転角度 x-axis-rotation ・弧の中心角を決めるフラグ large-arc-flag （0;鋭角の弧 arc 1;鈍角の弧）、 ・始点終点を結ぶ方向フラグ sweep-flag（0;x 軸正方向 1;x 軸負方向） ・終点座標 x,y ※中心点 (cx, cy) は自動的に計算される ・ Z：closepath/現在の点から現在の部分パスの始点まで直線を描き、部分パスを閉じる。 *3 明 朝 体 テ ー ブ ル ： ["Bitstream Cyberbit", "Bodoni", "Century", "Futo Min A101", Garamond","ITC Stone Serif", "Kyokasho ICA", "Mincho", "Minion Web","Ryumin Light-KL", "Times", "Times New Roman", "リュウミンライト−ＫＬ", "ＭＳ Ｐ明朝"]
ツールに読み込んだ後、保存すると、すべて Mincho か Gothic になる。
*4：円弧の塗りつぶし。SVG 定義では円弧の塗りつぶしを、下記、例）の”Java”のように 描画するため、扇形を作成して描画する。
＜その他の共通制限＞ ・ 座標や長さなどの指定には、単位・”%”をサポートしていません。すべてピクセル単位 とみなします。 ・ ツール以外で作成・編集したファイルに上記表以外の要素が含まれる場合は、無視しま す。グループ化でサイズや色を指定している場合も、考慮しません。 上記以外の要素・属性は、現在未サポートです。ツールで読み込める、SVG ファイ ルは、本ツールで作成したものとします。<svg>タグで指定する表示領域(width/height) と視点(viewBox)が同じ、かつ、上記のサポート範囲内の定義に限り、ツールで再現で きます。 (2) シンボル SVG ファイルの保存方法について 本ツールで出力する SVG ファイルは文字コード「UTF-8」を指定しています。日本 語を使用した SVG ファイルを Adobe の SVG ビューワーで参照するには、UTF を指定 する必要があるためです。 ソースを参照する場合は、UTF に対応したテキストエディタを使用するか、SVG 表 示している Web ブラウザ上で右クリックし、「ソースの表示」を選択してください (Adobe SVG Viewer の場合)。
3.2 シンボルバイナリファイル
本節では、3.1 節で説明した、シンボル SVG ファイルから、シンボル名（＝拡張子を 除くファイル名）と図形の情報をバイナリ化し、複数のシンボルを定義する、「シンボル バイナリファイル」について説明します。
PreSerV for Web Ver.5 本体で使用する、「バイナリファイル」とは別であり、シンボ ル専用のフォーマットです。 バイナリ形式のため、G-XML オプション使用時に、複数の SVG 形式ファイルを使用 するより、軽量に処理を行うことが出来ます。ファイルサイズが小さいだけでなく、DOM を解析する通信時間も必要ありません。（ただし、バイナリ形式は、本ツール独自の拘束 フォーマットであり、SVG に準拠しません。） シンボル ァイル SVG フ SV シンボル SVG ファイル シンボル SVG ファイル シンボル G ファイル 編集 保存 シンボル バイナリファイル 作成 読み込み G-XML オプション用 シンボル生成ツール G-XML オプション 入力 図 3-3 シンボルバイナリファイルの位置づけ G-XML オプション用シンボル生成ツールでは、図 3-3 のように、作成したシンボル SVG ファイルを読み込んでバイナリ化します。バイナリ化の対象は、シンボルバイナ リファイルの保存先に指定したディレクトリ内の、すべての SVG ファイルになります （指定はできません）。 バイナリ化できる SVG ファイルはツールで作成したものを前提としますが、3.1.2 節に示した、範囲内の定義で書かれた SVG ファイルであれば、バイナリ化が可能です。 シンボル SVG ファイルは<svg>要素の width/height 属性と viewBox 属性に制限があ りますが、バイナリ化する場合は、制限しません。ファイルの構成を図 3-4 に示しま す。
シンボル名 byte 数 int byte 配列化したシンボル名の byte 数 シンボル名 byte[] byte byte 配列化したシンボル名
矩形始点 X float シンボルの矩形の左上 x 座標 矩形始点 Y float シンボルの矩形の左上 y 座標 矩形幅 float シンボルの矩形の幅 矩形高さ float シンボルの矩形の高さ １シンボル総バイト数 int 図形１∼n の総バイト数 図形１ circle, rect など、シンボルを構成する各図形の情報 図形２ 〃 ： 〃 図形 n 〃 シンボル名 byte 数 シンボル数分繰り返し シンボル名 byte[] 矩形始点 X 矩形始点 Y 矩形幅 矩形高さ １シンボル総バイト数 図形１ 図形２ ： 図形 n 図 3-4 シンボルバイナリファイルの構成
3.3 シンボル SVG ファイル参照用ファイル
3.1 節のシンボル SVG ファイルは、１シンボルにつき、１ファイルの構成です。シン ボル SVG ファイル参照用ファイルは、3.2 節のシンボルバイナリファイルの作成で読み 込む、複数のシンボルを、1 つの HTML ファイルで参照するものです。このファイルは 参照用であり、ファイルからツールへ、シンボルをインポートすることはできません。 シンボル SVG ファイル参照用ファイルを開く際は、以下のことを前提としています。 ① SVG ビューワがインストールされていること（HTML から SVG ファイルを指定 して表示しています。よって SVG ファイルが参照できる環境が必要です（3.1 節 参照）） ② シンボルバイナリファイルに登録した、シンボル SVG ファイルが同一のディレク トリに保存されていること ③ シンボルバイナリファイルに最新のシンボル SVG ファイルが読み込まれている こと(シンボルバイナリファイル作成後に、シンボル SVG ファイルを再編集した場 合、再編集後のイメージを表示します。シンボルバイナリファイルには編集前の イメージで登録されているため、内容を正しく表示できません。) 」」 G-XML オプション用 シンボル生成ツール シンボル SVG フ SVG シンボル SVG ファイル ァイル シンボル G ファイル SV シンボル ファイル 編集 保存 入力 G-XML オプション 作成 読み込み 作成 シンボル SVG ファイル 参照用ファイル シンボル バイナリファイル 図 3-5 シンボル SVG ファイル参照用ファイルの位置づけ付録 A.G-XML オプションにおけるシンボル表示
G-XML オプションでは、表 3-2 以外に、下記の要素と属性に対応しています。ここで 示す属性以外は無視されます。 シンボルバイナリファイルを作成する方法は、ツールを使用して、作成する方法と同様 です。下記の属性を含むよう修正を加えた、SVG ファイルを、シンボル SVG ファイル作 成ディレクトリにおいて、「ファイル」―「シンボルバイナリファイルを作成」を選択し てください。ただし、ツールに直接読み込むことは出来ません。（正しく再現しません） 表 A-1 G-XML オプションで使用する SVG 定義(表 3-2 に追加分) No 図形種別 SVG 要素 属性名 説明 制限事項 1 矩形 rect rx,ry 角丸め x 軸半径 と y 軸半径 rx/ry が矩形の幅の半分より大きい場合、 矩形の幅の半分に等しい値を設定。いず れかに妥当な値が指定されており他方 が異常値の場合、両方に妥当な値を設 定。両方に妥当な値が設定されない場 合、0 を設定。(SVG の仕様に従う) 2 パス path d 表 2-2 以外の path は未サポートです。 3 ポリゴン、 ポリライン polygon, polyline fill-rule 内側判定 fill-rule が 指 定 さ れ て い な い 場 合 も 、 fill-rule=”evenodd” が指定 さ れているも のとして、描画する。 4 文字 text font-family フ ォ ン ト フ ァ ミリー名 stroke-width 線幅 負値の場合は線を表示しない。拡大縮小 に追従せず、指定した値を固定値として 表示する(SVG ファイルの幅と異なる)。 stroke-dasharray 破線 負値を含む場合、構成要素の合計値が 0 の場合は実線で表示する。 拡大縮小に追従せず、指定した値を固定 値として表示する(SVG ファイルの点数 と異なる)。 5 各図形に共通の要素 fill/stroke 塗り色 塗りつぶし色と線色を別の色で指定す ることが可能。ツールで作成した場合は、図形要素に正しい属性値が入力されますが、テキストで編集 した場合、不正な値が入力されることがあります。表 A-2 に各値の制限事項を示します。 表 A-2 G-XML オプションで使用する SVG 定義(表 3-2 に追加分) No 図形種別 SVG 要素 属性名 説明 制限事項 x,y 左上 x,y 座標 省略可。省略された場合は 0 とみなす。 1 矩形 rect width/height 幅／高さ 0 以下の値の場合は表示しない。 cx,cy 中心点座標 省略可。省略された場合は 0 とみなす。 2 円 circle r 半径 0 以下の値の場合は表示しない。 cx,cy 中心点座標 省略可。省略された場合は 0 とみなす。 3 楕円 ellipse rx,ry x 軸 y 軸半径 0 以下の値の場合は表示しない。 4 線 line x1,y1 x2,y2 始点 終点 省略可。省略された場合は 0 とみなす。 5 ポリライン polyline points 点配列 x 座標数と y 座標数が異なる場合は、表示 しない。 6 ポリゴン polygon points 点配列 x 座標数と y 座標数が異なる場合は、表示 しない。 7 パス(円弧) path 固定のパタ ーンの d (M,A) に 限 定 し た d 属性 円弧を構成する全ての値が、正しく記述さ れていること(ツール外から変更不可) 8 パス(扇形) path 固定のパタ ーンの d (M,L,A,Z) に 限 定した d 属性 円弧を構成する全ての値が、正しく記述さ れていること(ツール外から変更不可) x,y 左下座標 1 組のみ。省略可。省略された場合は 0 と みなす。 font-size フォントサイズ 省略された場合は 12 とする。 9 文字列 text font-family フォントファミ リ名 指定された文字列が、Java で使用できるフ ォントの場合は、指定されたフォントを使 用する。 指定された文字列が、論理フォントに割り 当てるテーブルに含まれる場合は、該当す る論理フォントを割り当てる。 上記２つに当てはまらない場合、省略され た場合はデフォルトのフォントを使用す る。
10 塗りつぶし色 - fill SVG の仕様の色キーワード名）(red), 16 進 数指定(#ff0000)も可能。かならず、6 桁で 記述すること(#ff は#000000 とみなされ る)。省略された場合は黒とする。不正な値 が入力された場合は、塗りつぶしなし。 fill と stroke が異なる場合は、塗り分ける。 11 線色 stroke SVG の仕様の色キーワード名）(red), 16 進 数指定(#ff0000)も可能。かならず、6 桁で 記述すること(#ff は#000000 とみなされる) 。省略された場合、不正な値が入力された 場合は線を表示しない。 stroke と fill が異なる場合は、塗り分ける。 G-XML オプションでは、表 A-3 の値が指定されます。与えられた値に応じて、図 A-1 のように描画されます。 表 A-3 G-XML オプションのシンボル描画情報 No, 名称 描画時の説明 1 座標 この座標がシンボルの中心になるように描画する 2 角度 中心点は No.1 の座標、描画装置に向かって真上を 0°とし、時計回りを正の 方向に、指定された角度で回転して描画する。 3 サイズ サイズ×サイズの矩形に収まるように描画する。（シンボル矩形の長い辺がサ イズに一致するよう描画する） 4 前景色 シンボルを構成している図形に色が指定されているものは、すべて前景色に指 定された色で描画する。（よって、塗りつぶし図形の上に図形がある場合は、 同色のため見えなくなる） 5 後景色 サイズ×サイズで指定された範囲で、シンボル以外の範囲を指定された色で塗 りつぶす。 サイズ
