第 35 回

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

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

ここ何か月かIE 5の最新機能を使ったTIPSを紹介してきたが、今月は一休み
3してIE 3やナビゲーター3でも動作するスクリプトや、IE4の知られていないプロパティーなどをお見せしよう。12月号のパズルの解答を見ればわかるように、

4古いテクニックでも組み合わせれば大きな効果を出すことができる。それでは

5

今月もさまざまなテクニックをお届けしよう。パズルも面白いものを用意したぞ。
3

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

4

インターネットエクスプローラ3以上
インターネットエクスプローラ4以上
インターネットエクスプローラ5以上
ネットスケープナビゲーター3以上
ネットスケープナビゲーター4以上

12月号「HTMLパズルに挑戦しよう」の解答
さまざまな解答が寄せられたが、数字が正確に表示されれば正解とした。スクリプトが長いため、解答のすべては掲載できない。CD-ROMに収録したソースを見てほしい。ここでは省略しているが、時計の文字列を表示させる<DIV>タグには「clock」というID名を付けてスタイルシートで位置を指定していることに注意。

A N S W E R

1 時計を表示せよ！

Dateオブジェクトから時刻を取得し、IEならinnerHTMLで、ナビゲーターならレイヤーのdocumentオブジェクトを使って文字列を表示する。
function showclock ( ) {days = new Array("日", "月", "火", "水", "木", "金", "土");d = new Date( );year = d.getYear( );month = d.getMonth( ) + 1; if (month < 10) month = "0" + month;（中略）
str = year + "/" + month + "/" + date + " (" + days[ d.getDay( ) ] + ")" +hour + ":" + minute + ":" + second;if (document.all) clock.innerHTML = str;
else if (document.layers) {document.clock.document.open( );document.clock.document.write(str);
document.clock.document.close( );}}setInterval("showclock( )", 1000);A N S W E R

正解者：村田正彦さん、谷口勝宣さん、よしともさん、
稲見知志さん、齊藤貴志さん、うおまさ@homeさん

2 インターネットタイムを表示せよ！

getUTCHoursなどのメソッドを使って世界標準時を取得し、beatを計算する。
beathour = d.getUTCHours( ) + 1; if (beathour > 23) beathour = 0;beat = Math.floor( ( beathour * 3600 +d.getUTCMinutes( ) * 60 + d.getUTCSeconds( ) ) / 86.4);
if (beat < 100) beat = "0" + beat; if(beat < 10) beat = "0" + beat;
str = year + "/" + month + "/" + date + "(" + days[d.getDay()] + ")" +hour + ":" + minute + ":" + second + "@" + beat;

318 INTERNET magazine 2000/1

正解者：村田正彦さん、谷口勝宣さん、よしともさん、稲見知志さん、齊藤貴志さん、うおまさ@homeさん

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

T IPS & T R ICKS

1
背景画像を動かす45

インターネットエクスプローラのダイナミックHTMLでは、スタイルシートのあらゆるプロパティーをスクリプトで操作できる。フォントサイズやフォント名、文字色や背景色など変更できないものはない。ということは、背景画像もスタイルシートで指定すれば、動かせるようになるはずだ。左のサンプルを見てほしい。ページのタイトル文
字の背景に敷かれた水面のような画 像が流れるように動 いている。
アニメーションGIFを作らなくても、簡単なスクリプトだけでこれだけの効果が出せるのだ。難しいことをやっているように見えるが、この連載で今まで何度も出てきたテクニックを応用しているだけだ。

d1<STYLE TYPE="text/css">
H1 { text-align: center; color: white; font: bold 64px Verdana;
background-image: url ( tips1.jpg ); }</STYLE>

2<SCRIPT LANGUAGE="JavaScript">
var pos = 0;function timer ( ) {title.style.backgroundPosition = pos + " " + pos;
pos += 8;}</SCRIPT>

3<BODY onLoad="setInterval ('timer ( );', 500 );">
<H1 ID="title">HTML TIPS & amp; TRICKS</H1>

style.backgroundRepeat

サンプルのソースは、ひと目見ればわかるよう背景画像の位置は、「style.backgroundPosition」

