このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい問題だ。そこでこのコーナーでは、TIPSご藤井 幸孝 川田 哲 大内 勇とにブラウザーの対応状況をアイコンで表している（12月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

インターネットエクスプローラ5.0の一般向けベータ版がついに公開された。IE
5はXMLなどの最新のマークアップ言語に対応しているだけでなく、HTMLや3.0スタイルシートにも新しいタグやプロパティーを追加している。このコーナーでも4.0

次号からIE 5用のスーパーテクニックを順次お伝えしていきたい。今月はIE 4でのアニメーション表示を中心としたTIPSをお届けしよう。

3.0

CD-ROM収録先 A Magnavi→Ip9902→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録！！

4.0

インターネットエクスプローラ3.0以上
インターネットエクスプローラ4.0以上
ネットスケープナビゲーター3.0以上
ネットスケープナビゲーター4.0以上

1月号「HTMLパズルに挑戦しよう」の解答
それほど難しくはないのだが，ある程度スタイルシートの知識が必要だったせいか、応募者は先月に比べて少なかった。しかし解答は単純なものだ。IE 4ではスタイルシートとスクリプトのプロパティー名が規則的に対応しているので、第1問は連想でも解ける。それではさっそく解答を発表しよう。

A N S W E R

1 フォントのサイズを変更せよ！

フォントの大きさを動的に変えるには、fontSizeプロパティーの値をスクリプト側で変更すればよい。サンプルのようにボタンで大きさを変えるようにするには次のようにする。
<SCRIPT LANGUAGE="JavaScript">size = 12;function sizechange (step) {size += step;
if (size < 12) size = 12; else if (size > 24) size = 24;
document.all.win.style.fontSize = size + "pt";}</SCRIPT><DIV ID="win" STYLE="position:relative; top:10; font-size: 12pt;
margin:2%; width: 96%; height: 50%; background-color: #e0ffff;">……</DIV><BUTTON TYPE="BUTTON" onClick="sizechange(-2);">フォントを小さく</BUTTON><BUTTON TYPE="BUTTON" onClick="sizechange(2);">フォントを大きく</BUTTON>A N S W E R

正解者：田中博英さん、町谷円さん、良知敬介さん、田中和也さん

2 表示部分にスクロールバーを付けろ！

この問題はスタイルシートの知識があるかどうかにかかっている。スタイルシートでoverflowプロパティーにscrollを指定すればよいだけだ。
<DIV ID="win" STYLE="position:relative; top:10; font-size: 12pt;
margin:2%; width: 96%; height: 50%; background-color: #e0ffff; overflow: scroll;">

274 INTERNET magazine 1999/2

正解者：田中博英さん、町谷円さん、良知敬介さん、田中和也さん

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

T IPS & T R ICKS

1
画像をズームアップさせる
4.0
左 のサンプルを見 てほしい。
「click here!」というリンクをクリックすると、最初は何もないところから画像が出現し、徐々にズームアップしていく。
「こんなこともできるんだ」と驚いた読者は多いことだろう。これはIE 4でできるテクニックで、画像の幅と高さを連続して増加させることでズームアップを表現しているものだ。
もちろん逆の処理を行えば、ズームダウンもできる。今までウェブページでズーミング処理を行おうと思ったら、ショックウェーブなどの高価なアプリケーションが必要だったが、このTIPS を使えば同じような表現が手軽にできる。
それでは、この演出効果絶大のテクニックを見てみよう。

d1
23<IMG SRC="title.gif" ID="title" STYLE="width: 0px; height: 0px"><A HREF="javascript:zoom()">click here !</A><SCRIPT LANGUAGE="JavaScript">function zoom() {if (title.style.pixelWidth < 500) {title.style.pixelWidth += 4; title.style.pixelHeight += 2;
setTimeout ("zoom()", 10);}}</SCRIPT>

まずソース1のように、IMGタグでズーミング

