とほほのVML入門

トップ > とほほのVML入門
VML は Internet Explorer 10 で廃止されました。今後は <canvas> を使用することが推奨されます。(2013.1.4追記)

目次

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 の属性(主なもの)】

サブエレメント(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 v3v1 + v2 - v3 を意味します。演算の結果は @0 として参照できます。prod は乗算や除算を行うのに使用し、prod v1 v2 v3v1 * v2 / v3 を意味します。演算の結果は @1 として参照できます。sum や prod の他にも sin や sqrt などを使用できます。

◆ その他

上記の他にも、CalloutHandlesLocksSkew といったサブエレメントが定義されています。

その他のエレメント

◆ グループ(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" />

参考文献


Copyright (C) 2001 杜甫々
初版:2001年11月4日
http://www.tohoho-web.com/wwwvml.htm