第 45 回

このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい問題だ。そこでこのコーナーでは、TIPSご

藤井幸孝／大内 勇／高橋登史朗とにブラウザーの対応状況をアイコンで表している（9月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

今月のCD-ROMは盛りだくさん。新しくアドビのSVG Veiwerを収録した。

4

インターネットエクスプローラ4以上

5

インターネットエクスプローラ5以上

5.5

インターネットエクスプローラ5.5以上

4

ネットスケープナビゲーター4以上

6

ネットスケープ6以上

Mozillaは最新のMilestone 18を収録したが、安定版ではなく毎日更新されている版（nightly build）なので、扱いには注意してほしい。
SVG Viewer初登場!!
CD-ROM収録先TIPSもすべて収録!!

Adobe SVG Viewer Win Å Win→SVG／Mac Å Mac→SVGView
Mozilla Milestone 18 ı Mozilla+CD-ROM
今月号のソース Å Magnavi→Ip0011→Htmltips

M18

Mozilla （数字はMilestoneの番号）

10月号「HTMLパズルに挑戦しよう」の解答
今回も出題にミスがあったことをお詫びしたい。IE 4ではこのスタイルシートは正確に表示できないようだ。
以下のソースはIE 5以上およびネットスケープ6とMozilla用に最適なものだが、「float」を使った解答なども正解とさせていただいた。

A N S W E R

1 イメージマップを取り替えろ！

6<DIV>タグでブロックを作り、「position: relative」を指定する。その中に配置するタグは、「position: abusolute」として座標を指定する。
<STYLE TYPE="text/css">#nav { position: relative; width: 380px; height: 250px; background: #FFAA50; }#anchor1 { position: absolute; top: 20px; left: 20px; }#anchor2 { position: absolute; top: 100px; left: 120px; }#anchor3 { position: absolute; top: 80px; left: 260px; }</STYLE>：<DIV ID="nav"><A ID="anchor1" HREF="index.htm"><IMG SRC="p1.gif" BORDER=0></A><A ID="anchor2" HREF="index.htm"><IMG SRC="p2.gif" BORDER=0></A><A ID="anchor3" HREF="index.htm"><IMG SRC="p3.gif" BORDER=0></A></DIV>A N S W E R

正解者：坂部和久さん、山口雅仁さん、冨園慎一郎さん、
Masahiko Murataさん、外山真さん、なるるさん、てらすさん、杉本知子さん、堀江さん2 左右に並べろ！

同じく<DIV>タグでブロックを作り、「position: relative」を指定する。その中に2つの<DIV>タグを置き、右側のものに「right」で座標を指定する。
<STYLE TYPE="text/css">#nav { position: relative; height: 200px; width: 100%; }#left { position: absolute; left: 8px; }#right { position: absolute; right: 8px; }</STYLE>：<DIV ID="nav"><DIV ID="left"><B>Browser</B>…… </DIV><DIV ID="right"><B>W3C</B>…… </DIV></DIV>

336 INTERNET magazine 2000/11

正解者：坂部和久さん、山口雅仁さん、冨園慎一郎さん、Masahiko Murataさん、外山真さん、なるるさん、てらすさん、堀江さん

インターネットマガジン／株式会社インプレスR&D

Mozilla（モジラ）：ネットスケープナビゲーターのニックネーム。1994年当時、人気のあったブラウザーMozaic（モザイク）を凌駕するという意味で名付けられた。現在Mozilla.orgで開発中の新ブラウザーもMozillaと呼ばれ、そのソースコードを元にして作られたブラウザーがネットスケープ6である。
©1994-2007 Impress R&D

T IPS & T R ICKS

1SVGで図形を動かす
45

5.5

4

SVG は、今年 8 月 2 日にW3C
で勧告候補が出されたウェブ用ベクターグラフィックスの標準規格だ。SVGを使うと、フラッシュのようなグラフィックスがテキストにタグを書くだけでできてしまう。
しかも、どんな大きな画像でもわずかなデータ量で済み、ウェブ標準であるJavaScriptでDOMを使って動かせる。SVGはまさにウェブデザインのための言語なのだ。
現在SVGを表示させるにはアドビのプラグインなどを入れる必要があるが、将来ブラウザーへの実装が進めば、ウェブデザインのスタイルもずいぶん変わっていくに違いない。
（高橋登史朗）d1<embed width="300px" height="200px" src="test01.svg"/>2<?xml version="1.0" ?><svg><rect id="rect1" style="fill: green"x="100" y="100" width="100" height="50"><animate attributeName="x" attributeType="XML"begin="0s" dur="5s" fill="freeze" from="200" to="0" /><animate attributeName="y" attributeType="XML"begin="0s" dur="5s" fill="freeze" from="200" to="0" /></rect></svg>SVGはScalable Vector Graphicsの略 だ。

