1

付 録A

Web ページの作成

A.1 HTML
A.1.1

HTML とはHTML は語である。

の略で、ハイパーテキストを記述するための言• ハイパーテキスト — 互いに関連づけられた文書の集まり。関連付けのことをと言う。

WWW 上の文書（Internet Explorer（以下 IE）や Netscape Navigator（以下 Netscape）などのブラウ
ザで閲覧できる文書）は、通常この HTML で書かれている。
このプリントでは、HTML という規格のうち、基本的なごく一部のみを紹介する。もっと詳しく知りたい人は以下のリンクや、参考書を参照すること。
• W3C の HTML のホームページ（http://www.w3.org/MarkUp/）• 初めてのホームページ講座（http://www.hajimeteno.ne.jp/）• Another HTML-lint（http://i16.jp/htmllint/）

A.1.2

HTML 文書の作成

HTML 文書はメモ帳のようなテキストエディタで作成することができる。フォント（字の形）や字の大きさ・色などを変えるときには、というものを使う。HTML のタグは「< . . . >」という形をしている。例えば、「太い」のように文字を太字にするには、「<b>太い</b>」のように書く。<b>が太字の開始を、</b>が太字の終了を表す。すると、ブラウザで見たときには「太い」の部分が太字で表示される。一般に HTML のタグは < . . . > と</ . . . >の対という形で使われることが多く、前者が何かの開始、後者が何かの終了を表す。（なお、タグに使うアルファベットは大文字・小文字は区別しないので、先ほどの例は <B>太い</B>でも構わない。ただし、新しい HTML の規格（XHTML1.0）という規格に厳密に従うため、大文字と小文字は区別され、HTML のタグはにでは統一されている。）
Netscape Composer などのソフトを使えば、ワープロのようなインターフェースで、タグを直接見ることなく、整形された形をその場で確認しながら HTML 文書を作成することもできる。しかし、タグを知っていれば、他人の書いた HTML 文書を見て、そのテクニックを真似することもできる。
（IE の場合、メニューの「表示」―「ソース」で、Netscape の場合、メニューの「表示」―「ページのソース」で、Web ページの HTML 文書を見ることができる。）ここでは、テキストエディタを用いて HTML 文書を作成することを学ぶ。

付録A

2

Web ページの作成

HTML は本来、
ではなく、
に、設計
されたものである。そのため、ワープロのように自由に体裁を整えられない場合がある。HTML 文書を作成するときは、この点を忘れないようにする必要がある。

A.1.3

全体の構造

HTML 文書は、次のような構造をしている。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-2202-JP"><title>ここにタイトルを入力</title></head><body>
ここに本文を入力</body></html>
このような内容のファイルをメモ帳で作成し、たとえば test.html という名前をつけて、保存する。
HTML 文書のファイルの名前は、通常、拡張子がになるようにする。
まず、最初の<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> という部分は以下の HTML 文書が HTML 4.01 Transitional という規格に基づいていることを示す。
（XHTML
1.0 の場合はこの部分は<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">となる。最初の<?xml version="1.0" ?>が XML の “お約束” である。）
残りの全体が <html lang="ja">〜</html>というタグで囲まれている。これは HTML 文書のお約束である。lang="ja"は文書の言語が日本語であることを示している。<head>〜</head>の間は、と呼ばれ、本文としては表示しない情報を書く。特にタイトルはこのヘッダ部分に、<title>〜</title>に囲んで書く。このタイトルがブラウザのタイトルバーに表示される。
<meta http-equiv="Content-Type" content="text/html;charset=ISO-2202-JP">の最後のcharset=ISO-2202-JP の部分は、文字コードとして JIS コードを使用していることを示している。これは、日本語の文字化けを防ぐのに有効である。

charsetISO-2202-JP
Shift_JIS
EUC-JP

文字コード

備考

JIS コード
シフト JIS コード
EUC JIS コード

x-sjis は誤り。
UNIX 系のコンピュータでは標準の文字コード

Windows 系の OS で日本語の入った文書をメモ帳などで新規に作成すると、普通シフト JIS コードになるので、その場合、<meta http-equiv="Content-Type" content="text/html; charset=と書くことになる。

">

A.1. HTML

3

参考リンク