な簡単なものだ。まずソース1のスタイルシートとで取得したり変更したりできる。これはスタイルシ

背景画像を並べる方向（"repeat"、3の<H1>タグで、背景に画像を敷いた見出しをートの「background-position」と対応していて、"no-repeat"、"repeat-x"、"repeat-y"）作る。もちろん<P>タグや<DIV>タグでも同じよ

たとえば「"30 20"」という文字列を入れると、並べうに背景画像を敷いて動かせる。<BODY>タグ

始める位置が左から30ピクセル、上から20ピク

このサンプルでは、「pos」という変数を用意して、の背景画像、つまりページ全体の背景画像も動セルに変更される。ほかに背景関連のプロパティ「timer」が呼ばれるたびにその数を8ずつ増やしかせるので、試してみると面白いだろう。背景画

ーには次のようなものがあり、いずれもスクリプトている。
「style.backgroundPosition」に「pos +像を動かすタグには、スクリプトで操作できるようで変更できる。

" " + pos」という文字列を入れれば、500ミリ秒ごにID属性（ここでは「title」）を付ける。とに背景画像の開始位置が「"8 8"」、「"16 16"」、style.backgroundAttachment「"24 24"」……と動いていくことになる。

ソース3の<BODY>タグに設定したonLoadイベ

背景画像を固定させるかスクロールさせるかントでは、setIntervalメソッドを使ってアニメーシ（"scroll"または"fixed"）

以上で背景画像を動かすスクリプトが出来上がる。

ョン処理を行う関数「timer」が500ミリ秒（1/2

style.backgroundColor

実際に自分のページで応用するには、このサンプ秒）ごとに呼び出されるようにする。ソース2の関数「timer」を見てみよう。やっていることはごく簡単。
「title」というID名のオブジェクトの背景画像

背景色（"#FF0000"など）
style.backgroundImage

ルのように継ぎ目がなめらかで、並べると連続しているように見える画像を使うと効果的だろう。

背景の画像ファイル（"url (ファイル名) "）を少しずつ動かしているだけだ。

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

INTERNET magazine 2000/1319

T IPS & T R ICKS

2
ソフトウェアキーボードを作る その2
3

4

5

34

1999年9月号でソフトウェアキーボードの作り方を紹介したが、もう使ってみただろうか。斬新なアイデアで人目を引いたと思うが、かなり画面を広くとってしまっているのが気になった人もいるかもしれない。
そこで今回は濁音と半濁音、それに「っ」や「ゃ」などの小さい文字の入力方法を工夫して、キーの数を26 個減らす方法を紹介しよう。
左のサンプルは、百人一首の中にある歌の最初の文字をひらがなで入力すると続きを検索してくれるフォームをイメージしたものだ。9月号に比べてコンパクトにできている。もう9月号を忘れてしまった
人もいると思うが、この記事だけでもできるので心配は無用だ。

1<SCRIPT LANGUAGE="JavaScript">function enter ( moji ) {nstr = moji.value;
str = moji.form.box.value;browser = navigator.appName;i = "あ".length;
lstr = str.substring ( 0, str.length - i );rstr = str.substring ( str length - i, str.length);if (nstr == "″" ) {if ( rstr == "か") { rstr = ""; nstr = "が"; }else if ( rstr == "き") { rstr = ""; nstr = "ぎ"; }（中略）else { nstr = rstr; rstr = ""; }}（中略）
if ( nstr == "1文字消去") { rstr = ""; nstr = ""; }if ( nstr == "スペース") { nstr=" "; }moji.form.box.value = lstr + rstr + nstr;}</SCRIPT>

d2<FORM><INPUT TYPE="text" NAME="box" SIZE="45"><INPUT TYPE="submit" VALUE=" 検索 "><INPUT TYPE="button" VALUE="1文字消去" onClick="enter (this);"><INPUT TYPE="button" VALUE="あ" onClick="enter (this);"><INPUT TYPE="button" VALUE="い" onClick="enter (this);">（中略）<INPUT TYPE="button" VALUE="スペース" onClick="enter (this);"><INPUT TYPE="button" VALUE="″" onClick="enter (this);"><INPUT TYPE="button" VALUE="°" onClick="enter (this);"><INPUT TYPE="button" VALUE="シフト" onClick="enter (this);"></FORM>