クセル、高さが2ピクセルずつ増えていく。これには2:1となっている。そのため、幅と高さを増減さ処理をする画像に「title」という名前（ID属性）とよって画像がズームアップしているように見えるのせる処理では4や2という単純な数値を指定できスタイルを指定する。このスタイル設定は画像のだ。画像の幅が500ピクセルになると、関数zoomる。単純な比率で表せない画像を使うと、増減さ初期状態を表している。今回は幅と高さをともには呼び出されなくなる。

せる数値が複雑になるので注意しよう。

ここでsetTimeoutの使い方を説明しておこう。

ズームダウンの処理も紹介しておこう。

0px（つまり非表示）にしてみた。
次はソース2のように、ズーミング処理の関数を呼び出すリンクを作成する。
最後にソース3のように、実際のズーミング処理

if ( title.style.pixelWidth < 0 ) {setTimeout ( "スクリプト", ミリ秒数 )title.style.pixelWidth -= 4;を行う関数を作成する。それではソース3の内容

title.style.pixelHeight -= 2;
setTimeout ("zoom ()", 10 );setTimeout は上記の形で呼び出す。指定した時を説明しよう。

間が経過すると、指定したスクリプトが実行される。
関数zoomでは、titleという名前を付けた画像の時間はミリ秒（1000分の1秒）単位で指定するこ

幅が500ピクセルより小さいときには、画像の幅とを覚えておいてほしい。

}
ズームアップの逆の処理をしているだけだ。1つの（style.pixelWidth）が4ピクセル加算され、高さ（style.pixelHeight）が2ピクセル加算される。さズーミング処理のポイントは、画像の幅と高さの比関数でズームアップとズームダウンを切り替えるこ

らにsetTimeoutで再びこの関数zoomが呼び出率 を整 数にすることだ。今 回 のサンプルでは幅ともできるが、JavaScript に慣れていない人は、され、10ミリ秒（1000分の10 秒）ごとに幅が4ピ500、高さ250の画像を使用しているので、比率それぞれを独立した関数にしてもいいだろう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DINTERNET magazine 1999/2275

T IPS & T R ICKS

2
半透明フィルターでフェードイン
4.0
先月号の発光アニメーションに引き続き、IE 4のビジュアルフィル
ターとJavaScriptを組み合わせたTIPSを取り上げる。今回はAlpha
フィルターを使ってフェードイン・フェードアウト効果を出してみよう。
以前に背景色や文字色をフェードイン・フェードアウトさせるTIPSを紹介したことがあるが、ある1色から別の1色への変化だったため、複数の色を使う場合はどうしてもスクリプトが複雑になるし、画像に効果を与えることもできなかった。今回のTIPSでは背景や文字はもちろん、画像にも効果を与えることができる。右のサンプルでは、ページを読みこむとフェードイン効果で写真が浮かび上がるように現れる。

d1<SCRIPT LANGUAGE="JavaScript">function Fadein() {if (SAMPLE.filters ["Alpha"].Opacity >= 100) {clearInterval (tID);} else {SAMPLE.filters ["Alpha"].Opacity += 5;
SAMPLE.filters ["Alpha"].FinishOpacity += 5;}}</SCRIPT>

2<DIV ID="SAMPLE"
STYLE="position: absolute; text-align: center;
A
Filter:Alpha (Opacity=0,FinishOpacity=0,Style=3);"><IMG SRC="taki.jpg" WIDTH=240 HEIGHT=320
B onLoad="tID = setInterval ('Fadein ()', 100);"><DIV STYLE="color: #0000ff; text-align: center;">「滝」</DIV></DIV>

このTIPS で使っているAlpha フィルターは、

まず、効果を与えるオブジェクト（ここではDIVタグ）