<line>À

線

ソース2の A の<animate>タグ2つは、表示しXMLベースのベクター画像用言語でGIFやJPEG<poliline> 連結線た図形を移動したり変更したりするためのものなどのビットマップ画像と違って解像度と関係<polygon> ポリゴンで、ここではそれぞれa t t r i b u t e N a m e 属性になく小さなデータで高品位な表示が得られる。

< r e c t > タグのx とy を指 定 し、「f r o m = " 2 0 0 "ほかに文字を扱う<text>やフィルターなどもあto="0"」とすることで座標を変化させて画面左

ソース1はHTMLで書かれたページにSVGのファる。ソース2で取り上げた<rect>には、次のよ上端へ移動させている。もしフェイドイン効果をイルを読みんで表示させる<EMBED> タグだ。

うな属性を指定できる。

加えたければ、次の<animate>タグを加えるだ

width属性は表示領域の横幅、height属性は高さ、src属性はSVGファイルのURLだ。

けでいい。
x = "画面左端からの距離"
y = "画面上端からの距離"<animate attributeType="CSS"

ソース2 がSVG ファイルだ。xml 宣言のあとのwidth = "幅"attributeName="opacity"「<svg>〜</svg>」の部分がSVGの本体だ。図height = "高さ"

from="0" to="1"

形を表示する要素には次のものがある。

dur="5s" repeatCount="0" />塗りつぶしの色はCSSで「style="fill: green"」<rect>

四角形のようにすればいい。これでGIFなどを使わずに<circle>

円タグだけで緑色の四角形ができあがる。

<ellipse>

楕円図形の回転も1行追加するだけだ（CD-ROMのソースを参照）。SVGの仕様にはまだまだ無数のテクニックが隠されている。

インターネットマガジン／株式会社インプレスR&D

ベクターグラフィックス：1点ずつ色を記録するビットマップ画像と違い、「(0,0)から(100,100)まで線を引く」のように、画像を描画の命令で表したもの。ビットマップ画像よりもサイズが小さく、拡大や縮小をしても形が崩れないという利点があり、イラストや図形を保存するのに適している。
©1994-2007 Impress R&DINTERNET magazine 2000/11337

T IPS & T R ICKS

2
XULでタブをデザインする
M 18
9月号と10月号ではXULのメニ
ューとツリーを紹介した。こうしたインターフェイス部品は「ウィジェット」と呼ばれ、ほかにもスクロールバーやタブ、ボタン類、進捗メーターなどがある。今回紹介するタブはアプリケーション部品としておなじみだが、ウェブ上ではあまり見かけない。自分で一から作るのは手間がかかるのだ。
ダイナミックHTMLで作っている人もいるかもしれないが、そんな人はぜひこのコードを見てほしい。
XULのウィジェットではタグを書くだけだ。OS を縦断したアプリ
ケーション開発環境として進化しつつあるXULではタブを作るのも簡単だ。
（高橋登史朗）d1<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>

2<tabcontrol align="vertical"><tabbox align="horizontal"><tab value=" Page1 " selected="true"/><tab value=" Page2 " /><tab value=" Page3 " /></tabbox><tabpanel><button value="1 Close" oncommand="self.close()"/><text value="2"/><text value="3"/></tabpanel></tabcontrol>

タブを利用するXULファイルのソースを見てつまり、ウィジェットのデザインは自分で作ってみよう。 まず、 1 の「 h r e f = " c h r o m e : / /もよいし既製品を利用してもかまわないというこが置かれている。<tabbox>はクリックするタブ

navigator/skin/"」はMozilla自身のCSS定義のとだ。button.cssのほかにもたとえば、box.css、の耳の部分で、<tabpanel>はタブの中身だ。タ読み込みだ。こうすることで、ブラウザーと共通

