## とほほのVML入門

トップ > アラカルト > とほほのVML入門

#### ■ 目次

- VMLとは？
- VMLの例
- あらかじめ定義されている形（Predefined Shapes）
  - 四角形（rect）
  - 円・楕円（oval）
  - 角の丸い四角形（roundrect）
  - 直線（line）
  - 折れ線（polyline）
  - 曲線（curve）
  - 弧（arc）
  - 画像（image）
- 汎用的な形（shape）
  - 汎用的な形（shape）
- サブエレメント（Subelements）
  - 塗りつぶし（fill）
  - 線種（stroke）
  - パス（path）
  - 影（shadow）
  - 立体化（extrusion）
  - テキストボックス（textbox）
  - テキストパス（textpath）
  - イメージデータ（imagedata）
  - 計算式（formulas）
- その他のエレメント
  - グループ（group）
  - シェイプタイプ（shapetype）
  - VMLフレーム（vmlframe）
- 参考文献

#### ■ 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（塗りつぶしの色）、storokecolor（線の色）、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>

storoke にも点線、破線、矢印付きなどいろいろな効果が定義されています。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>

Click me!!

属性は 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" />

#### ■ 参考文献

- Vector Markup Language(W3C-NOTES)
- VMLの和訳(どら猫本舗)
- PGML(W3C-NOTES)
- SVG(W3C-Recommendation)
- VML Reference(Microsoft)

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