今回は、OpacityとFinishOpacityの2つのパラ文字や画像を半透明にするフィルターだ。Alphaに対してあらかじめAlphaフィルターをかける（ソーメータを同じ割合で変化させているが、これを違フィルターにはいろいろなパラメータがあるが、今ス2のA）。フェードインの場合は2つのパラメータう割合で変化させたり、Alphaフィルターの他の回スクリプトを使って変化させるパラメータは次のを0 に、フェードアウトの場合は100にする。そしパラメータを加えたりすると、フェードイン・フェー2つだ。て、パラメータの値を変える関数を一定時間ごとドアウトの見え方が変わってくる。に呼び出す。画像が読み込まれる前にフェードイ：開始地点の透明度

ン・フェードアウトが始まってしまわないように、最後に、Alphaフィルターのその他のパラメータにFinishOpacity ：終了地点の透明度

完全に読み込まれたときに発生するIMG タグのついて説明しておこう。

Opacity

onLoadイベントで関数を呼 び出せばよいだろう
それぞれの透明度には0から100までの数値を指（ソース2のB）
。

Style

：フィルターの形状（0：単一、1：線状、2：放射線状、3：長方形）定する。100が普通の状態で、数値を減らしていくとだんだん透明になっていき、0では完全に透明呼び出される関数の中では、OpacityとFinishStartX、StartYになり表示されなくなる。この2つのパラメータをOpacityの値を次々と変えていく（ソース1）。フ

FinishX、FinishY：終了地点のX、Y座標：開始地点のX、Y座標

同時に0から増やしていくとフェードインの効果を、ェードインでは増やしていき、フェードアウトでは100から減らしていくとフェードアウトの効果を作減らしていけばよい。フェードインでは100、フェー

開始地点と終了地点を指定すると、オブジェクトり出せる。

ドアウトでは0になったら、タイマーをクリアして関の一部だけに効果を与えることもできる。

数の呼び出しをやめる。

276 INTERNET magazine 1999/2

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

T IPS & T R ICKS

3
文字を回転させる
4.0
IE 4.0ではビジュアルフィルターのほかに、「ダイレクトアニメーション」を使えば少ないコードを入力するだけでさまざまな効果を生み出せる。今回ご紹介する文字の回転は、そのダイレクトアニメーションを使ったものだ。右のサンプルでは、文字が横方向にぐるぐると回転する。アニメーションGIFでも難しいことをやっているのがわかるだろう。パラメータの設定が少々面倒だったり、CPUにある程度のパワーがないと動作が多少重くなったりすることがあるが、いったんわかってしまえば回転の方向やスピードを変えたり、文字の内容や色を自由に指定したりするなどの応用が利くので、挑戦してみよう。

d<BODY onLoad="seq_init ()">
1
<OBJECT ID="sample" STYLE="width:600; height:300;"
CLASSID="clsid:369303c2-d7ac-11d0-89d5-00a0c90833e6"><PARAM NAME="Line0001" VALUE="SetFillColor (0,0,255)"><PARAM NAME="Line0002" VALUE="SetLineColor (255,255,255)"><PARAM NAME="Line0003" VALUE="SetFillStyle (1)"><PARAM NAME="Line0004" VALUE="SetLineStyle (1)"><PARAM NAME="Line0005" VALUE="SetFont ('Arial',90,900)"><PARAM NAME="Line0006" VALUE="Text ('HTML', -100, -20, 0)"><PARAM NAME="Line0007" VALUE="Text ('TIPS & TRICKS', -280, 60, 0)"></OBJECT><OBJECT ID="seq"
CLASSID="clsid:b0a6bae2-aaf0-11d0-a152-00a0c908db96"></OBJECT>2<SCRIPT LANGUAGE="JavaScript">3function RotateAll () {sample.Rotate (0,6,0);}4function seq_init () {seq ("ActionSet1").At (0.000, "RotateAll ()", -1, 0.05);
seq("ActionSet1").Play();}</SCRIPT>

SetLineStyle (1)：文字の縁を付ける

2番目のコントロール（ソース中の2）は、回転操動かすものだ。順番に説明していこう。

（0：なし、1：あり）
SetFillStyle (1)：文字に色を付ける

属性はそのまま入力すること。<PARAM>タグは1番目のコントロール（ソース中の1）では、回転

