WWW 17 2 10
1 1 2 Unix 1 3 4 4 SVG 6 4.1 SVG................................... 6 4.2 SVG......................... 6 4.3 SVG.............................. 7 4.4................................. 8 4.5........................... 9 4.6.................................... 9 4.7................................. 10 4.8...................................... 10 4.9............................... 10 4.10....................... 11 5 GUI 12 5.1 Tcl Tk................................. 12 5.2.................................. 12 6 SVG 14 6.1.................................. 14 6.2............................ 15 i
7 HTML 16 7.1.................................. 17 8 17 8.1............................ 17 9 18 20 ii
WWW Unix Unix Tgif Xfig Xpaint Unix WWW HTML iii
17 3 1 WWW Tgif Tgif ( ) Tgif Unix ( ) Fig. 1.1 2 Unix Unix Tgif Xfig Xpaint Tgif Xfig Xpaint 1
2 Tgif Fig. 2.1 Tgif Tgif 2
WWW EPS PS EPS Tgif (1,1) (2,3) (2,2) 1 Tgif Xfig Xpaint (GIF JPEG PNG PPM ) WWW Tgif Tgif 1 1 1 Tgif MS Windows Unix 3
GUI Tcl/Tk GUI ( ) ( ) 3 WWW URL URL 1. gif jpg (Map Edit URL ) HTML HTML <a href = " "><img src = " " ismap></a> HTML CGI 4
WWW CGI CGI CGI CGI 2. Web HTML HTML <img src=" " usemap="#map" border="0"> <map name="map"> <area shape="circle" coords="340,192,4" href=" "/> </map> (340,192) 4 HTML URL HTML HTML CGI HTML 5
WWW CGI 4 SVG 4.1 SVG SVG W3C WWW 1 XML XML XML XML SVG SVG SVG 4.2 SVG SVG SVG SVG Adobe SVG Viewer WWW 6
WWW WWW SVG SVG SVG 4.3 SVG SVG XML SVG XML XML 3 XML XML XML XML XML <?xml version="1.0" encoding="euc-jp" standalone="no"?> XML version 1.0 encoding XML standalone XML yes no XML XML XML Document Type Definition(DTD) XML <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/tr/svg/dtd/svg10.dtd"> 7
DTD XML DTD XML XML (<) (>) 1 1 <svg width="340" height="280" viewbox="60 100 340 280" xmlns:xlink="http://www.w3.org/2000/svg"> 4.4 SVG rect circle ellipse line polyline polygon 8
WWW stroke-width stroke fill <circle cx="30" cy="40" r="4" fill="blue"/> (30,50) 5 4.5 text text text text text x y font-size fill x y <text x="30" y="50" font-size="12" font-family="serif" fill="black"> </text> (30,50) 4.6 SVG 9
4.7 SVG transform 4.8 SVG path path path <path d="m 10,10 l 70,10 c 100,40 50,40 30,40" stroke-width="2" stroke="black" fill="silver"/> path d m 1 l c 4.9 SVG a 10
WWW Fig. 4.1 path a a <a xlink:href="url"> <circle cx="340" cy="192" r="4" fill="blue"/> </a> (340,192) 4 URL 4.10 SVG 2 1. 2. SVG 1 300 300 (100,100) 100 100 11
GUI SVG 5 GUI GUI Tcl/Tk Tcl/Tk GUI 5.1 Tcl Tk Tcl C Tk UNIX X Window GUI Tcl Tcl Tk Tcl/Tk C Tcl/Tk GUI UNIX Tcl Tk GUI GUI widget( ) 5.2 12
WWW size build road size 0 0 100 100 build " " 20 30 h road "" 0 25 100 25 n road "" 80 0 80 100 w build " " 75 20 c Fig. 5.1 13
size ( ) 6 SVG GUI SVG AWK SVG 6.1 GUI size minx miny maxx maxy build [x,y] [x,y] road [x1,y1] [x2,y2] [x3,y3] size 0 0 400 385 build s " " 340 192-5 15 build s " " 315 215-5 15 build s " " 340 215-5 15 build s " " 19 133-18 -8 build s " " 40 125-7 15 build s " " 20 110-18 -8 build s " " 80 150-5 15 build s " " 133 133-18 -8 build s " " 145 133 5 3 build s " " 145 150-5 15 build s " " 50 222-5 15 build s " " 140 210-5 15 14
WWW build s " " 220 150-10 15 build s " " 250 150-5 15 build s " " 280 260-5 15 build s " " 240 235-15 -8 build s " " 270 240-18 -8 build s " " 285 175-5 15 road 3 "" 50 70 300 50 398 123 road 2 "" 2 142 272 142 398 100 road 1 "" 300 132 300 350 road 1 "" 280 180 390 180 road 1 "" 390 103 390 350 road 1 "" 200 30 200 350 road 1 "" 390 267 2 207 road 1 "" 30 80 30 212 6.2 SVG AWK build s 2 x y 2 x y 4 build s 340 192-5 15 <circle cx="340" cy="192" r="4" fill="blue"/> <text x="335" y="207" font-size="10" font-family="serif" fill="black"> </text> road 1 2 3 x y 15
Fig. 6.1 SVG squiggle squiggle batik SVG java 1 SVG squiggle batik WWW Apatch XML project java 7 HTML SVG SVG SVG HTML SVG squiggle PNG AWK HTML SVG 16
WWW HTML SVG 7.1 PNG AWK HTML HTML AWK build 2 2 x y PNG SVG 8 SVG SVG AWK 8.1 AWK SVG x y x y (minx,miny) (maxx,maxy) ($1 ~ /build/){ if($2 == "s"){ # 17
if(nf!= 7) next; # if($4<minx $5<miny) next; # if($4>maxx $5>maxy) next; # name = $3; gsub(/\"/,"",name); # " putshop($4,$5,$6,$7,name); } next; } Fig. 8.1 SVG squiggle 9 WWW SVG awk SVG squiggle SVG SVG Adobe SVG viewer 18
WWW SVG WWW HTML SVG PNG HTML squiggle Unix squiggle HTML awk SVG PNG SVG SVG 19
[1] SVG http://www.adobe.co.jp/svg/main.html [2] SVG http://www.summa.jp/tutorial/ [3] Tcl/Tk ( ) [4] HTML ( ) 20