まずソース2のフォームを見てみよう。各ボタ

入力した文字）を切り出すわけだが、ブラウザーにの場合は、あ行とや行、それに「つ」の小さい文

ンのVALUE 属性に五十音の仮名が割り振られてよって動作が違うので、「i = "あ".length;」とい字をnstrに入れ、rstrを空にする。1文字消去機

いて、ボタンを押すと、「enter」という関数にどのうおまじないの1行を入れておく。
「lstr」は文字列能もあると便利だ。1つ前の文字を消すわけだかボタンを押したのかを知らせるようになっている。の 最 初から2 つ前 に入 力した文 字 までを入れ、ら、rstrとnstr の両方を空にしておく。

ここまでで前回と同じようなキーボードができる。

「rstr」には右端の文字が入る。
最後にテキストボックスの文字を、lstr、rstr、nstr

問題は濁音だ。
nstrが濁点「″」で、かつrstrが濁点を付ける文字をつなぎ合わせたものにすれば出来上がりだ。もこのサンプルでは、たとえば「が」を入力するときのときは、nstrに濁点付きの文字を入れてrstrをちろん、あらかじめ濁点や半濁点が付いた文字ボには、「か」ボタンの後に「″」ボタンを押すことに空（「""」）にする。if文を参照してほしい。か行、さタンを作ってスクリプトを簡単に済ませることもでした。関数に「″」ボタンが押されたときに1つ前行、た行、は行の全 20 文字がその対象になる。

きるが、画面の節約と遊び心を考えたら、こっちのに入力された「か」を「が」に変える機能を追加しもしもnstrが「″」なのにrstrが濁点を付けられなほうがいいだろう。あとはボタンを配置すれば、ソよう。ソース1の関数enterを上から見てみると、

い文字なら、nstr にそのままrstrを代入し、rstrをフトウェアキーボード・バージョン2ができる。

まず変数「nstr」に押されたボタンの文字（moji.

空にしておけばいい。
なお、このサンプルは、実際に百人一首を検索すvalue）を入れる。次にすでにテキストボックスにある文字列（moji.form.box.value）
を変数「str」

上記のソースでは省略しているが、半濁点「°」のに代入しよう。

場合も同じだ。は行の文字の場合にnstr に半濁

続 いてこの文字列の右端の文字（つまり1つ前に点付きの文字を入れ、rstrを空にする。
「シフト」

320 INTERNET magazine 2000/1

る機能はないことに注意。

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

T IPS & T R ICKS

3
画像をズームアップさせる
4
1999 年 2 月号で紹介した画像をズームアップさせるTIPSを覚えている読者は多いだろう。あのテクニックはエクスプローラのバージ
ョン4 以上でしか動作しないものだった。今回はナビゲーター4で動作するズームアップのTIPSを紹介しよう。左はそのサンプルだが、中央に表示している画像が徐々に拡大している様子がわかるだろう。これはレイヤーを連続して出力させて、その中に表示する画像の幅と高さをレイヤーと同じように連続して大きくすることで可能な演出なのだ。少し難しく聞こえるかもしれないが、ソースとポイントを比較しながらよく読 んで実 践 すれば、意外と簡単だとわかるだろう。

d1
var cnt = 1;function zoom () {if ( cnt > 200 ) { clearTimeout ( timer); }else {zmImg = "<IMG SRC=zoom_img1.gif
WIDTH=" + cnt * 2 + " HEIGHT=" + cnt + ">";
document.zmField.document.open ();document.zmField.document.write (zmImg);
document.zmField.document.close ();cnt = cnt + 5;
timer = setTimeout ("zoom ()", 50)}}

2
<BODY onLoad="zoom ()">
<DIV ID="zmField" STYLE="position:absolute; top:100px"></DIV>

このコーナーの読者なら、見慣れた部分が多<IMG>タグを変数「zmImg」に入れている。よくのcntの値になる。関数zoomが実行されるたびくあるソースなので、それほど考え込むことなくス

見るとWIDTHの値を「cnt * 2」としているが、これに画像が5だけ大きくなる。

ムーズに理解できるだろう。