SetLineColor (255,255,255)：文字の縁の色

このTIPSは、<OBJECT>タグで2つのActiveXコントロールを配置して、それをJavaScriptで（0：なし、1：あり）させる文字の色や形状、配置をパラメータで決め（RGBで指定する）作を制御するもので、1番目と同様にCLASSID必要ない。
あとはJavaScriptで操作すればよい。関数Rotateていく。CLASSID属性は固有の値なのでこのま

SetFillColor (0,0,255)：文字の色All（ソース中の3）ではRotateメソッドでX軸方ま入力すること。また、スタイルシートのwidthと（RGBで指定する）
SetFont ('Arial',90,900)：フォントの種類

向、Y軸方向、Z軸方向の回転の角度を決める。

heightで表示する範囲を指定する。範囲外では文字は表示されないので注意すること。その下に、<PARAM>タグを使ってパラメータを次々と書いていく。NAME属性には「Line＋4桁の数字」と（フォント名、サイズ、太さ）
Text ('……', -100, -20, 0)：回転させる文字列（文字列、X回転軸、Y回転軸、Z回転軸）

いう形で1から順番に書き、VALUE属性にパラメ

これにより回転の仕方が変わる。
そして、関数seq̲init（ソース中の4）で回転の動作を制御する。Atメソッドの引数は、順にウェイト（秒数）、スクリプト、動作回数、インターバル（秒数）となる。ウェイトを指定すると、指定した秒数ータの値を書いていく。パラメータには次のもの「回転軸」と言われてもピンとこないかもしれない

後に動作が開始する。また、動作回数は何回動がある。

が、どこに文字を配置するかを決めるもので、中作させるかを指定するもので、-1で無限になる。

心を0とした相対位置で指定する。Z回転軸を指定すると文字を斜めに配置できる。

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

INTERNET magazine 1999/2277

T IPS & T R ICKS

4
データバインディング機能でデータベースを利用 その3
4.0
今回はデータベースシリーズの第3弾として、データベースレコードの並べ替えの方法を紹介しよう。
前回までのテクニックで、データフ
ァイルをHTMLとは別にして管理を容易にしたり、必要なデータをいつでも取り出したりできるようになったが、ウェブページの利用者にもっと喜んでもらうには、データを見やすく加工したほうがよい。並べ替え（ソート）は表計算などでもよく使われる必須の機能だ。右のサンプルでは、ページの下にあるリストからフィールド名を選んでどちらかのボタンを押せば、中央の表の学生データが自動的に昇順または降順に整列する。君のページにもソート機能を持たせてみよう。

d1<OBJECT ID="tdcStudent" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><PARAM NAME="FieldDelim" VALUE=","><PARAM NAME="DataURL" VALUE="database.csv"><PARAM NAME="UseHeader" VALUE="true"></OBJECT>

2<FORM NAME="sortform"><SELECT NAME="sortby"><OPTION VALUE="code">Student Code<OPTION VALUE="first">First Name<OPTION VALUE="last">Last Name：</SELECT>3<INPUT TYPE=BUTTON VALUE="SORT +(upward)"
onClick="tdcStudent.Sort =document.sortform.sortby.value;
tdcStudent.Reset ();"><INPUT TYPE=BUTTON VALUE="SORT (downward)"
onClick="tdcStudent.Sort ='-' + document.sortform.sortby.value;tdcStudent.Reset ();"></FORM>

今回も前回使った学生データのサンプルを元

ルド名1,フィールド名2,……」となっていたものにソートの実 行自体は非 常に簡 単だ。まずJ a v aにして解説しよう。データベースレコードのソート「フィールド名1: 型名,フィールド名2 : 型名,……」S c r i p t でデータコントロールオブジェクト（t d cは、データベースの各フィールドをキーにして実行のように型名情報を追加する。

Student）のSortプロパティーにキーとするフィールド名を入れる。

