7.1 スクリプトの基礎の基礎
7.1.1 スクリプトとは何か
SVG文書の中には、「スクリプト」(script)と呼ばれる記述を書くことができます。
スクリプトというのは、動作をあらわしている記述のことです。ウェブブラウザーは、SVG文 書の中に書かれたスクリプトによってあらわされている動作を実行することができます。
7.1.2 JavaScriptとは何か
SVG文書の中に書くスクリプトの記述には、通常、JavaScriptというプログラミング言語が 使われます。
JavaScriptというのは、ECMA(European Computer Manufacturers Association)という標準 化団体が策定したECMA-262という文書で定義されているプログラミング言語のことです。その 文書は、自分が定義しているプログラミング言語をECMAScriptと呼んでいますので、JavaScript は通称で、ECMAScriptが正式名称ということになります。
このチュートリアルのここから先の部分は、JavaScriptがすでに使えるようになっている人を 読者として想定して書かれています。ですので、まだJavaScriptが使えない読者は、この先の部 分を読む前にJavaScriptについて勉強する必要があります。
7.1. スクリプトの基礎の基礎 63
JavaScriptについては、付録Bでも簡単に説明しています。ただし、その付録は、すでに何ら
かの言語でプログラムが書ける人を読者として想定して書かれていますので、プログラミング自 体が初めての人は、JavaScriptの入門書を読むほうがいいでしょう。
7.1.3 スクリプトを書くための要素
スクリプトは、SVG文書の中のどこに書いてもいいというわけではありません。
スクリプトを書くことのできる場所は、scriptという要素型の要素を書くことによって作る ことができます。script要素の子供としてスクリプトを書いておくと、そのスクリプトは、ウェ ブブラウザーがSVG文書を読み込んだ時点で実行されます。
script要素を書くときは、それが持っているtypeという属性に、スクリプトを書くために使
われている言語のMIMEタイプを設定する必要があります。
JavaScriptのMIMEタイプはtext/ecmascriptですので、言語としてJavaScriptを使う場
合、script要素は、
<script type="text/ecmascript"> スクリプト </script>
と書くことになります。
なお、text/ecmascriptは、以前から使われてきたJavaScriptのMIMEタイプですが、現
在では、RFC4329で規定されているように、
application/javascript または application/ecmascript
というのがJavaScriptの正式なMIMEタイプです。しかし、あらゆるウェブブラウザーが正式 なMIMEタイプを認識することができるようになるのは当分先のことになると思われますので、
このチュートリアルでは、以前から使われてきたMIMEタイプを使うことにします。
スクリプトは、通常、XML応用言語ではない言語を使って書かれます。ですから、スクリプ トは普通、
<![CDATA[ スクリプト ]]>
というように、CDATAセクションの中に書かれます。
SVG文書の例 script.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript"><![CDATA[
alert(’Hello, world!’);
]]></script>
</svg>
このSVG文書のスクリプトの中で使われているalertというのは、引数として渡されたテキ ストをダイアログボックスで表示するメソッドです。テキストではないデータまたはオブジェク トが引数として渡された場合は、それをテキストに変換して表示します。
alertは、windowという名前のオブジェクトが持っているメソッドですので、本来は、
window.alert( 式 )
という式で呼び出さなければならないのですが、window.は、省略することができます。
7.1.4 スクリプトファイル
スクリプトは、SVG文書の中に書くことができるだけではなくて、SVG文書から独立した文 書として書いておいて、それをSVG文書から参照することも可能です。
スクリプトだけから構成されている文書が格納されているファイルは、「スクリプトファイル」
(script file)と呼ばれます。
スクリプトファイルのファイル名には、そこに格納されているスクリプトを書くために使われ ているプログラミング言語に応じた拡張子を付けます。スクリプトがJavaScriptを使って書かれ ている場合の拡張子は、.jsです。
64 第7章 スクリプトの基礎 スクリプトファイルに格納されているスクリプトをSVG文書から参照したいときは、script
要素のxlink:href属性に、そのファイルを指定するURIを設定します。
それでは、次のスクリプトとSVG文書を入力して、ブラウザーにSVG文書を表示させてみ てください。
スクリプトの例 hello.js alert(’Hello, world!’);
SVG文書の例 script2.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript" xlink:href="hello.js"/>
</svg>
7.2 イベント
7.2.1 イベントとは何か
人間がマウスなどを操作することによって発生する出来事は、「イベント」(event)と呼ばれま す。SVGは、イベントが発生したときに、そのイベントに対応するスクリプトを実行すること ができる、という機能を持っています。
イベントが発生したときにスクリプトによって実行される動作は、「イベント処理」(event processing)と呼ばれます。
7.2.2 イベント属性
SVGで定義されている要素の多くは、「イベント属性」(event attribute)と呼ばれるいくつか の種類の属性を持っています。イベント属性に対してスクリプトを属性値として設定しておくと、
そのスクリプトは、何らかのイベントが発生したときに実行されます。
イベント属性の種類は、イベントの種類に対応しています。ですから、イベント処理が実行さ れるようにしたいときは、どのような種類のイベントが発生したときにスクリプトを実行するの かということに応じて、その種類に対応するイベント属性にスクリプトを設定しておく必要があ ります。
マウス（一般的に言えばポインティング・デバイス）によるイベントに対応するイベント属性 としては、次のようなものがあります。
onmouseover グラフィックスの上に重なった。
onmouseout グラフィックスの上から出ていった。
onmousedown グラフィックスの上でボタンが押された。
onmouseup グラフィックスの上でボタンが離された。
onmousemove グラフィックスの上で移動した。
onclick グラフィックスの上でクリックされた。
グラフィックスを描画する要素が持っているイベント属性に対してスクリプトを設定しておく と、そのスクリプトは、その要素によって描画されたグラフィックスの上でイベントが発生した ときに実行されます。
SVG文書の例 eventat.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="20" rx="30" ry="10" fill="springgreen"
onmouseover="alert(’I am an ellipse.’)"/>
<rect x="20" y="40" width="60" height="20" fill="limegreen"
7.3. イベントオブジェクト 65 onclick="alert(’I am a rectangle.’)"/>
</svg>
7.2.3 グループのイベント
グラフィックスのグループを作る要素が持っているイベント属性に対してスクリプトを設定し ておくと、そのグループに属するどのグラフィックスについても、その上でイベントが発生した 場合には、そのスクリプトが実行されることになります。
SVG文書の例 grevent.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<g fill="darkslateblue"
onclick="alert(’I am a group of graphics.’)">
<ellipse cx="50" cy="20" rx="30" ry="10"/>
<rect x="20" y="40" width="60" height="20"/>
</g>
</svg>
7.2.4 イベントハンドラー
script要素の子供として書かれたスクリプトの中で定義されたものの名前は、SVG文書の全
体が有効範囲になります。ですから、script要素の子供として書かれたスクリプトの中で定義 されている関数やメソッドを呼び出すスクリプトをイベント属性に設定しておくと、イベントが 発生したときにその関数やメソッドが呼び出されることになります。
イベント属性に設定されたスクリプトから呼び出される関数やメソッドは、「イベントハンド ラー」(event handler)と呼ばれます。
SVG文書の例 handler.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<g fill="forestgreen" onclick="showDateAndTime()">
<rect x="30" y="20" width="40" height="20"/>
<text x="50" y="50" text-anchor="middle" font-size="8"
font-family="serif">
present date and time
</text>
</g>
<script type="text/ecmascript"><![CDATA[
function showDateAndTime() {
alert((new Date()).toLocaleString());
]]></script>}
</svg>
7.3 イベントオブジェクト
7.3.1 イベントオブジェクトの基礎
SVGのスクリプトの中では、「イベントオブジェクト」(event object)と呼ばれるオブジェク トを扱うことができます。イベントオブジェクトというのは、発生したイベントをあらわしてい るオブジェクトのことです。
SVGのスクリプトの中では、evtという名前で、イベントオブジェクトを参照することがで きます。
イベントオブジェクトを扱うイベントハンドラーは、かならず、イベントオブジェクトを引数と して受け取るように定義する必要があります。そして、イベントハンドラーを呼び出して、evt
66 第7章 スクリプトの基礎 から取得したイベントオブジェクトをイベントハンドラーに引数として渡すスクリプトを、イベ ント属性に設定しないといけません。そのようにしなければならない理由は、もしも、イベント オブジェクトを引数で受け取るのではなくて、イベントハンドラーが呼び出されたのちにevtか ら取得するように定義したとすると、取得までのタイムラグのあいだに発生した別のイベントを 処理してしまう可能性があるからです。
SVG文書の例 eventob.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<g fill="cadetblue" onclick="showEventObject(evt)">
<rect x="30" y="20" width="40" height="20"/>
<text x="50" y="50" text-anchor="middle" font-size="8"
font-family="serif">
show event object
</text>
</g>
<script type="text/ecmascript"><![CDATA[
function showEventObject(evt) { alert(evt);
]]></script>}
</svg>
7.3.2 マウスポインターの座標
何らかのイベントが発生すると、イベントオブジェクトのプロパティーに、発生したイベント に関するさまざまなデータやオブジェクトが設定されます。たとえば、offsetXとoffsetYと いうプロパティーには、イベントが発生したときのマウスポインターの座標（原点は、イベント が発生した要素の左上の隅）が設定されます。
イベントオブジェクトに設定される座標の単位は、viewBox属性で設定した単位ではなくて、
物理的なピクセルです。
SVG文書の例 position.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="70"
fill="sandybrown" onclick="showPosition(evt)"/>
<script type="text/ecmascript"><![CDATA[
function showPosition(evt) {
alert("offsetX = " + evt.offsetX + "\n" +
"offsetY = " + evt.offsetY);
]]></script>}
</svg>
7.3.3 要素オブジェクト
XMLの要素をあらわしているオブジェクトは、「要素オブジェクト」(element object)と呼ば れます。
イベントオブジェクトが持っているtargetというプロパティーには、イベントが発生したグ ラフィックスの要素をあらわしている要素オブジェクトが設定されます。
SVG文書の例 elemobj.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">