は今回のサンプルで使っている画像の縦横の比関数zoomの最後にsetTimeoutを使ってタイマ

ソース1から説明しよう。最初に変数「cnt」の初率が1対2になっているためだ。もし自分でオリジーを設定する。このサンプルでは50ミリ秒（1000ナルの画像を使う場合は、WIDTHとHEIGHTの分の50秒）ごとに関数zoomを呼 び出すようにし期値を1に設定している。この「cnt」は画像の幅どちらか一方の値を「cnt」にして、他方を「cnt*比ている。このタイマー設定があるので関数zoomと高さの基準となる値だ。関数「zoom」の中で、率」とするといいだろう。

が指定した時間ごとに実行され、画像がズームア画像の幅と高さの指定に｢cnt｣を使っている。

次はレイヤーの出力の部分だ。ナビゲーターで新ップする演出ができるのだ。

次は関数zoomだ。ここではif〜elseを使って画しいレイヤーを出力するには、これまでこのコーナ像の拡大と停止の処理を分けている。ifの条件はーで何度も説明してきたようにdocument オブジ

ソース2を見てみよう。ここでは単純にI D 名を「cnt」の値で、このサンプルでは200を指定していェクトの「open」→「write」→「close」を使う。

｢zmField｣と指定した空のレイヤーを作っているる。この値を超えるとスクリプトはclearTimeout

この一連の流れは新しいレイヤーを出力する際にだけだ。この位置にスクリプトで作られた画像がを実行し、画像の拡大が停止する。

は、必ず使うので覚えておこう。
「zmField」とは、出 力される。 必 ずスタイル シートで 位 置 指 定

ソース2で示しているID名 ｢zmField｣の<DIV>（position:absolute）
をしよう。これを設定しな

次のelse文では、画像の大きさの設定とレイヤータグで指定した領域のことなので、ここに画像がければ画像は表示されないので注意してほしい。の出力を行っている。画像の大きさは先にも触れ表示されることになる。次にcntの値に5を加えてたとおりcnt の値を元に設定し、ここで得られたいるが、これは関数zoomが次に呼び出されたとき

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

INTERNET magazine 2000/1321

T IPS & T R ICKS

4
カスタマイズできるページを作る
3

4

5

3

4

「My Yahoo!」のようなポータルサイトのサービスには、モジュールの位置やページの配色などをユーザーが指定できるカスタマイズ機
能が備わっている。これをまねして、自分のページを訪れた人が好みの色を選べる仕組みを作ってみよう。
左のサンプルは、初めて訪れたときは赤色を中心とした配色になっているが、ページ中央のプルダウ
ンメニューから「Red」、「Blue」、「Green」のいずれかを選ぶと、ページの内容は同じままで画面の配色が切り替わる。切り替わったところでこのページをお気に入りやブックマークに入れると、次回からは選んだ配色で表示される。さっそくこの仕掛けを見てみよう。

d<SCRIPT LANGUAGE="JavaScript">
var logo = new Array ("red.gif","blue.gif","green.gif");var bcol = new Array ("#FFE0E0", "#D0E0FF", "#E0FFE0");
var tcol = new Array ("#CE3952", "#5273CE", "#42B57B");
tag = "<IMG SRC='";if (location.search == "?red") {tag += logo [0];document.bgColor = bcol [0];document.fgColor = tcol [0];}else if ( location.search == "?blue") {tag += logo[1];document.bgColor = bcol [1];document.fgColor = tcol [1];}else if (location.search == "?green") {tag += logo [2];document.bgColor = bcol [2];document.fgColor = tcol [2];}else {
tag += logo [0];document.bgColor = bcol [0];document.fgColor = tcol [0];}tag += "' WIDTH=320 HEIGHT=77>";
document.write (tag);</SCRIPT>

こういう仕掛けを作ろうとするときにすぐ思い

JavaScriptで「location.search」を調べればい

上記のソースでは省略したが、ユーザーが色を選つくのは、クッキーを使って設定を保存し、次回い。これは昔からJavaScriptに備わっているので、択するためのプルダウンメニューを見てみよう。こにその設定を読み出してページを変更することだ。