• 文字コードの話（http://euc.jp/i18n/charcode.ja.html）（伊藤隆幸氏）<body>〜</body>の間が本体である。ここにある部分が、実際に表示される。そして、以下に紹介するタグで文書の構造を明確にしたり、見かけを変えたりすることができる。タグに囲まれていない
文字は普通に表示される。

A.1.4

見出し

<hn>〜</hn>（n = 1〜6）はを指定する。n は 1〜6 までの数字で、1 に近いほど大きな単位の見出しになり、字が大きくなる。

   




















    
   



A.1.5

改行・段落・区切り線

HTML 文書の中の改行は、ブラウザに表示するときは無視される。（空白と同様に扱われる。） 強制的に改行をいれたい場合はというタグを使う。 <br>には対応する終了タグはない。（なおXHTML 1.0 では このように終了タグのないタグは最後に /を入れてなっている。）のように書くことに 
 
あいだに空行を入れて段落を作成したい場合は、<p>〜</p>というタグで段落の文章を囲む。（pはparagraph の p である。）
また、水平線を入れて文章を仕切りたい時はというタグを用いる。<hr>も<br>と同様、対応する終了タグはない。（XHTML 1.0 では<hr />と書く。）

A.1.6

フォント（形・大きさ・色）字の形を変えるタグには、次のようなものがある。

付録A

4

Web ページの作成     







           







  




             

字の大きさを変えるには、 <fontが最大である 。

字の大きさを変えるには、 <fontのようなものが使える。

="n ">〜</font> というタグを用いる。n は 1〜7 で、7

="色名">〜</font> というタグを用いる。色名には次    
   

   
   