できる。このサンプルでは、学生番号、名前、身長などをキーにして、それらの順 に並べ替えがで

code:Int, first:String, last:String,

きる。ただし、フィールドをソートのキーとして使う

major:String, height:Int, weight:Int,には、ちょっとした細工が必要だ。

origin:String

前回、前々回ともに<OBJECT>タグ（ソースの1）

tdcStudent.Sort = "height";
次にResetメソッドを実行すれば、ソートが行われの中に<PARAM NAME="UseHeader"VALUE

型とはプログラミングでいう「変数の型」と同じで、ページが書き換えられる（ソースの3）。サンプル="true">という1行を入れ、CSVファイルの1行フィールドをどんなタイプの値とみなすかを指示すでは<SELECT>タグを使って<OPTION>タグの目をフィールド名の行とみなすように設定しているるものだ。Int、String、Booleanなどが使用でVALUE属性に対応したフィールド名でソートが行はずだ。

きる。ここでは「code」、「height」、「weight」をわれるようにしている（ソースの2）。さらに、キー'code','first','last','major','height','weight','origin'

整数型Intに、それ以外を文字列型Stringに設定とするフィールド名の頭に「-」を付けると降順のソしている。これでソートの準備が整った。Int のフートができる。

ィールドは数字順に、Stringのフィールドはあいう

2つ以上のフィールドをキーとする場合は、「;」でえお順やABC 順に並ぶはずだ。

区切って指定すれば、前のキーが順に優先されて並べ替えが行われる。

CSVファイルのこの1行目に手を加えよう。
「フィー278 INTERNET magazine 1999/2

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

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

今月のテーマJavaScript 1.3を制する
JavaScript にはバージョンがあることを知っているだろうか？ ネットスケープ社はナビゲーターをバージョンアップするたびに、JavaScriptもバージョンアップしてきた。
最近発表されたJavaScript 1.3はナビゲーター4.06以降および4.5「HTMLパズルに挑戦しよう」
宛 先で動作し、数々の改良が加えられている（今回のパズルの問題は、IE 4Dでも動作する）。そこで今月は最新のJavaScriptに挑戦していただく。

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

トリックがわかったらすぐに 解答を送ってきてほしい。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ JavaScript 1.3を制する にチャレンジ！

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

Q U E S T I O N

1 2000年問題に対応せよ！

4.06

4.0

JavaScriptを使って年を得ようとすると、下2桁の値になる。たとえば、1999年の場合は「99」が得られる。しかし、このままでは2000年になったときに年が「00」になってしまう。最近「コンピュータの2000年問題」などと題して各メディアが取り上げている問題をご存じだろう。これは、コンピュータで日付のデータを扱う際に年を下2 桁で処理すると、2000年が1999年より古いことになってしまい、コンピュータが誤った動作をしてしまう問題だ。JavaScriptで年を厳密に処理することはあまりないだろうが、「00」と表示するのはちょっと格好が悪い。この問題を解いて、君のホームページを2000年対応にしてしまおう。
ヒント

Q U E S T I O N

年を得るメソッドはgetYear、4桁の年を得るメソッドは……

2 1000分の1秒を取得せよ！

4.06

4.0

左のサンプルを見てほしい。時、分、秒のあとに3桁の数値が付いているのがわかるだろう。これは1000分の1秒を表している。1000分の1秒単位を求めるJavaScriptのメソッドにはgetTimeやUTCがあるが、このサンプルはこれらのメソッドから得られた値を変換して表示しているわけではない。実はたった1つのメソッドから値を直接得ることができるのだ。第1 問、第2 問ともに最新のJavaScriptを知っていれば簡単に解ける問題だ。
「最新だからわからない」と考えずに気軽な気持ちで取り組んでみよう。最新のJavaScriptはネットスケープ社のサイトで公開されているので、関連ページを調べて解答を送ってほしい。
ヒン
ト

秒を得るメソッドはgetSeconds、「1000分の1」を英語で言うと……

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

INTERNET magazine 1999/2279

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.