c h e c k b o x . c s s 、r a d i o . c s s 、t r e e . c s s 、ブの中身にはボタンなどのウィジェットを置いたのデザインでXULページを組み立てられるので楽splitter.css、menubutton.css、menulist.css、り、<box>〜</box>で囲んで複数のウィジェッになる。しかし、Mozillaの初期設定のデザインmenu.cssなどがある。これらのCSSファイルは、トを置いたりできる（付録CD-ROMのtab03.xulが好 みに合 わないこともある。 そこで、 C D -M o z i l l a をインストールしたフォルダーで、参照）。もし、<tabbox>〜</tabbox>の間に3ROMに収録したサンプルのtab02.xulではタブのmozilla.exeというファイルが置かれたフォルダ

つの< t a b > を置 いたら、 < t a b p a n e l > 〜

CSSを自分で書き、ソース1の定義の代わりにーの下の「chrome」以下に置かれている。試し</tabpanel>の間にも対応する3つのウィジェッ

必 要 な定 義 だけ、つまりボタンのC S Sにファイル名で検索するとブラウザーそのもののト（ソース2では<button>や<text>など）を用（button.css）だけを次のように読み込んでいる。

デザインを定義しているCSSやjsファイルがぞろ意しよう。

</tabcontrol>の間に<tabbox>と<tabpanel>ぞろ出てくるので一度のぞいてみるといい。
<?xml-stylesheet

ちなみに、そうしたCSSファイルををいじってかそろそろXULに慣れてきたら、ハードディスクに

href="chrome://global/skin/button.css"

らMozillaを再起動すれば、オリジナルデザインある「chrome」フォルダーのファイルの研究を

type="text/css"?>のブラウザーが立ち上がるはずだ。

おすすめする。そこは、最新のJ a v a S c r i p t と<?xml-stylesheet

CSS 2、DOM 2にXUL、そしてXMLなどが現実

href="tab01.css" type="text/css"?>

338 INTERNET magazine 2000/11

ソース2 はタブの本 体 だ。< t a b c o n t r o l > とに稼動している最前線の宝箱なのだ。

インターネットマガジン／株式会社インプレスR&DCSS（シー・エス・エス／Cascading Style Sheets）：ウェブページの表示方法を決めるスタイルシートの1種。HTMLやXMLのタグに対し、色やフォント、枠線や余白などを指定できる。W3Cにより、CSS level 1とCSSlevel 2の標準勧告が策定されている。
©1994-2007
Impress R&D

T IPS & T R ICKS

3
重複送信を防止する455.5

6M17

掲示板やアンケートなどの入力フォームを運用している人は、投稿者の誤った操作で同じ内容のデータが連続して記録されてしまった経験があるだろう。ここでは、そうしたことを防止するための簡単なJavaScript を紹介しよう。
左はそのサンプルだ。左側はデー
タを送信する前の状態で、送信ボタンやラジオボタンなどが白い背景で入力可能になっている。右側は送信ボタンを押したあとの状態で、入力部分がグレーになり入力不可になっている。これだけの説明で理解できただろう。ここで紹介するスクリプトを使えば、データの重複送信を防止できるようになるのだ。
（大内 勇）

d1<SCRIPT LANGUAGE="JavaScript">function submitonce (theform) {if (document.all || document.getElementById) {for (i = 0; i < theform.length; i++) {var obj = theform.elements[i];obj.disabled = true;}}}</SCRIPT>

2<FORM onSubmit="submitonce(this)">

それではソースの説明をしよう。ソース1は、り返し処理されているフォーム内のi番目の要素

インターネットに慣れてない人は、データを送信入力を受け付けなくさせるJavaScriptだ。if文ののことで、それを変数「obj」に代入している。

したにもかかわらず、更新されたデータがブラウ

条件指定（かっこの中）は、この連載で何度も「obj.disabled」は、i番目の要素の入力可能とザーに表示されないので、何度も送信ボタンをク紹介したとおり、IE 4以降とネットスケープ6だ

不可を切り替えるもので、この値に「true」を指リックしてしまい、重複投稿になってしまうときけにスクリプトを適用するものだ。次のfor文の定すれば入力不可にできるのだ。

がある。このようなことを防止するためにぜひ使ってもらいたいTIPSだ。

中では、フォームに含まれる要素を変数「obj」として扱い、それを入力不可にしている。for文

ソース2 はソース1 の関数を呼び出す指定だ。

