HTML TIPS TRICKS 第34回 訪問した回数を記録 - インプレス RD

第 34 回
このコーナーを楽しむために
最新のHTMLを使う際に、どうしても避けて
通れないのがWWWブラウザーの互換性の
誰よりも早く
最新のHTMLを使ってみたい
問題だ。そこでこのコーナーでは、TIPSご
藤井幸孝/大内 勇
とにブラウザーの対応状況をアイコンで表
している(10月10日現在)。これを参考に
使用するWWWブラウザーを選んでほしい。
先月発売されたこの連載の単行本「ホームページ裏ワザ大全 HTML TIPS
3
& TRICKS」はもう購入したかな? おかげさまで売れ行きは好調だ。単行本
が発売されてもこの連載はまだまだ続くので、本を読みながら連載の新しいテ
4
クニックを毎月チェックすれば、自分の技をさらにパワーアップできるぞ。それ
5
では今月もさまざまなTIPSとTRICKSをお届けしよう。
3
CD-ROM収録先 A Magnavi→Ip9912→Htmltips
+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!
4
インターネットエクスプローラ3以上
インターネットエクスプローラ4以上
インターネットエクスプローラ5以上
ネットスケープナビゲーター3以上
ネットスケープナビゲーター4以上
11月号「HTMLパズルに挑戦しよう」の解答
テーブルを使った基本的な技だったが、応募者が少なかったのは残念だ。第1問の2つの属性は、現在マイクロ
ソフトのサイトのリファレンスにも掲載されていないためだろうか。HTML TIPS & TRICKSの単行本では、27
ページの「好みの色で表の陰影を付ける」で紹介されている。
A N S W E R
1
外枠のない表を作れ!
外枠のない表を作るには、<TABLE>タグのFRAME属性に「void」を指定する。枠線
の明るい部分の色は「BORDERCOLORLIGHT」属性で、暗い部分の色は「BORDER
COLORDARK」属性で指定できる。さらにIE 4以降ではスタイルシートで「border-width」
を指定すると枠線が太くなる。
<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">
A N S W E R
正 解 者 : 加 藤 秀 一 さん、よしともさん、うおまさ
@homeさん、谷口勝宣さん、齊藤貴志さん
2 セルの右側に画像を並べろ!
スタイルシートを使って<TD>タグにbackgroundプロパティーで背景画像、並べる方向、
並べる位置を指定する。画像ファイルは「url ( ファイル名 )」とし、縦方向にだけ並べるには
「repeat- y」を、右側に並べるには「right」を指定する。
<STYLE TYPE="text /css">
TD { color: #FF8000; background: url ( puzzle2.gif ) repeat-y right; }
</STYLE>
302
INTERNET magazine 1999/12
正解者:加藤秀一さん、Kumeuchi Akiraさん、よし
[email protected]
藤貴志さん
インターネットマガジン/株式会社インプレスR&D
©1994-2007 Impress R&D
T IPS & T R ICKS
1
訪問した回数を記録する
5
訪れた人の数を記録するアクセ
スカウンターを自分のページに付
けている人は多いだろうが、訪れた
人がそれぞれ何回ずつページを見
たかを表示するには、クッキーを使
わなければならない。しかし、CGI
やJavaScriptでクッキーを扱うの
はなかなか面倒だ。クッキーの構
文をいちいち解析する必要がある
からだ。ところが左のサンプルで
は、クッキーを一切使わずにページ
を見た人の訪問回数を表示してい
る。いったいどうやっているのだろ
う。IE 5で追加された新機能を使
えば、訪問回数のようにページを
表示したときのデータを記録して、
再び表示したときにそのデータを
取り出すことが簡単にできるのだ。
d
1
3
<STYLE TYPE="text/css">
SPAN.ud { behavior: url ( #default#userData ); }
</STYLE>
2
<BODY onLoad="loadCounter ( )"
onUnload="saveCounter ( )">
あなたは
<SPAN CLASS="ud" ID="oCounter">1</SPAN>
回このページに来てくれました。
<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は、ページを読み込んだときに訪問回数
次の「save」メソッドで指定したデータが実際に
「指 定 のページをホームページにする」と同じく
を表示する関数「loadCounter」
と、閉じたときに
保存される。saveメソッドの引数「"MyData"」は、
DHTML ビヘイビアを使えばいい。まずソース1
訪問回数を保存する関数「saveCounter」
だ。ま
ひとまとまりのデータ全体の名前だ。
のようにスタイルシートを使って、
「SPAN.ud」つ
ずsaveCounterから見てみよう。
「setAttribute」
まり
「ud」というクラス名の<SPAN>タグに機能
を加える。behavior プロパティーに「url (#default
#userData )」という値を指定すれば、データ保存
はDHTMLビヘイビアによって<SPAN>タグに加
いったんこのページを閉じてから再びページを読
えられたメソッドで、
データを指定するものだ。引数
み込むと、関数 loadCounter が呼 び出される。
にはデータの名前とデータの値を入れる。ここでは
loadメソッドでデータ全体を読み込んだら、get
機能が追加されることになる。
データ名を「"count"」とし、その値を
「oCounter.
Attributeメソッドで「"count"」のように名前を付
ソース2では、
訪問回数を表示するための<SPAN>
innerText」
、つまり現在表示している訪問回数と
けたデータを1つずつ読み出せる。取り出したデ
タグにクラス名「ud」
を指定してデータ保存機能を
した。データの名前と値は次のようにいくつでも
ータに1を加えて<SPAN>タグのinnerTextに入
追加している。また、スクリプトで扱えるように「o
指定できる。
れれば、訪問回数が表示される。データの値は文
字列なので、数値に変換してから計算すること。
Couter」というID 名を付けた。ここでは表示用の
タグとデータ保存機能付きのタグを同じにしてい
るが、別のタグでもかまわない。<BODY>タグに
はonLoadイベントとonUnloadイベントを指定し
て、ページを読み込んだときとページを閉じたとき
oCounter.setAttribute ("email",
"[email protected]");
oCounter.setAttribute ("nickname",
"TipsTricker");
上記のソースには載せていないが、前回ページを
閉 じたときの日付 も記 録 して表 示 させている。
CD-ROMに収録したソースを見てみよう。
にスクリプトが呼び出されるようにする。
インターネットマガジン/株式会社インプレスR&D
©1994-2007 Impress R&D
INTERNET magazine 1999/12
303
T IPS & T R ICKS
2
マウスの動きで3つの画像を入れ替える
3
4
4
5
TIPS & TRICKS の読者にはお
なじみのテクニックの1つに、マウ
スカーソルの移動で画像を入れ替
えるというものがある。最近では
リンク用の画像や個人のデジカメ
ギャラリーなどでも定番のテクニ
ックになってきた。そこで今回は、
このテクニックにもうひと工夫加え
て、3つの画像を順番に入れ替え
る方法を紹介してみよう。左のサン
プルでは、写真の上にマウスカーソ
ルを載せたりカーソルをはずしたり
するたびに、3 枚の写真が順に切り
替わって表示される。2枚の画像を
入れ替える例ならよく見かけるが、3
枚ならぐっと新鮮な効果が出せる。
マンネリになってきた君のギャラリ
ーもこれでデザイン一新だ。
d
1
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>
<A HREF="index.htm"
onMouseOver="roundimg ( photo);"
onMouseOut="roundimg ( photo);">
<IMG SRC="tips2a.jpg" NAME="photo"></A>
画像を入れ替えるテクニック自体は、画像が2
う関数を作る。引数の「imgname」は、関数を呼
最後に、
入れ替えの対象にするソース2の<IMG>
枚の場合とまったく同じだ。まず、画像がきれいに
び出すときに対象となる<IMG>タグの名前を入
タグを見てみよう。SR C 属性には、配列imに最
表示されるように、あらかじめ3枚の画像をブラウ
れることになる。関数の中の1行目で「imgname.
初に入れた画像のファイル名を書いておくといい
ザーに読み込ませておこう。ソース1を見てほし
だろう。名前は適当に
(ここでは「photo」
)付け
い。使いたい3 個の画像ファイルの名前を配列
src」に先ほど作った配列imの1つを当てはめる。
ここでのポイントは、
「im [ j % 3 ] 」で j の値によっ
「imag」に覚えさせたら、それを使って画像の配列
て違う画像が当てはめられることだ。
「%」は「∼
Out」の 2つのイベントで 関数roundimgを呼 び
「im」を作り、すべての画像を読み込ませる。
「im [ i ] = new Image () ;」で画像オブジェクトを準
で割った余り」という意味の演算子だ。
出している。これでマウスが画像の上に乗ったり
備し、
「im [ i ] .src = imag [ i ] ;」で画像のファイル
る。サンプルでは「onMouseOver」
と
「onMouse
はずれたりしたときに、画像が順々に入れ替わる。
関数の 2 行目を見てほしい。j に1を加えている。
名を当てはめればいい。この方法は画像 2枚を切
変数 j は、ページが開かれてからずっと生き残って
この方法のよいところは、一度onMouseOverで
り替えるときにも使える技だ。こうしておくと、切
いるものなので、関数roundimgが呼ばれるたび
表示された画像は、次回はonMouseOutで表示
り替えたときにダウンロードが始まって×印アイ
に、j の値は1ずつ大きくなっていることがわかるだ
されることだ
(なぜなら3は奇数だから)
。2 枚を入
コンが表示されることがなくなる。
ろう。jを3で割った数値は、
「1、2、0、1、2、0、
れ替える場合のように、右クリックでの画像の保
……」と順番に変化する。つまり
「imgname.src」
存ができなくなることがない。もちろんonMouse
続 いて画像 3 枚を扱う場合の特有のソースを説
には、配列 imの3つの画像が、順番に当てはめら
Over のときだけ画像を入れ替えるようにするのも
明しよう。変数「j」は、ちょっとしたおまじないだ。
ることになるわけだ。
いいだろう。
初期値を1にしておこう。次に「roundimg」
とい
304
INTERNET magazine 1999/12
インターネットマガジン/株式会社インプレスR&D
©1994-2007 Impress R&D
T IPS & T R ICKS
3
背景色を自在に設定する
4
みなさんはページの色を決める
ときに何を参考にするだろうか。ウ
ェブページや参考書などの色見本
を参照して色を決定していると思
う。しかし、そうした色見本はせい
ぜい216色程度しか掲載していな
いものがほとんどだ。ご存じのとお
り、HTMLではRGBの指定によっ
て16(0∼f)の6乗(約1677万)の
数の色が使える。とは言っても、テ
キストエディターで色を指定すると
きは、少し薄い赤色を使おうと思
って「fa0000」と書いてもその色
をイメージできるだろうか? 結局
は実際にブラウザー上で色の確認
をすることになる。そこで今回は
ページを製作する際にぜひ使って
ほしいTIPSを紹介しよう。
d
1
<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>
2
function init() {
document.layers ["redScale"].captureEvents
(Event.MOUSEDOWN | Event.MOUSEUP);
document.layers ["redScale"].onmousedown = redMove;
document.layers ["redScale"].onmouseup = setbgCol;
}
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 redMove (event ) {
var r = event.layerX;
document.layers ["redIndicator"].moveTo (r,100);
}
function setbgCol ( ) {
var r = document.layers ["redIndicator"].left;
document.bgColor = "#" + toHex ( r ) + "0000";
document.colVal.col.value =
"現在の背景色:" + document.bgColor;
}
まず最初にお断りしておく。上記の画面では
関数「toHex」は関数「setbgCol」から呼び出さ
赤、緑、青の各色の要素のインジケーターを表示
れるので、これについてはあとで説明する。関数
しているが、ソースに関しては誌面の都合により
「setbgCol」を先に説明しよう。ここでは、ID名
赤色の処理だけ掲載した。説明も赤色の部分だ
を「redIndicator」と付けたレイヤーの左座標を
字列にしていることだ。ある数値を文字列にした
い場合は、数値 に「toString ( ) 」を付ければいい
が、ここでは16進数なので0∼fが得られるように
「toString (16)」としている。
けとするが、ほかの色の処理も基本的に同じやり
変数「r」として扱っている。redIndicatorレイヤ
方なので、このコーナーの読者ならすぐに理解 で
ーは「redScale」 レイヤーの上を移動するので、r
ソース1は、スケール用の画像とインジケーター
きるだろう。
の値は0から255 までの間で変化することになる。
用の画像を載せる2つのレイヤーを指定している。
次の文は背景色を設定する処理で、関数 toHex
ID名「redScale」 のレイヤーと、載せている画像
まずはソース2だ。関数「init」ではマウスイベン
に変数 rを渡したときの戻り値を設定している。最
「scale.gif」の幅を255に指定していることがわか
トの設定をしている。今回はマウスボタンを押し
後に背景色を文字列として確認できるように、1
るだろう。これはインジケーターの移動領域にな
下げたとき
(onmousedown)
と上げたとき
(on
行テキストボックスに書き出している。
るので、必ず255を指定しよう。
び出すように指定している。
それでは関数toHexの中身を見てみよう。この関
以上が赤色を処理するソースの説明だ。緑色と
関数「redMove」はマウスボタンを押したときに
数では、関数setbgCol から渡された引数を元に
青色を含めたこのスクリプトの全ソースは、本誌
呼び出される関数で、レイヤーで作ったインジケー
条件処理をして、結果を16進数にして返している。
の付録CD-ROMに収録しているので参照してほ
ターを移動している。
注目してほしいのは、最終的に「document.bg
しい。
mouseup)のそれぞれのイベントで別の関数を呼
Color」を設定するのに使うので、計算結果を文
インターネットマガジン/株式会社インプレスR&D
©1994-2007 Impress R&D
INTERNET magazine 1999/12
305
T IPS & T R ICKS
4
アナログ時計を作る
4
1
5
このコーナーの読者なら、自分
のホームページに現在の時刻を表
示する時計を付けている人は少な
くないだろう。それでは「その時計
はどんなタイプ?」と聞かれれば、
「デジタル時計」と答えるだろう。そ
こで今回は、ホームページではま
ったく見かけることのない、アナロ
グ時計を作るテクニックを紹介し
よう。先月号のこのコーナーでレ
ーダー画面のようなアニメーション
表 示をするスクリプトを紹 介した
が、あのテクニックはこのアナログ
時計を説明するための導入でしか
なかったのだ。ここでは先月のスク
リプトを大幅に改造して「アナログ
時計」という、古典的でありながら
斬新な演出に挑戦してみよう。
d
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 ;
2
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 ( );
}
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);
3
<IMG SRC="clock.gif" ID="clock" onLoad="init ( )"
STYLE="height: 200px; width: 200px; filter:light ( )">
}
「moveLight」メソッドがある行では、ID名「clock」
した光源」
、
「時針を模した光源」をID名「clock」
ていることに気付いただろう。先月号では光源を
の画像の上で光源が照射する方向を移動させて
の画像に追加している。addConeメソッドの引数
単純に回転させているだけだったが、今回は光源
いる。かっこ内に光源が照射する先の座標を入れ
についても、先月号で説明しているので参照して
の回転を現在の時刻(時、分、秒)の値を基準と
れば、時針、分針、秒針を模した光が移動するよ
ほしい。
して処理してみた。これがアナログ時計を作る発
うになる。かっこ内の引数の詳細については先月
光源をすべて設定し終わったあとに関数rotateを
想の源だ。
号を参照してほしい。
呼 び出しているので、光源の照射する方向を移動
関数「rotate」の最後では、setTimeoutを使って
させる関数に処理が移るのだ。
先月号のレーダーアニメーションとソースが似
まずはソース1から説明しよう。変数「r」
と
「conv」
1000ミリ秒(1秒)
ごとに自分自身の関数(rotate)
は先月と同じで、それぞれ光源の中心の値と角度
を呼び出すようにしている。関数「rotate」が呼び
の数値を変換するのに使う値だ。
出されるたびに現在の時刻を取得するので、それ
なく普通の<IMG>タグにスタイルシートとID名を
関数「rotate」では、最初に時、分、秒を得て、
に伴って角度の値が変わり、最終的に光を照射す
設定して、画像を読み込んだとき
(onLoad)
に関
それぞれの値を角度に変換して変数「degSec」
、
る方向も変わるのだ。
数「init」を呼び出しているだけだ。
この値を元にサインとコサインを計算し、光源が
次はソース2を見てみよう。関数「init」はソース
以上でアナログ時計スクリプトは完成だ。さっそ
照 射 する対 象 になる座 標「x S e c 」、
「y S e c 」、
3の画像が読み込まれたとき一度だけ実行され
く自分のホームページに組み込んで、訪問者を驚
るもので、
「addCone」メソッドで順に「画像全体
かせてみよう。
最後はソース3なのだが、これは説明するまでも
「degMin」
、
「degHour」に入れている。さらに、
「xMin」
、
「yMin」
、
「xHour」
、
「yHour」を決めて
いる。
306
INTERNET magazine 1999/12
を照らす光源」
、
「秒針を模した光源」
、
「分針を模
インターネットマガジン/株式会社インプレスR&D
©1994-2007 Impress R&D
HTMLパズルに挑戦しよう
隠されたトリックを解き明かせ!
今
月
の
テ
ー
マ
時計を制する
前ページではIEのフィルター機能を使ってアナログ
時計を作成した。時計のスクリプトは、ホームペー
ジを訪れる人に強い印象を与えることができるし、スクリプトの腕だめ
しにもちょうどいい。前ページのような派手な時計でなくても、ページ
「HTMLパズルに挑戦しよう」
宛 先
の片隅に簡単な時計を表示させておいてはどうだろうか。そこで今月は、
D
刻一刻と現在の時刻を表示し続けるデジタル時計の作成に挑戦してみよ
正解がわかった人も、わからなかった人も、
ご意見、ご感想など何でもOK、次の宛先
にメールしよう。用件の欄には必ず
HTML TIPS&TRICKS
の1行を忘れずに。あなたの挑戦を待つ!
う。トリックがわかったらすぐに解答を送ってきてほしい。正解者には抽
選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、
正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今
月のテーマ“時計を制 する”にチャレンジ!
m [email protected]
なお、締め切りは11月10日とさせていただく。
Q U E S T I O N
1 時計を表示せよ!
4
5
4
左のサンプルは、1 秒おきに現在の時刻を表示する時計をページに埋
め込んだものだ。テキストボックスを使った時計ならよく見かけるが、ここ
では普通のテキストとして表示された時刻が変化している。こうしたデジタ
ル時計を作るのが第1問だ。解答の条件は、月、日、時、分、秒を2桁で
表示すること
(1桁の時は0で始まること)
、曜日を表示すること、テキスト
ボックスやステータスバーなどは使わないこととする。IE 4以降とナビゲー
ター4のダイナミックHTMLを使えば簡単だが、数値の処理はちょっと面倒
かもしれない。なお、第1 問と第2問の解答は、IEとナビゲーターのどち
らか片方でしか動かないものでかまわない。
ヒ
ン
ト
Q U E S T I O N
6月号の2番目のTIPSのテクニックを使って……
2 インターネットタイムを表示せよ!
4
5
4
第1 問は年月日と時分秒を表示するだけの単純な時計だったが、左の
[email protected]数字が表示されている。
これは最近流行の「インターネットタイム」を表したものだ。インターネット
タイムとは、Swatch 社が提案している単位「beat」を使った時刻の表現
だ。1日の1000分の1を1 beatとし、Swatch社の所在地の午前0時(世
界標準時からは+1時間で、日本との時差は-8時間)を世界共通の0 beat
とする。たとえば日本では午前 8時が0 beat、午後2時が250 beat、午後
8時が500 beatとなる。このインターネットタイムを自分のページに表示さ
せて、新し物好きな人を驚かせてみよう。
ヒ
ン
ト
1 beatは86.4秒、JavaScriptには世界標準時
を得るメソッドもある……
インターネットマガジン/株式会社インプレスR&D
©1994-2007 Impress R&D
INTERNET magazine 1999/12
307
[インターネットマガジン バックナンバーアーカイブ] ご利用上の注意
この 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 編集部
[email protected]
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.