IE 3やナビゲーター3でも使える。上記のソースをれは、よく使われているスクリプトで、<SELECT>

しかし、このサンプルではクッキーは使っていない。

見ればわかるように、この値が「?red」、「?blue」、タグと<OPTION>タグでジャンプするものだ。

また、配色ごとにいちいちページを作っているわけ「?green」の場合にそれぞれに対応する背景色とでもない。HTMLファイルは1つだけだ。

文字色を「document.bgColor」と「document.

<FORM>

そのタネは実に簡単で、URLの中に色の指定をfgColor」に設定しているだけだ。また、それぞれ<SELECT onChange="location.href=保存しているのだ。URLの最後に「?」を付けて、の場合で画像ファイルの名前を変えて<IMG>タ

this.options [ selectedIndex ].value">「index.html?red」のときは赤色の画面、「index.

グを変数「tag」に組み立てて、「document.write」<OPTION VALUE="index.html?red">Redhtml?blue」
では青色の画面、「index.html?green」

でTIPS & TRICKSのロゴを表示させている。

<OPTION VALUE="index.html?blue">Blue

では緑色の画面が表示されるようにしている。フ

<OPTION VALUE="index.html?green">Greenァイル名に「?」を付けてオプションを追加するとあとは、ユーザーがオプションを選べるような仕掛</SELECT>いうのは、CGI プログラムにキーワードを渡す場けを作ればいい。ここではプルダウンメニューを</FORM>合と同じだ。CGIだけでなくHTMLファイルを呼ぶ使ってURLを変えているが、CGIを呼 び出すようときにもこの「ファイル名? 何々」は使える。

なフォームを作成してACTION属性にHTMLファ

なお、このサンプルはローカルのハードディスク上イルを指定することもできる。

では動作しないことに注意。FTPでサーバー上にHTMLファイルの中で「? 何々」を取り出すには、

322 INTERNET magazine 2000/1

アップロードしてからテストするようにしよう。

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

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

今月のテーマミレニアムイベントを制する大好評発売中！

ついに人類は2000年という大きな節目を迎えることになる。このタイミングを狙って、自分のホームページで何かイベントを企画している読者は多いのではないだろうか。
そこで今月は、そのイベントにふさわしいパズルを2問用意してみた。ヒ「HTMLパズルに挑戦しよう」
宛 先

ントは先月号のクイズに隠されているので、挑戦しやすいはずだ。このパDズルを解いて2000年という新しい時代へ訪問者を招待しよう。トリッ

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

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

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

Q U E S T I O N

1 2000年に画像を切り替えろ！

3

4

5

34

左のサンプルには2つの異なった画像が表示されている。これは2000年1月1日午前0時ちょうどの前後で、訪れたときに表示される画像が異なるページを表したものだ。0時ジャストの前か後かを判断しなければならないのだから、時刻だけでも分だけでも秒だけでもいけない。JavaScriptには、ある時間を基準としてミリ秒を返す日付オブジェクトがある。解答を得るためには、このオブジェクトを使って2000年1月1日午前0時と現在時刻を比較すればいい。なお、このクイズはIE 3でも動作するようにしなければいけない。最近のTIPSに慣れている人は、それがネックになるかもしれな
いが基本に戻ろう。そうすれば解答が得られるはずだ。
ヒント

Q U E S T I O N

現在時刻を1970年1月1日からカウントする
日付オブジェクトは……

2 2000年までカウントダウン！

4

5

4

左のサンプルは、1秒ごとに2000年1月1日午前0時までの時間をカウントダウンしている様子を表したものだ。先月号の第1問では現在時刻をテキストとして表示させる問題を載せたが、今月号の第2問の解答を表示させる仕組みも同じになっている。あとはどうやってカウントダウンさせる
かなのだが、これは1997年11月号を参考にするといいだろう。
「そんな古いバックナンバーなんて持ってないよ」という人は、「ホームページ裏技大全
HTML TIPS & TRICKS」の63ページを参照してもいいだろう。なお、このクイズの解答はIEとナビゲーターのどちらか一方で動作するものであれば正解とする。
ヒン
ト

小数点以下を無視するには、Math.ceilやMath.floorがあるぞ……

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

INTERNET magazine 2000/1323

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