&  '!"#  
 ( $%
)
*(/(*  +0123 4(  ,-.

56  
全てのブラウザで表示できることが保証されているのはこれだけであるが、通常は他の色名を使う（256 段ことができる。さらに、赤 (R) 緑 (G) 青 (B) の光の 3 原色の強さを00〜FF までの階）で指定する方法もある。<font color="#RRGGFF">〜</font>という形で、RR, GG, BB がそれ
ぞれ赤, 緑, 青成分の強さである。

• 16 進数 — 通常の数の表わし方は 10 進数で 0〜9 まで 10 種類の数字を用いるが、 16 進数は 0〜9 に加えて A, B, C, D, E, F の計 16 種類の数字を用いる。 16 進数の A は 10 進数の 10 に、16進数の F は 10 進数の 15 に対応する。 また、16 進数の 10 は 10 進数の 16 に、16 進数の FF は
10 進数の 255(=15*16+15) に対応する。

A.1. HTML

A.1.7

5

CSS を使ったフォントの指定

font タグは将来廃止予定で、代わりに CSS（Cascading Style Sheet）という仕組みを用いることになっている。
CSS では、ヘッダで一括してフォントや色などのスタイルを指定することもできる（これが本来の使い方）。しかし、ここでは各タグにという属性を用いてスタイルを適用する方法を紹介する。
style 属性は、<p>〜</p>や<div>〜</div>などのいろいろなタグに追加することができる。スタ
イルの適用のみを目的とするならば、 <span>〜</span>というタグを使う。いくつかのスタイルを
セミコロン（;）で区切って、同時に書くこともできる。
字の形を変えるスタイルには、次のようなものがある。









!"





#$

%   %      &&&
字の大きさを変えるには、 "が使える。

:★"というスタイルを用いる。 ★には次のようなもの






  
  
 

字の色を変えるには "名"というスタイルを用いる。

:色名"というスタイル、背景色を変えるには "






    

 

:色

付録A

6

A.1.8

Web ページの作成「<」や「>」「<」や「>」という文字は HTML 文書中で特別な意味を持っているので「<」や「>」自体を表示するには特別な形が必要である。また、HTML 中では空白はいくつ連続していても、1 つの空白と同様に扱われるので、複数の空白を挿入するときにも特別な方法が要る。












 
   

A.1.9

箇条書き・連番つき箇条書き・右揃え・中央揃え

箇条書きは

〜

で箇条書きする部分を囲む。そして各項目を <li>〜</li>で囲む。連

番付の箇条書きは、<ul>〜</ul>の代わりに、

〜

を使う。




  







   

  
段落の中央揃え・右揃えはそれぞれ、<div align="center"> 〜 </div>と<div align="right">〜 </div>である。

<div align="center">これは真ん中</div><div align="right">これは右</div>と入力すると、これは真ん中これは右のように表示される。
<div>〜</div>の代わりに <p>〜</p>にalign 属性をつけても ほとんど同じである。ただしp タグの場合は、 段落の前後が 1 行ずつ空く。

A.1.10リンク

ブラウザで表示されている HTML 文書のある部分をクリックすると、他の文書が表示されるようにできる。この機能がリンクである。リンクを作成するタグは、

A.1. HTML7

<a href="場所">〜</a>である。
「場所」の部分に、この部分をクリックしたときに表示する文書のある場所を指定する。この「場所」は、HTML 文書をブラウザで表示したときに、IE の場合 「アドレス」、Netscape の場合「場所」のところに表示されている文字列のことである。
例えば、<a href="http://guppy.eng.kagawa-u.ac.jp/Programming2/index.html>
プログラミング II のホームページ</a>と書くと、プログラミング II のホームページのようにリンクができる。
この場所のことを正式には（Uniform Resource Locator） という。URI（Uniform Resource
Indicator）ということもあるが、厳密には URI の方が URL より広い概念である。
URL には絶対URL と 相対URL がある。
絶対 URL とは “http://guppy.eng.kagawa-u.ac.jp/Programming2/index.html” のように場所を省略することなく、すべて記述したものである。
最初の http は場所にアクセスするためのプロトコルを表す。http 以外にも ftp などのプロトコルがあるが、もっとも良く使うのは http である。
:と//の後の guppy.eng.kagawa-u.ac.jp はコンピュータ名である。（インターネットに直接つながっているコンピュータには、このようなユニークな名前がついている。）
である。つまりコンピュータの記憶装置の中の階層
残りの /Programming2/index.html が構造のどこにあるかを表している。Windows で用いるパスと異なり、区切りの文字はY=（バックスラッシュ）ではなく、 /（スラッシュ）である。また、Windows ではパス中のアルファベットの大文字と小文字は区別しないが、URL では一般的には大文字と小文字は 区別する。
相対 URL は絶対 URL の最初のいくつかの部分を省略したもので、 現在の URL に対する相対的な位置を表す。
特に単にファイル名を書けば、同じ場所（ディレクトリ）にあるファイルを表す。例えば、http://
guppy.eng.kagawa-u.ac.jp/Programming2/HTML.html という URL で表されているファイルから、
index.html という相対 URL で参照されるファイルの絶対 URL は http://guppy.eng.kagawa-u.
ac.jp/Programming2/index.html である。
下の例は現在の URL が http://guppy.eng.kagawa-u.ac.jp/Programming2/HTML.html の場合である。
相対 URLindex.html
Examples/template.html../ProgLang/index.html

絶対 URLhttp://guppy.eng.kagawa-u.ac.jp/Programming2/index.html
http://guppy.eng.kagawa-u.ac.jp/Programming2/Examples/template.html
http://guppy.eng.kagawa-u.ac.jp/ProgLang/index.html.. は Windows の場合と同様、

A.1.11（親ディレクトリ）を表す。

コメント<!-- と-->の間はになる。つまり、ブラウザはこの部分をまったく無視する。コメン
トは改行した時に入ってしまう空白をキャンセルするのにも使うことができる。

付録A

8

Web ページの作成 
  
A.1.12

整形済みテキスト

通常 HTML 文書中では空白はいくつ続けても空白 1 つと同じ扱いになり、改行は空白と同じ扱いになる。空白や改行を入力のまま表示するには、〜というタグを使う。







 


  
A.1.13テーブル

テーブル（表）を作るためには、まず全体を〜というタグで囲む。
（枠線つきのテーブルの場合は、border という属性をつけて、<table border>〜</table>のようにする。）
次に行を<tr>〜</tr>というタグで囲む。 最後に各項目を<td>〜</td>で囲む。 ただし、見出しに当たる項目の場合は、<th>〜</th>で囲む。


                                 






                            
複数行や複数列にわたるセルを作成することもできるが、エディタでいちいちテーブルのタグを入力するのは面倒なので、 Netscape Composer などの HTML エディタを使用するのも一つの方法である。

A.1. HTML

A.1.14

9

画像

="場所"
="代替文字列"> でその場所に画像を表示する。
<「場所」は画像ファイルのある場所（URI）で、画像ファイルの形式には JPEG 形式、PNG 形式などを使用することができる。
「代替文字列」は画像を表示できないブラウザが、画像の代わりに表示する文字列である。

A.1.15

ホームページの設置

HTML でファイルを作成したら、その HTML ファイルを Web サーバのしかるべき場所に置く。
香川大学工学部の場合、学生用の Web サーバは stwww というコンピュータである。stfile とディスクを共有しているので、stfile にファイルを置けば、stwww にファイルを置いたのと同じことになる。
stfile の各自のホームディレクトリ（Windows からはY=Y
=stfileY=homes というパスでアクセス可能）にpublic_html という名前のディレクトリを作り、そこに HTML ファイルを置く。そして、それが foo.html という名前のファイルならば、「http://stwww.eng.kagawa-u.ac.jp/˜s 学籍番号/foo.html」という URL でアクセス可能になる。
なお index.html という名前は特別で、 この場合は URL の最後のファイル名を省略することができる。 上記のディレクトリに index.html というファイルを置いた場合は、「http://stwww.eng.
kagawa-u.ac.jp/˜s 学籍番号」という URL でアクセス可能となる。
問 A.1.1 次のテンプレートをコピーして、いろいろと書き換えて自分のホームページを作成してみよ。
ファイル名 SanukiHanako.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><title>Hanako Sanuki</title></head><body><h1 align="center">讃岐花子のホームページ</h1><hr><img src="myface.png" alt="私の顔写真"><p> <font color="red">こんにちは。</font> </p><h2>私のお勧めページ</h2><ul><li><a href="http://www.pref.kagawa.jp/iryotandai/">香川県立医療短期大学</a></li><li><a href="http://www.eng.kagawa-u.ac.jp/">香川大学工学部</a></li></ul><!-- この部分はコメントです。画面には表示されません。--><hr><i>さぬきはなこ (hanako@eng.kagawa-u.ac.jp)</i></body></html>
網かけ の部分は通常書き換える必要のない部分である。

付録A

10

A.1.16Web ページの作成

Web ページのネチケットについて

Web ページは全世界に公開するものなので、作成する時に、いくつか注意すべき点がある。
• 機種依存文字を使わない
いわゆる半角カナ・ローマ数字・丸つきの数字など（）は機種に依存する文字である。Windows では表示できるが、他の機種で表示できるとは限らない。Web ページは相手がどんな機種で読むかわからないので、機種依存文字は使ってはいけない。

• （特にトップページは）簡素にする
相手が低速な回線で見ている場合もあるので、サイズの大きな画像をトップページに使うのはよくない。Java Applet もやめた方が良い。Flash も作り方によっては、サイズが大きくなるのでよく考えて使う。フレームや表（<table>）もむやみに多用するのはやめたほうが良い。

• 他人のページをリンクする時はマナーに気をつける
他人のページをリンクする時は、法的には作者に連絡する必要はない。しかし、連絡を下さい、などと記述がある場合は、もちろん連絡する方が良いだろう。
ところで「リンクはご自由に」という意味で、“リンクフリー” という言葉を使っているページがあるが、これは英語としておかしい（「リンクがない」という意味になってしまう）ので使わないこと。
次のような点には注意する。

– 違法なページへのリンクは、やはり違法と判断される場合がある。また、ソフトウェアの違法コピーを許すようなリンクを作らないこと。
– リンク先のページを誹謗中傷するような書き方は、当然リンク先の作者を怒らせる。
– 他人のページがまるで自分の作ったページに見えるようなリンクの仕方もマナー違反になる。特に画像を直接リンクしたり、フレームのなかに他人のページを入れるのは良くない。
• 大学の Web サーバで商売をしない。
香川大学のコンピュータ機器は国民の税金でまかなわれているので当然である。

• アクセスの制限について
ネチケットとはすこし話題が異なる が、作成した HTML を全世界ではなく、内輪でだけ公開
したい時がある。
もし、stwww に置いた HTML ファイルを香川大学外からアクセスできないようにしたい場合は、
以下のような内容のファイル<Limit GET>
order deny,allow
allow from 133.92.
deny from all</Limit>を作成し、「」というファイル名にして置くと、そのディレクトリ以下にある HTML
ファイルは、香川大学内からのみ、アクセスできるようになる。

A.2. SVG

11

A.2 SVG
A.2.1

SVG とは

SVG とは、Scalable Vector Graphics の略で、2 次元のベクター（ベクトル）グラフィックスのための言語仕様である。SVG も HTML と同じく W3C という団体で制定されている。
2 次元画像のファイル形式は大きくとにわけられる。JPEG、
GIF、PNG などの WWW で良く使われている画像形式は、すべてラスター形式に分類される。ラスター形式と言うのは、画像を縦横に分割して、格子（画素）の集まりとして考え、各画素の色を基本要素として扱う形式である。この画素の数を解像度といい、640×480, 320×240 などと表す。ラスター形式で表されている画像の細部を拡大すると、当然この画素が目に見えるようになって、斜めの線などはギザギザになってしまう。

元の画像

拡大（ラスター） 拡大（ベクター）

一方、ベクター形式というのは、画像の輪郭を直線・曲線の集まりとして捉え、線の代表点（端点・角など）の列として画像を表現する方式である。ベクター形式の場合、画像をいくら拡大しても、線の輪郭は綺麗なままである。
写真などの自然画像はラスター形式でなければ表現することが難しいが、イラストなどの人工的な画像は、本来ベクター形式の方が保存に適している。Adobe 社の PostScriptTM 形式や Macromedia 社の FlashTM が使用する SWF 形式などが代表的なベクター形式の規格である。
SVG は、W3C で仕様が策定され一般に公開されている1 。ベクター形式のファイルフォーマット
で、XHTML と同じくXML の一種である。すなわちテキスト形式である、という特徴がある。
現時点では Netscape や IE などのブラウザは、標準では SVG をサポートしていないので、プラ
グインをインストールする必要がある。Windows 用の SVG のプラグインは Adobe の Web サイト（http://www.adobe.co.jp/svg/viewer/install/）または、Corel の Web サイト（http://www.
corel.com/svgviewer/）からダウンロードできる。
まずは、SVG を使用している Web サイトを訪れて、プラグインがインストールされていることを確認する。

• Adobe のサイト（http://www.adobe.co.jp/svg/）• takesato.com “SVG Developers Center” （http://www.takesato.com/svg/）などを挙げておく。最後のサイトは SVG に関するリンクが豊富である。

1

http://www.w3.org/TR/SVG/

付録A

12

A.2.2

Web ページの作成

SVG ファイルの作成

試しに次のようなファイルを作成してみる。
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 1.0//EN""http://www.w3.org/TR/SVG/DTD/svg10.dtd"><svg width="300" height="200"><text x="115" y="110" stroke="red" fill="orange" font-size="24">
Hello!</text><rect stroke="blue" fill="none"x="50" y="50" width="200" height="100" rx="35" ry="25" /></svg>
ファイル名は何でも良いが、拡張子はにしておく。ここでは、first.svg という名前をつけることにする。
一見するとタグ< . . . >の使い方などは HTML に似ている。ただし、従来の HTML はアルファベッ
トの大文字と小文字は区別しなかったが、SVG は XML の一種なので大文字と小文字を厳密に。
このファイルを Netscape または IE で表示すると次のようになる。

text は文字列を描くための命令である。なお、文字列に日本語を使う時は、注意が必要である。現時点では、Adobe SVG Viewer 3.0 は文字コードとして Unicode（UTF-8 と UTF-16）しかサポートしていないようである。Windows 2000/XP のメモ帳の場合はファイルを保存するときに「文字コード」
を「Unicode」にしておく。
rect は長方形を描くための命令である。rx とry は長方形の角のまるみを表す属性である。rectと同じような基本図形のためのタグは、この他に<line . . . /><circle . . . /><ellipse . . . /><polyline . . . /><polygon . . . />

直線を描く
円を描く
楕円を描く
折れ線を描く多角形を描くなどがある。
上記のタグに共通の属性として次のようなものがある。

A.2. SVG

13
属性

意味

例

strokestroke="red"fillstroke-width

fill="#ffff00"
stroke-width="2"

線の幅

備考

line は除く

stroke とfill にはnone という値を与えることも可能である。その場合、それぞれ線無し、塗りつ
ぶし無し、という意味になる。
この他にも、一次変換を行なうtransform などの属性がある。
また各タグに特有の属性のうち良く使うものには次のようなものがある。
属性
意味
属性
意味
line の属性
x1
始点の x 座標y1
始点の y 座標x2
終点の x 座標y2
終点の y 座標

ellipse の属性
cx
中心の x 座標cy
中心の y 座標rx
x 方向の半径ryy 方向の半径rect の属性
x
左上の点の x 座標y左上の点の y 座標
width
幅
height
高さrx
角の丸みの x 方向の半径ry
角の丸みの y 方向の半径

circle の属性
cx
中心の x 座標cy
中心の y 座標r
半径polyline の属性
points点列

polygon の属性
points点列
text の属性x
始点の x 座標y
始点の y 座標
font-size フォントのサイズ

点列は次の例のように

x1 , y1 x2 , y2 · · · xn , ynという形式で記述する。
これらのタグを使用した例をあげておく。
ファイル名 sample.svg<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 1.0//EN""http://www.w3.org/TR/SVG/DTD/svg10.dtd"><svg width="300" height="200"><circle stroke="blue" stroke-width="2" fill="yellow" cx="50" cy="50"<ellipse stroke="#ff8800" stroke-width="2" fill="#0088ff"
cx="150" cy="50" rx="25" ry="35" /><polyline fill="none" stroke="green" stroke-width="3"
points=" 25,175 75,175 75,125 125,125 125,175
175,175 175,125 225,125 225,175 275,175" /><polygon fill="lime" stroke="blue" stroke-width="2"
points="285, 50 267.5, 80.31 232.5, 80.31
215, 50 232.5, 19.69 267.5, 19.69" /></svg>

r="35" />

14

付録A

Web ページの作成

このファイルは次のように表示される。

また、SVG にはこのような基本図形の他にも、ベジエ（Bezier）曲線という滑らかな曲線を描くためのpath 命令や、フィルタ効果、グラデーション、アニメーションなどのさまざまな機能がある。
通常 SVG は HTML で書かれた Web ページに配置されることが多いだろう。SVG 画像を Web ペー
ジに埋め込むには、HTML のタグを用いる。
ファイル名 svgtest.html<html><head><title>SVG のテスト</title></head><body>SVG のテストです。<br><object data="logo.svg" type="image/svg+xml"
width="170" height="187">
SVG を表示できないブラウザではこの部分が出力されます。
</object></body></html>object タグのdata 属性に SVG のファイル名（あるいは URI）、type 属性に image/svg+xml という文字列を指定する。width 属性と height 属性も指定する必要がある。

A.3. （おまけ）X3D

A.3（おまけ）X3D

A.3.1

X3D とは

15

X3D とはの略であり、VRML97 の後継として設計された 3D グラフィックスのファイル形式の規格である。X3D は HTML（XHTML）や SVG などと同じく、XML に基づいている。
X3D の仕様については、http://www.web3d.org/fs_specifications.htm を参照すること。また、
X3D のサンプルは http://www.web3d.org/TaskGroups/x3d/translation/examples/contents.
html で多く見つけることができる。

A.3.2

X3D 関連ソフトウェアを入手する

X3D のプラグインはいくつかあるが、現時点では BS Contact VRML（http://www.bitmanagement.
de/）を推奨する。まずは、X3D を使用している Web ページを訪れて、プラグインがインストールされていることを確認する。次のページはインストールされているプラグインをチェックしてくれるので便利である。
• VRML Plugin and Browser Detector （http://cic.nist.gov/vrml/vbdetect.html）

A.3.3

スケルトン

X3D のファイルのスケルトンは次のようになる。
ファイル名 empty.x3d<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN""http://www.web3d.org/specifications/x3d-3.0.dtd"><X3D profile="Interchange"><Scene><!-- Scene graph nodes are added here. --></Scene></X3D>
1〜4 行目は XML では “お約束” の書き方である。1 行目のencoding の値はここではUTF-8 になっているが、使用する文字コードに応じてISO-2022-JP, Shift_JIS, EUC-JP などに変更する。
5 行目のX3D タグのprofile の部分が、X3D の特徴的な部分で、このファイルで使用するタグの集合を指定する。Core, Interchange, Interactive, Immersive, MPEG4, Full の順に使用できるタグの種類が増える。（その代わり再生に必要なソフトウェアが重くなる。）<Scene>〜</Scene>の部分（9〜11 行目）に実際の 3D 物体を記述する。
X3D ファイルの拡張子は.x3d である。X3D で作成したグラフィックスを HTML ファイル中に画像として埋め込むためには、HTML のobject タグを用いる。

付録A

16

Web ページの作成

ファイル名 x3d test.html...
<object data="first.x3d" type="model/x3d+xml"
width="256" height="256">
X3D を表示できないブラウザではこの部分が出力されます。
</object>...

object のtype 属性に用いる文字列（MIME type）は、model/x3d+xml を指定する。

A.3.4

3D 物体

それでは、Scene に物体を追加してみよう。上記のスケルトンの<!-- Scene graph nodes areadded here. --> の部分を次のように書き換えてみる。
（以下の例ではすべてこの部分のみを示す。）<Shape><Cylinder /></Shape>
Shape というタグの中にCylinder というタグを入れることによって、円筒形（Cylinder）が現れる（下図左）。

しかし、これでは色が白（実際は明るい灰色）で立体感がほとんどない。そこでこの円筒に色をつけてみることにする。色を付けるにはAppearance とMaterial というタグを用いる。Material タグのdiffuseColor という属性に 0〜1 の間の RGB 値を指定することによって、物体に色をつけることができる（上図右）。

<Shape><Cylinder /><Appearance><Material diffuseColor="1 0.5 0.5" /></Appearance></Shape>
なお、diffuseColor という属性は物体が反射する色を指定する。これに対してemmisiveColor という、物体が自ら発する光の色を指定する属性もある。
Cylinder は既定値では半径 1, 高さ 2 になっている。radius とheight という属性を変更することによって、この値を変更することができる。

<Shape><Cylinder height="1.5" radius="1.8" /><Appearance><Material diffuseColor="1 0.5 0.5" /></Appearance></Shape>
この結果を次図左に示す。

A.3. （おまけ）X3D

A.3.5

17

物体の移動

3D 物体はデフォルトでは中心に座標の原点が来るように配置される。物体を平行移動させたり、回転させたりするにはTransform というタグで移動させたい部分を囲む（次図右）。
<Transform rotation="1 0 0 0.785"><Shape><Cylinder /><Appearance><Material diffuseColor="1 0.5 0.5" /></Appearance></Shape></Transform>
Transform タグには次のような属性がある。
属性名

説明

例

translation
rotation
centerscale
scaleOrientation

平行移動の各座標軸方向
回転軸（1〜3 番目）と回転量（4 番目）
回転と拡大・縮小の中心点
拡大・縮小の各座標軸方向
拡大・縮小の向き（回転軸と回転量）

1 0 0
1 0 0 0.785
0 1 0
2 1 0.5
0 1 0 0.785

角度の単位はラジアンである。例えば translation="1 0 0"は x 軸方向へ 1 移動することを表し、rotation="1 0 0 0.785"は x 軸中心に 0.785 ラジアン（約 45 度）回転することを表す。なお、Transform
タグで平行移動・回転・拡大が同時に 2 つ以上指定された時は、拡大・縮小 → 回転 → 平行移動の順に適用される。

A.3.6

いろいろな 3D 形状

基本的な物体形状としては、Cylinder の他に Box（直方体）、Sphere（球）、Cone（円錐）などがある。また、文字列を表示するにはText というタグを用い、表示する文字列をstring という属性で与える。

<Text string="Hello!" />次の図にこれらのさまざまな形状を適当な角度から見たものを示す。

付録A

18
<Sphere /><Box /><Cone />

<Text string="Hello!" />Web ページの作成

これらのタグは次に示すような属性を指定することもできる。
タグ

属性

意味

既定値

Box
SphereCone

sizeradiusheightbottomRadius
stringx, y, z 軸方向のサイズ
半径
高さ
底面の半径
文字列

2 2 2
2
2
1
（必須）

Text

さらに、ここでは詳しく説明できないが、X3D にはこの他にも、IndexedFaceSet（複数のポリゴンを組み合わせた形状）、Extrusion（2 次元の多角形に厚みを持たせた形状）、ElevationGrid（2 次
元座標の上で高さを指定する形状）、NurbsSurface（滑らかな自由曲面）など、多くの種類のタグがある。