とほほのVML入門
- トップ
- とほほのVML入門
VMLとは?
VML とは Vector Markup Language の略で、Webページ上で線や円などのベクトル図形を表示するための言語です。IE5.0 以上でサポートされています。Netscape ではサポートされていません。
XMLベースの言語として、1998年5月13日に Microsoft、Macromedia、HP社などから W3C に提案されましたが、そのままは採用されず、Adobe 社の PGML と統合され、2001年9月5日に SVG として勧告されました。将来的には SVG に移行する予定です。「今更 VML・・・」と言われてしまいそうですが、とりあえず、今使える VML について説明します。
※(注記) このページを IE5.0 以降のブラウザで見ると、実例が表示されます。
VMLの例
論より証拠。まずは、下記のコードを IE5.0 以降のブラウザで開いてみてください。簡単な折れ線グラフが描画されます。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML TEST</title>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:line from="0,100" to="300,100" strokecolor="black" />
<v:line from="0,100" to="0,0" strokecolor="black" />
<v:line from="0,100" to="100,0" strokecolor="red" />
<v:line from="100,0" to="200,80" strokecolor="red" />
<v:line from="200,80" to="300,10" strokecolor="red" />
</body>
</html>
VML を使用する場合は必ず、html タグの xmlns の部分と、<style>〜</style> の部分を記述してください。
<v:line /> は <v:line></v:line> と同じ意味です。開始タグと終了タグを記述する場合は <v:xxx>〜</v:xxx>、終了タグを省略する場合は <v:xxx /> のように、最後のスラッシュ(/)を記述してください。
あらかじめ定義されている形(Predefined Shapes)
四角形(rect)
固有属性: 無し。一般属性: shape 参照。
<v:rect style="width:30; height:30;" fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
円・楕円(oval)
固有属性: 無し。一般属性: shape 参照。
<v:oval style="width:40; height:30" fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
角の丸い四角形(roundrect)
固有属性: arcsize(角の丸さ)。一般属性: shape 参照。
<v:roundrect style="width:30; height:30" arcsize="0.2" fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
直線(line)
固有属性: from(始点)、to(終点)。一般属性: shape 参照。
<v:line style="position:relative;" from="0,0" to="100,0" strokecolor="red" strokeweight="2" />
折れ線(polyline)
固有属性: points(通過点の集合)。一般属性: shape 参照。
<v:polyline style="position:relative;" points="10,0 20,30 30,0 40,30" strokecolor="red" strokeweight="2" />
曲線(curve)
固有属性: from(始点)、control1(制御点1)、control2(制御点2)、to(終点)。一般属性: shape 参照。
<v:curve style="position:relative;" from="0,0" control1="50,30" control2="100,30" to="150,0" strokecolor="red" strokeweight="2" />
弧(arc)
固有属性: startangle(開始角)、endangle(終了角)。一般属性: shape 参照。
<v:arc style="width:100; height:100" startangle="0" endangle="90" strokecolor="red" strokeweight="2" />
画像(image)
固有属性: 無し。一般属性: shape 参照。
<v:image src="image/ki2.gif" style="position:relative; width:25; height:27;" />
汎用的な形(shape)
汎用的な形(shape)
<v:shape fillcolor="#ffcccc" strokecolor="red" style="width:200; height:200;" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x e"> </v:shape>
shape を用いていろいろな形を描くことができます。m 80,0 は 80,0 の位置にペンを動かす(moveto)、l 60,65, 0,65, ... は、60,65 の場所、0,65 の場所にペンで線を引く(lineto)、x は線を閉じて終了する(close)、e は終わり(end)を意味します。
shape には、fillcolor(塗りつぶしの色)、strokecolor(線の色)、path(軌跡)の他にも 70 以上の一般属性が定義されており、それらの属性は、<v:line> や <v:rect> などの属性としても使用することができます。
【shape の属性(主なもの)】
- fillcolor="色"(塗りつぶしの色)
- strokecolor="色"(線の色)
- strokeweight="太さ"(線の太さ)
- z-index="数値"(重なり順序)
- style="rotation:角度"(傾け角度)
サブエレメント(Subelements)
塗りつぶし(fill)
<v:rect style="width:30; height:30;"> <v:fill type="gradient" color="red" color2="white" /> </v:rect>
fill には上記のグラデーションの他にも、半透明にしたり、画像を張りつけたりなど、塗りつぶしに関する様々な効果が定義されています。type、color を含め、属性は 23 個定義されています。詳細は Microsoft のリファレンスなどを参照してください。
線種(stroke)
<v:line style="position:relative;" from="0,0" to="100,0" strokecolor="red" strokeweight="1"> <v:stroke dashstyle="dash" endarrow="classic" /> </v:line>
stroke にも点線、破線、矢印付きなどいろいろな効果が定義されています。dashstyle、endarrow を含め、属性は 25 個定義されています。
パス(path)
<v:shape style="width:200; height:200;" strokecolor="red"> <v:path v="m 0,100 l 100,0, 300,0 e" /> </v:shape>
属性は 14 個定義されています。
影(shadow)
<v:rect style="width:30; height:30;" fillcolor="#ffcccc"> <v:shadow on="true" offset="5px,5px" color="gray" /> </v:rect>
属性は 11 個定義されています。
立体化(extrusion)
<v:rect style="width:30; height:30;" fillcolor="#ffcccc"> <v:extrusion on="true" backdepth="20" /> </v:rect>
明るさ、色調、光源の位置など、属性は 33 個定義されています。
テキストボックス(textbox)
<v:roundrect style="width:90; height:27;" fillcolor="#ffcccc"> <v:textbox><a href="xxx.htm">Click me!!</a></v:textbox> </v:roundrect>
属性は 14 個定義されています。
テキストパス(textpath)
形に添った文字を描きます。
<v:oval style="width:400; height:70;"> <v:path textpathok="true" /> <v:fill type="gradient" color="red" color2="white" /> <v:textpath on="true" string="I have a dream." style="font:normal normal normal 36pt 'Arial Black'"/> </v:oval>
イメージデータ(imagedata)
図形の中に画像を張りつけます。
<v:rect style="width:50; height:50"> <v:imagedata src="xxx.gif" gamma="0.3" /> </v:rect>
属性は 19 個定義されています。
計算式(formulas)
formulas は描画点を計算式で求めたいときに用います。
<v:shape style="width:100; height:100;" strokecolor="red" adj="500" path="m 0,0 l 0,@0, @1,500 e"> <v:formulas> <v:f eqn="sum #0 500 0" /> <!-- @0 --> <v:f eqn="prod #0 2 0" /> <!-- @1 --> </v:formulas> </v:shape>
adj="500" は定数 500 を定義します。これは、#0 として参照できます。sum は加算や減算を用いるのに使用し、sum v1 v2 v3 は v1 + v2 - v3 を意味します。演算の結果は @0 として参照できます。prod は乗算や除算を行うのに使用し、prod v1 v2 v3 は v1 * v2 / v3 を意味します。演算の結果は @1 として参照できます。sum や prod の他にも sin や sqrt などを使用できます。
その他
上記の他にも、Callout、Handles、Locks、Skew といったサブエレメントが定義されています。
その他のエレメント
グループ(group)
グループを定義します。グループの中の各要素は、同じ座標原点を用いることができるようです。
<v:group style="width:100; height:100;"> <v:rect style="width:500; height:500;" fillcolor="#ccccff" /> <v:oval style="width:500; height:500;" fillcolor="#ffcccc" /> <v:line from="0,0" to="500,500"/> </v:group>
シェイプタイプ(shapetype)
シェイプ(形)に id 属性で名前をつけておき、type="名前" でその形を呼び出します。
<v:shapetype id="hosi" fillcolor="#ffcccc" strokecolor="red" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x e"> </v:shapetype> <v:shape type="#hosi" style="width:100; height:100;" /> <v:shape type="#hosi" style="width:200; height:200;" /> <v:shape type="#hosi" style="width:300; height:300;" />
VMLフレーム(vmlframe)
他の VML ファイルに記述されたシェイプを呼び出すことができます。まず、xx.vml ファイルに以下の記述をしておきます。
<xml xmlns:v = "urn:schemas-microsoft-com:vml"> <v:rect id="xx1" style="height:30; width:30;" fillcolor="#ffcccc" /> <v:oval id="xx2" style="height:30; width:30;" fillcolor="#ffcccc" /> </xml>
これを、次のようにして呼び出します。
<v:vmlframe style="width:50;height:50" src="xx.vml#xx1" /> <v:vmlframe style="width:50;height:50" src="xx.vml#xx2" />