このTIPSの応用としては、最初にページを読みの繰り返しの回数には「theform.length」を指「onSubmit」は送 信 ボタン（<INPUT TYPE=込んだ時点では入力部分を入力不可にしておき、定しているので、フォームに含まれる要素の数だ"submit">）を押したときに発生するイベントで、注意書きなどを読んだあとに入力可能にする手け繰 り返 されることになる。 この部 分 はこのこれを処 理 するのがソース1 の関 数法がある。ソース1の「obj.disabled=true」のTIPSのポイントになるので、少し詳しく説明し「submitonce」になる。カッコ内の「this」は「true」を「false」にし、フォームの入力要素ておこう。

フォーム要素自身を表す。これはいろいろな場面（<INPUT>タグなど）に「DISABLED」属性をでよく見かける手法なので覚えておいたほうがい追加する。そして注意書きを読んだことを確認

var obj = theform.elements[i];いだろう。なお筆者の環境では、フォーム関連要するボタンでソース1の関数を呼び出せばいい。

obj.disabled = true;素の1つである<FIELDSET>タグを使うとうまく

もちろんこの場合は引数を渡すことができないの処理されないときがあったので、このタグを使う

で、「theform」の部分を自分のページにあった際は注意したほうがいいだろう。

ものに書き換えて適用しよう。

「theform.elements[i]」とは、for文によって繰

インターネットマガジン／株式会社インプレスR&D

フォーム：掲示板のコメントや検索サイトでのキーワードのように、ブラウザー上でユーザーが値を入力してサーバー上のプログラムに送信することで、対話的な機能を実現する仕組み。
HTMLでは<FORM>タグや<INPUT>タグを組み合わせて作成する。
©1994-2007 Impress R&D

INTERNET magazine 2000/11339

T IPS & T R ICKS

4ウィンドウを回転させる
455.5

46

M17

8月号で紹介したブラウザーのウィンドウをぐらぐらと揺 らすTIPSを覚えているだろうか。いた
ずら心でページのビジターたちをびっくりさせてみた読者もいることと思う。そんな君にもう1 つ新たな手品を紹介しよう。前回と同じく、ウィンドウを使ったびっくり箱だ。突然ブラウザーがぐるぐると回り出したとしたら！？ このソースには、いろいろと変更できる個所があるので自分でいじって試してほしいが、困った動きをしないことを確認したうえで公開するようにしよう。いたずらはびっくり＆ニヤリが基本だ。くれぐれもみんなを困らせないように楽しもう。
（藤井幸孝）

d1<SCRIPT LANGUAGE="JavaScript">
var i = 0;
var timerID = 0;function startRotate ( ) {i = i + 0.3;
leftwin = 10 * Math.sin (i);topwin = 10 * Math.cos (i);window.moveBy (leftwin, topwin);
timerID = setTimeout ("startRotate ( )", 120);}
function stopRotate ( ) {clearTimeout (timerID);}</SCRIPT>

2<A HREF="#" onClick="startRotate ( )">Rotate ?</A> or<A HREF="#" onClick="stopRotate ( )">Stop ?</A>

サンプルで遊んでもらえればわかるが、画面

ソース2の「Rotate ?」のリンクからソース1の「Math.cos(i)」にそれぞれ掛けている数字（ここの「Rotate ?」の文字をクリックすると、ブラウ関数「startRotate」が呼び出される。この関数

では10）は、回転の円の大きさに関係している。

ザーが突然ぐるぐると回り出す。
「Stop ?」をクは、おなじみのsetTimeoutで繰り返し呼び出さ

数値を大きくすると円は大きくなり、0にするとリックすれば、 回 転 は止 まる。 もう一 度れる。 「startRotate」では、「moveBy」を使回転しなくなる。これも大きすぎるとデスクトッ「Rotate ?」でまた回り出す。予告されていてもって単純にブラウザーの位置を少しずらしている

プからブラウザーがはみ出てしまうので、5から驚いたのではないだろうか。

だけだ。ブラウザーの左上隅が、現在の位置か20程度がいいだろう。なお、この数字はサインら左右にleftwin、上下にtopwinだけ移動する。とコサインで同じでなくてもよい。同じ数値なら

このTIPSでは、数学でおなじみのサインとコサイ

leftwinとtopwinの値は、サインとコサインの値

回転は真円になるが、違う場合は楕円になる。

ンを使っている。といっても難しいことはない。に一定の整数を掛けただけ。これでなぜ回転運

これもまた面 白 いかもしれない。 最 後 に

J a v a S c r i p t で用 意 されている「 M a t h . s i n 」

