11月号「HTMLパズルに挑戦しよう」の解答
テーブルを使った基本的な技だったが、応募者が少なかったのは残念だ。第1問の2つの属性は、現在マイクロ
ソフトのサイトのリファレンスにも掲載されていないためだろうか。HTML TIPS & TRICKSの単行本では、27
ページの「好みの色で表の陰影を付ける」で紹介されている。
問題だ。そこでこのコーナーでは、TIPSご
とにブラウザーの対応状況をアイコンで表
している（10月10日現在）。これを参考に
使用するWWWブラウザーを選んでほしい。
先月発売されたこの連載の単行本「ホームページ裏ワザ大全 HTML TIPS
& TRICKS」はもう購入したかな？ おかげさまで売れ行きは好調だ。単行本
が発売されてもこの連載はまだまだ続くので、本を読みながら連載の新しいテ
クニックを毎月チェックすれば、自分の技をさらにパワーアップできるぞ。それ
では今月もさまざまなTIPSとTRICKSをお届けしよう。
誰よりも早く
最新のHTMLを使ってみたい
正 解 者 ： 加 藤 秀 一 さん、よしともさん、うおまさ @homeさん、谷口勝宣さん、齊藤貴志さんインターネットエクスプローラ3以上
3インターネットエクスプローラ4以上
4インターネットエクスプローラ5以上
5ネットスケープナビゲーター3以上
3ネットスケープナビゲーター4以上
4A N S W E R
1
セルの右側に画像を並べろ！
スタイルシートを使って<TD>タグにbackgroundプロパティーで背景画像、並べる方向、
並べる位置を指定する。画像ファイルは「url (ファイル名)」とし、縦方向にだけ並べるには
「repeat- y」を、右側に並べるには「right」を指定する。
A N S W E R
2
正解者：加藤秀一さん、Kumeuchi Akiraさん、よし ともさん、うおまさ@homeさん、谷口勝宣さん、齊 藤貴志さん <STYLE TYPE="text /css">TD { color: white; border-width: 8px; padding: 2 24 2 24; } </STYLE>
:
<TABLE BORDER FRAME="void"
BORDERCOLORDARK="#800000" BORDERCOLORLIGHT="#FF8000" CELLSPACING=0 ALIGN="center">
<STYLE TYPE="text /css">
TD { color: #FF8000; background: url ( puzzle2.gif ) repeat-y right; } </STYLE>
藤井幸孝／大内 勇
CD-ROM収録先 A Magnavi→Ip9912→Htmltips 今月号のTIPSをすべてCD-ROMに収録!!外枠のない表を作れ！
外枠のない表を作るには、<TABLE>タグのFRAME属性に「void」を指定する。枠線
の明るい部分の色は「BORDERCOLORLIGHT」属性で、暗い部分の色は「BORDER
COLORDARK」属性で指定できる。さらにIE 4以降ではスタイルシートで「border-width」
を指定すると枠線が太くなる。
+CD-ROM +CD-ROM<SCRIPT LANGUAGE="JavaScript"> function loadCounter ( ) { oCounter.load ( "MyData" ); v = oCounter.getAttribute ( "count" ); if (v) oCounter.innerText = Number (v) + 1; } function saveCounter ( ) {
oCounter.setAttribute ( "count", oCounter.innerText); oCounter.save ( "MyData" ); } </SCRIPT>
3
<BODY onLoad="loadCounter ( )" onUnload="saveCounter ( )"> あなたは<SPAN CLASS="ud" ID="oCounter">1</SPAN> 回このページに来てくれました。
<STYLE TYPE="text/css">
SPAN.ud { behavior: url (#default#userData ); } </STYLE>
1
2
訪れた人の数を記録するアクセ
スカウンターを自分のページに付
けている人は多いだろうが、訪れた
人がそれぞれ何回ずつページを見
たかを表示するには、クッキーを使
わなければならない。しかし、CGI
やJavaScriptでクッキーを扱うの
はなかなか面倒だ。クッキーの構
文をいちいち解析する必要がある
からだ。ところが左のサンプルで
は、クッキーを一切使わずにページ
を見た人の訪問回数を表示してい
る。いったいどうやっているのだろ
う。IE 5で追加された新機能を使
えば、訪問回数のようにページを
表示したときのデータを記録して、
再び表示したときにそのデータを
取り出すことが簡単にできるのだ。
訪問した回数を記録する
5
d
ページ中のデータを保存するには、先月号の 「指 定 のページをホームページにする」と同じく DHTML ビヘイビアを使えばいい。まずソース1 のようにスタイルシートを使って、「SPAN.ud」つ まり「ud」というクラス名の<SPAN>タグに機能 を加える。behavior プロパティーに「url (#default #userData )」という値を指定すれば、データ保存 機能が追加されることになる。 ソース2では、訪問回数を表示するための<SPAN> タグにクラス名「ud」を指定してデータ保存機能を 追加している。また、スクリプトで扱えるように「o Couter」というID 名を付けた。ここでは表示用の タグとデータ保存機能付きのタグを同じにしてい るが、別のタグでもかまわない。<BODY>タグに はonLoadイベントとonUnloadイベントを指定し て、ページを読み込んだときとページを閉じたとき にスクリプトが呼び出されるようにする。 ソース3は、ページを読み込んだときに訪問回数 を表示する関数「loadCounter」と、閉じたときに 訪問回数を保存する関数「saveCounter」だ。ま ずsaveCounterから見てみよう。「setAttribute」 はDHTMLビヘイビアによって<SPAN>タグに加 えられたメソッドで、データを指定するものだ。引数 にはデータの名前とデータの値を入れる。ここでは データ名を「"count"」とし、その値を「oCounter. innerText」、つまり現在表示している訪問回数と した。データの名前と値は次のようにいくつでも 指定できる。 oCounter.setAttribute ("email", "[email protected]"); oCounter.setAttribute ("nickname", "TipsTricker"); 次の「save」メソッドで指定したデータが実際に 保存される。saveメソッドの引数「"MyData"」は、 ひとまとまりのデータ全体の名前だ。 いったんこのページを閉じてから再びページを読 み込むと、関数 l o a d C o u n t e r が呼 び出される。 loadメソッドでデータ全体を読み込んだら、get Attributeメソッドで「"count"」のように名前を付 けたデータを1つずつ読み出せる。取り出したデ ータに1を加えて<SPAN>タグのinnerTextに入 れれば、訪問回数が表示される。データの値は文 字列なので、数値に変換してから計算すること。 上記のソースには載せていないが、前回ページを 閉 じたときの日付 も記 録 して表 示 させている。 CD-ROMに収録したソースを見てみよう。<A HREF="index.htm"
onMouseOver="roundimg ( photo);" onMouseOut="roundimg ( photo);"> <IMG SRC="tips2a.jpg" NAME="photo"></A>
2
<SCRIPT LANGUAGE="JavaScript1.1">
imag = new Array ("tips2a.jpg", "tips2b.jpg", "tips2c.jpg"); im = new Array ( );
for (var i = imag.length; i > -1; i--) { im [ i ] = new Image ( );
im [ i ].src = imag [ i ]; }
var j = 1;
function roundimg ( imgname ) { imgname.src = im[ j % 3 ].src; j = j +1;
}
</SCRIPT>
1
TIPS & TRICKS の読者にはお
なじみのテクニックの1つに、マウ
スカーソルの移動で画像を入れ替
えるというものがある。最近では
リンク用の画像や個人のデジカメ
ギャラリーなどでも定番のテクニ
ックになってきた。そこで今回は、
このテクニックにもうひと工夫加え
て、3 つの画像を順番に入れ替え
る方法を紹介してみよう。左のサン
プルでは、写真の上にマウスカーソ
ルを載せたりカーソルをはずしたり
するたびに、3 枚の写真が順に切り
替わって表示される。2枚の画像を
入れ替える例ならよく見かけるが、3
枚ならぐっと新鮮な効果が出せる。
マンネリになってきた君のギャラリ
ーもこれでデザイン一新だ。
d
画像を入れ替えるテクニック自体は、画像が2 枚の場合とまったく同じだ。まず、画像がきれいに 表示されるように、あらかじめ3枚の画像をブラウ ザーに読み込ませておこう。ソース1を見てほし い。使 いたい3 個の画像ファイルの名前を配列 「imag」に覚えさせたら、それを使って画像の配列 「im」を作り、すべての画像を読み込ませる。 「im [ i ] = new Image ();」で画像オブジェクトを準備し、「im [ i ].src = imag [ i ] ;」で画像のファイル 名を当てはめればいい。この方法は画像 2枚を切 り替えるときにも使える技だ。こうしておくと、切 り替えたときにダウンロードが始まって×印アイ コンが表示されることがなくなる。 続 いて画像 3 枚を扱う場合の特有のソースを説 明しよう。変数「j」は、ちょっとしたおまじないだ。 初期値を1にしておこう。次に「roundimg」とい う関数を作る。引数の「imgname」は、関数を呼 び出すときに対象となる<IMG> タグの名前を入 れることになる。関数の中の1行目で「imgname. src」に先ほど作った配列imの1つを当てはめる。 ここでのポイントは、「im [ j % 3 ] 」で j の値によっ て違う画像が当てはめられることだ。「%」は「∼ で割った余り」という意味の演算子だ。 関数の 2 行目を見てほしい。j に1を加えている。 変数 j は、ページが開かれてからずっと生き残って いるものなので、関数roundimgが呼ばれるたび に、j の値は1ずつ大きくなっていることがわかるだ ろう。jを3で割った数値は、「1、2、0、1、2、0、 ……」と順番に変化する。つまり「imgname.src」 には、配列 imの3つの画像が、順番に当てはめら ることになるわけだ。 最後に、入れ替えの対象にするソース2の<IMG> タグを見てみよう。SR C 属性には、配列imに最 初に入れた画像のファイル名を書いておくといい だろう。名前は適当に（ここでは「photo」）付け る。サンプルでは「onMouseOver」と「onMouse Out」の 2つのイベントで 関数roundimgを呼 び 出している。これでマウスが画像の上に乗ったり はずれたりしたときに、画像が順々に入れ替わる。 この方法のよいところは、一度onMouseOverで 表示された画像は、次回はonMouseOutで表示 されることだ（なぜなら3は奇数だから）。2 枚を入 れ替える場合のように、右クリックでの画像の保 存ができなくなることがない。もちろんonMouse Over のときだけ画像を入れ替えるようにするのも いいだろう。
function toHex (n) { if (n < 0) return "00"; else if (n > 255) return "ff";
else return Math.floor (n / 16).toString (16) + (n % 16).toString(16);
}
function setbgCol ( ) {
var r = document.layers ["redIndicator"].left; document.bgColor = "#" + toHex ( r ) + "0000"; document.colVal.col.value = "現在の背景色：" + document.bgColor; } function init() { document.layers ["redScale"].captureEvents (Event.MOUSEDOWN | Event.MOUSEUP);
document.layers ["redScale"].onmousedown = redMove; document.layers ["redScale"].onmouseup = setbgCol; }
function redMove (event) { var r = event.layerX; document.layers ["redIndicator"].moveTo (r,100); }
みなさんはページの色を決める
ときに何を参考にするだろうか。ウ
ェブページや参考書などの色見本
を参照して色を決定していると思
う。しかし、そうした色見本はせい
ぜい216色程度しか掲載していな
いものがほとんどだ。ご存じのとお
り、HTMLではRGBの指定によっ
て16（0∼f）の6乗（約1677万）の
数の色が使える。とは言っても、テ
キストエディターで色を指定すると
きは、少し薄い赤色を使おうと思
って「fa0000」と書いてもその色
をイメージできるだろうか？ 結局
は実際にブラウザー上で色の確認
をすることになる。そこで今回は
ページを製作する際にぜひ使って
ほしいTIPSを紹介しよう。
背景色を自在に設定する
4
d
まず最初にお断りしておく。上記の画面では 赤、緑、青の各色の要素のインジケーターを表示 しているが、ソースに関しては誌面の都合により 赤色の処理だけ掲載した。説明も赤色の部分だ けとするが、ほかの色の処理も基本的に同じやり 方なので、このコーナーの読者ならすぐに理解 で きるだろう。 まずはソース2だ。関数「init」ではマウスイベン トの設定をしている。今回はマウスボタンを押し 下げたとき（onmousedown）と上げたとき（on mouseup）のそれぞれのイベントで別の関数を呼 び出すように指定している。 関数「redMove」はマウスボタンを押したときに 呼び出される関数で、レイヤーで作ったインジケー ターを移動している。 関数「toHex」は関数「setbgCol」から呼び出さ れるので、これについてはあとで説明する。関数 「setbgCol」を先に説明しよう。ここでは、ID名 を「redIndicator」と付けたレイヤーの左座標を 変数「r」として扱っている。redIndicatorレイヤ ーは｢redScale｣ レイヤーの上を移動するので、r の値は0から255 までの間で変化することになる。 次の文は背景色を設定する処理で、関数 toHex に変数 rを渡したときの戻り値を設定している。最 後に背景色を文字列として確認できるように、1 行テキストボックスに書き出している。 それでは関数toHexの中身を見てみよう。この関 数では、関数setbgCol から渡された引数を元に 条件処理をして、結果を16 進数にして返している。 注目してほしいのは、最終的に「document.bg Color」を設定するのに使うので、計算結果を文 字列にしていることだ。ある数値を文字列にした い場合は、数値 に「toString ( )」を付ければいい が、ここでは16進数なので0∼fが得られるように 「toString (16)」としている。 ソース1は、スケール用の画像とインジケーター 用の画像を載せる2つのレイヤーを指定している。 ID名｢redScale｣ のレイヤーと、載せている画像 「scale.gif」の幅を255に指定していることがわか るだろう。これはインジケーターの移動領域にな るので、必ず255を指定しよう。 以上が赤色を処理するソースの説明だ。緑色と 青色を含めたこのスクリプトの全ソースは、本誌 の付録CD-ROMに収録しているので参照してほ しい。 <FORM NAME="colField"><INPUT TYPE="text" NAME="col" SIZE="20"> </FORM>
<LAYER ID="redScale" TOP="100" WIDTH="255"> <IMG SEC="scale.gif" WIDTH="255" BORDER="0"> </LAYER>
<LAYER ID="redIndicator" TOP="100" onLoad="init ()"> <IMG SRC="indicator.gif" BORDER="0">
</LAYER>
1
d
このコーナーの読者なら、自分
のホームページに現在の時刻を表
示する時計を付けている人は少な
くないだろう。それでは「その時計
はどんなタイプ？」と聞かれれば、
「デジタル時計」と答えるだろう。そ
こで今回は、ホームページではま
ったく見かけることのない、アナロ
グ時計を作るテクニックを紹介し
よう。先月号のこのコーナーでレ
ーダー画面のようなアニメーション
表 示をするスクリプトを紹 介した
が、あのテクニックはこのアナログ
時計を説明するための導入でしか
なかったのだ。ここでは先月のスク
リプトを大幅に改造して「アナログ
時計」という、古典的でありながら
斬新な演出に挑戦してみよう。
先月号のレーダーアニメーションとソースが似 ていることに気付いただろう。先月号では光源を 単純に回転させているだけだったが、今回は光源 の回転を現在の時刻（時、分、秒）の値を基準と して処理してみた。これがアナログ時計を作る発 想の源だ。 まずはソース1から説明しよう。変数「r」と「conv」 は先月と同じで、それぞれ光源の中心の値と角度 の数値を変換するのに使う値だ。 関数「rotate」では、最初に時、分、秒を得て、 それぞれの値を角度に変換して変数「degSec」、 「degMin」、「degHour」に入れている。さらに、 この値を元にサインとコサインを計算し、光源が 照 射 する対 象 になる座 標「x S e c 」、「y S e c 」、 「xMin」、「yMin」、「xHour」、「yHour」を決めている。 「moveLight」メソッドがある行では、ID名「clock」 の画像の上で光源が照射する方向を移動させて いる。かっこ内に光源が照射する先の座標を入れ れば、時針、分針、秒針を模した光が移動するよ うになる。かっこ内の引数の詳細については先月 号を参照してほしい。 関数「rotate」の最後では、setTimeoutを使って 1000ミリ秒（1秒）ごとに自分自身の関数（rotate） を呼び出すようにしている。関数「rotate」が呼び 出されるたびに現在の時刻を取得するので、それ に伴って角度の値が変わり、最終的に光を照射す る方向も変わるのだ。 次はソース2を見てみよう。関数「init」はソース 3の画像が読み込まれたとき一度だけ実行され るもので、「addCone」メソッドで順に「画像全体 を照らす光源」、「秒針を模した光源」、「分針を模 した光源」、「時針を模した光源」をID名「clock」 の画像に追加している。addConeメソッドの引数 についても、先月号で説明しているので参照して ほしい。 光源をすべて設定し終わったあとに関数rotateを 呼 び出しているので、光源の照射する方向を移動 させる関数に処理が移るのだ。 最後はソース3なのだが、これは説明するまでも なく普通の<IMG>タグにスタイルシートとID名を 設定して、画像を読み込んだとき（onLoad）に関 数「init」を呼び出しているだけだ。 以上でアナログ時計スクリプトは完成だ。さっそ く自分のホームページに組み込んで、訪問者を驚 かせてみよう。
5
4
function init ( ) { clock.filters [0].addCone (111,108,1000,104,104, 155,155,155,100,300); clock.filters [0].addCone (111,108,0,0,0,155,155,0,100,1); clock.filters [0].addCone (111,108,2,0,0,0,255,255,100,2); clock.filters [0].addCone (111,108,5,0,0,0,0,255,100,5); rotate ( ); }2
<IMG SRC="clock.gif" ID="clock" onLoad="init ( )" STYLE="height: 200px; width: 200px; filter:light ( )">
3
var r = 100;
var conv = ( 2 * Math.PI ) /360; function rotate ( ) {
var now = new Date ();
var degSec = now.getSeconds ( ) * 6 - 90; var degMin = now.getMinutes ( ) * 6 -90 ; var degHour = now.getHours ( ) * 30 -90 ; var xSec = r + r * Math.cos (degSec * conv); var ySec = r + r * Math.sin (degSec * conv); var xMin = r + r * Math.cos (degMin * conv); var yMin = r + r * Math.sin (degMin * conv); var xHour = r + r * Math.cos (degHour * conv); var yHour = r + r * Math.sin (degHour * conv); clock.filters [0].moveLight (1,xSec,ySec,0,1); clock.filters [0].moveLight (2,xMin,yMin,0,1); clock.filters [0].moveLight (3,xHour,yHour,0,1); timerID = setTimeout ( 'rotate ( )', 1000); }