動になるかというと、サインとコサインには-1かsetTimeoutに指定するタイマーの値だが、これ「Math.cos」を使えば、数学がわからなくたってら1の間だけで増減する性質があるからだ。数学も回転速度に関係する。1000 分の1 秒単位でブラウザーを回せるからだ。ただし気を付けてほが得意な読者は、ピンと来ただろうか。

100から300あたりがいいだろう。

しいのは、ここで紹介する数値のいくつかを変更

さて、注 意 すべき数 値 だが、まず変 数 「i 」に関数「stopRotate」では、回転のためのタイマし過ぎると、ブラウザーが画面からはみ出たり、順々に足す数字（ここでは0.3）だ。iはサインとーを止めている。回転を大きくしている場合はメ回転が速すぎたりして、ウェブを見ている人を困コサインの関数の中で使われるのだが、大きくすニューバーが画面外に出てしまうこともあるのらせてしまうことになる。これから説明する注意

ると回転速度が速まり、小さくすると遅くなる。

で、「window.moveTo (0,0);」を付け加えて、を忘れずに試してみよう。

0.2 から0.5 程度が適当だ。「M a t h . s i n ( i ) 」とスクリーンの左端に戻すのもいいだろう。

340 INTERNET magazine 2000/11

インターネットマガジン／株式会社インプレスR&D

関数：プログラミング言語で、一定の処理を独立させて記述した部分。言語によっては「プロシージャー」や「メソッド」などとも呼ばれる。引数を計算して値を返したり、何度も行われる処理を1つにまとめたりするのに使われる。
©1994-2007 Impress R&D

HTMLパズルに挑戦しよう
隠されたトリックを解き明かせ！

今月のテー

マ

SVGの初歩を制する大好評発売中！

SVG Viewerをインストールして1番目のTIPSを試してみたかな？ サンプルを試すだけでなく、自分でも最先端のグラフィックス機能を使っていろいろな図形を描いてみよ「HTMLパズルに挑戦しよう」
宛 先う。SVGはW3Cで策定されている標準規格なので、今後おおいに普及していくことが予想できる。今からいち早く使いこなせるようになってDおけば、将来だれよりも先を行くグラフィックスの達人になれるだろう。

正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

そこで今月のパズルでは、簡単なSVGに挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ SVGの初歩を制する にチャレンジ！

m im-html@impress.co.jp
なお、締め切りは10月10日とさせていただく。

Q U E S T I O N

1 図形と文字を描画せよ！

4

5

5.5

4

それではさっそくSVGを書いてみよう。第1問は、楕円と四角、それにテキストを描画してみるだけの簡単なサンプルだ。単に図形を描くだけでなく、図形の内側を好みの色で塗りつぶして、枠線にも色と太さを指定してみよう。タグや属性、CSS がわからなければ、W3C の仕様書

Jump 01

や同じくW3Cが作ったサンプルページ「Test Suite」

びアドビのサイト
Jump 01
Jump 02
Jump 03ヒント

Q U E S T I O N

Jump 03

Jump 02、およ5.5

4を見てみよう。

www.w3.org/TR/2000/CR-SVG-20000802/
www.w3.org/Graphics/SVG/Test/
www.adobe.co.jp/svg/

楕円は<ellipse>、四角は<rect>……

2 図形を透明化せよ！

45

この連載で何度も紹介してきたとおり、IE 4以上ではフィルター機能を使って画像やテキストを半透明にできる。この機能を使うと、いちいち重たい画像を作成しなくても、さまざまな効果的を簡単に表現できる。
ただし、ナビゲーターは対応していないし、IEでもマッキントッシュ版は対応していない。ところが、SVGの規格には最初から透明化の指定方法が含まれているのだ。SVGが普及すれば、ウィンドウズだけでなく、マッキントッシュやLinuxでも透明化機能を活用したページデザインができるようになるだろう。実現方法はいたって簡単。CD-ROMに収録した1番目のTIPSのソースを眺めてみるといいだろう。
ヒント

CSSで、あるプロパティーを設定する……

インターネットマガジン／株式会社インプレスR&D

W3C（ダブリュー・スリー・シー／World Wide Web Consortium）：WWWの発展との相互運用性の確保のために、企業や研究所、大学をメンバーとして設立された世界的な組織。HTMLやCSS、XMLの仕様書を勧告として公開している。
©1994-2007 Impress R&D

INTERNET magazine 2000/11341

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.