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

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

今月からブラウザーのマークが1つ増えていることに気づいたかな？ ついにイ
3.0

ンターネットエクスプローラ5.0の最新機能を使ったTIPSの登場だ。ただし、あくまでベータ版用のものなので、正式版では仕様が変わるかもしれないこと4.0に注意しよう。今月はそのほかに、IEとナビゲーターの両方で動くダイナミック5.0

HTMLや、スクリプトを高度に使いこなす方法をお届けする。
3.0

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

4.0

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

2月号「HTMLパズルに挑戦しよう」の解答
わりと新しい機能からの出題だったことを考えれば、正解者の数はまずまずと言ったところだろうか。JavaScript
1.3では、Dateオブジェクトのほかにも基本的な文法やオブジェクトに変更点があるので、いつまでも古いJavaScriptを常識と考えずに新しい情報のチェックを怠らないようにしよう。

A N S W E R

1 2000年問題に対応せよ！

この問題はJavaScript 1.3を知っていれば簡単に解ける。2桁の年を得るにはgetYearを使うが、4桁の場合は「getFullYear」を使うのだ。ホームページで年月日を表示している人は、1年後に迫った2000年に対応するために書き換えておこう。

today = new Date();year = today.getFullYear();document.write(year);A N S W E R

正解者：熊本芳朗さん、良知敬介さん、田中博英さん、いのうえさん、堀江さん、近藤雄治さん、川瀬達
矢さん、うおまさ＠homeさん

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

この問題も、第1問と同じくJavaScript 1.3を知っていれば簡単だ。1000分の1秒（ミリセコンド）を得るには「getMilliseconds」を使う。本来3桁の数値を返すはずだが、値はハードウェアに依存するので、2桁の数値を返すマシンもあることを覚えておこう。

today = new Date();msec = today. getMilliseconds();
document.write(msec);
正解者：熊本芳朗さん、良知敬介さん、田中博英さん、いのうえさん、堀江さん、川瀬達矢さん

282 INTERNET magazine 1999/3

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

T IPS & T R ICKS

1
ルビをふる
5.0
ついにIE 5.0が登場した。IE 5.0と言えば、やはりXMLへの対応がクローズアップされるが、それ以外にも新たに対応したタグやスタイルシートがある。ここではその中の1つである<RUBY>タグを紹介しよう。これは文字どおり自動的に「ルビ」をふるものだ。右のサンプ
ルでは、この<RUBY>タグを使って漢字の上にふりがなを表示している。ルビをふることはスタイルシートを使っても不可能ではないが、位置やフォントサイズなどの調節が難しい。しかし、<RUBY>タグを使えばそれも自動的に行われる。
さらに、ルビ用のスタイルシートも用意されていて、ルビの配置を調節できるようになっている。

d<RUBY><RB>醍醐味
<RT>だいごみ</RUBY>

文字にルビをふるには、<RUBY>タグのほかにもちろん、<RUBY>タグにもスタイルシートを指定

left ：ルビとルビのふられる文字をともに左<RB>タグと<RT>タグも使って次のように書く。

できる。<RUBY>タグに指定したスタイルは、ルに寄せる。

ビ自体にもルビのふられる文字にも反映される。

center ：ルビとルビのふられる文字をともまた、ルビを指定する<RT>タグは、<RUBY>タに中央に寄せる。

<RB>ルビがふられる文字

グとは別にスタイルを指定できるため、もし自動的

right：ルビとルビのふられる文字をともに<RT>ルビに表示したルビのサイズなどが気に入らなければ、右に寄せる

試しに指定してみるといいだろう。右のサンプルで

distribute-letter：ルビの均等割り付け<RUBY></RUBY>は、「color:red」を指定してルビを赤くしている。

distribute-space：ルビの均等割り付け

ごらんのように、<RB>タグと<RT>タグでは終了

なお、ルビはスタイルシートでサイズを変えても自（両端 にスペースが入って均等割り付けされタグを省略できる。さらに<RB>タグ自体を省略す動的に位置が調節される。

る）ることも可能だが、ルビがふられる文字であるとわline-edge：ルビが短い場合は中央寄せ、かるように付けておいたほうがいいだろう。これに<RUBY>タグにはルビ用のスタイルシートruby-

よって、「ルビがふられる文字」の上に小さいフォンalignが用意されており、ルビとルビのふられる文

ルビが長い場合は左寄せトで「ルビ」が表示されるようになる。

字の配置を変更できる。ruby-alignに指定できdistribute-letterとdistribute-spaceは、ルビの<RUBY>タグは「インライン要素」と言われるもの

る値は次のとおり。

ふられる文字よりもルビ自体が長いときは均等割だ。その前後は改行されないので、文章の途中にり付けされないようになっている。

ふりがな付きの漢字を入れることができる。

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

283

T IPS & T R ICKS

2
2つのブラウザーでダイナミックHTMLを動かす
4.0

5.0

4.0

左のサンプルは、98 年9月号で紹介したマウスカーソルに反応してメッセージを表示するダイナミックHTMLを改造したものだ。読者の方からのご感想やご質問がたいへん多かったこのTIPS だが、9月号ではIE 4上でしか動作しかなかった。ところが、このサンプルではナビゲーター4の上でもスクリプトエラーが出ることなく動 作している。もちろん2つのブラウザーのために別々のページを用意しているのではない。
「互換性がないに決まっている」とダイナミックHTMLを使うのを避けている人も多いだろうが、互換性のある部分とない部分を使い分ければ、うまく動かすためのヒントが発見できる。

d1<SCRIPT LANGUAGE="JavaScript">var ver = navigator.appVersion.charAt (0);var ie = 0, nn = 0;
if (navigator.appName == "Netscape") nn = 1;
if (navigator.appName =="Microsoft Internet Explorer") ie = 1;function Message (s) {if (ie && ver >= 4) {infobox.innerHTML = s;}else if (nn && ver >= 4) {document.infobox.document.open();
document.infobox.document.write (s);document.infobox.document.close ();}}</SCRIPT>

このTIPSのポイントを先に述べよう。それは、

2<DIV ID="infobox"
STYLE="position:absolute; left:32px; top:160px;"></DIV>

3<A onMouseOver="Message ('私のオススメ映画')"
onMouseOut="Message ('...')" HREF="movie.html">

れ以外の場合は0、変数「nn」はナビゲーターのプロパティーを使って好きな位 置 を指 定 する。

「ナビゲーター4はスタイルシートでpositionプロ

場合は1で、それ以外の場合は0としておく。

<LAYER>タグで次のように書くのと同じになる。

パティーを指定した<DIV>タグをレイヤーとみな関数「Message」は、引数「s」に渡されたメッセす」という点だ。positionプロパティーにabsoluteージを「infobox」という名前のタグまたはレイヤ<LAYER NAME="infobox"を指定すれば<LAYER>タグ、relativeを指定すーの中に表示するためのものだ。タグの位置指定

LEFT=32 TOP=160>

れば<ILAYER> タグと同等なものとして扱われ、は2つのブラウザーで共通だとしても、その中の文ID属性で名前を付ければレイヤーにNAME属性

字を変更するスクリプトはまったく違うものなの

ソース3は、マウスの操作で関数「Message」をで名前を付けたのと同じことになる。スタイルシー

で、先に作っておいたブラウザーの種類を判別す呼び出してメッセージを表示させるリンクだ。onトで位置を指定した<DIV>タグならIE 4でも表示る変数をif文でチェックし、別々のスクリプトを書く。

MouseOverではマウスを載せたときのメッセージできるので、<LAYER>タグを<DIV>タグに置きIE 4なら「infobox」のinnerHTMLプロパティーにを、onMouseOutではマウスが離れたときのメッ

換えれば、2つのブラウザーのどちらでも座標を指文字列を入れる。ナビゲーター4 ならレイヤーのセージを関数の引数に指定する。メッセージを変定した配置ができる。

document プロパティーを使 い、open、write、えて<A>タグを次々に作っていけば完成だ。

closeの各メソッドでレイヤーの内容を書き換える。
それでは上のサンプルを見てみよう。ソース1でダイナミックHTMLには互換性がないからといっは、まずnavigatorオブジェクトを利用してブラウ

ソース2は、実際にメッセージを表示する部分のてあきらめるのは早い。よくよく調べれば、IE でもザーの種類を判別しておく。変数「ver」にバージ<DIV>タグだ。ID属性で「infobox」という名前

ナビゲーターでも動くスクリプトを簡単に書く方法

ョン番号を入れ、変数「ie」はIEの場合は1で、そを付け、STYLE 属性でpositionとleft、topの各が見つかるかもしれないぞ。

284 INTERNET magazine 1999/3

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

T IPS & T R ICKS3ウィンドウを移動させる
4.0

5.0

4.0

まずは左のサンプルを見てほしい。矢印のマーク「>」をクリックすると、ブラウザーのウィンドウが少しずつ右側へ移動し始める。
「¦¦」マークを押すと停止する。これはJavascriptのwindowオブジェク
トを使ってウィンドウをコントロールしている様子だ。windowオブ
ジェクトと言うと、ステータスバーに文字を表示させるTIPSがよく知られているが、このようにウィンドウ自体をダイナミックにコントロールすることもできるのだ。実際にはこのTIPSをホームページで使う機会はあまりないだろうが、遊び心で使ってみると面白いかもしれないぞ。それではさっそくこのスクリプトを見てみよう。

d2

1<A HREF="javascript:moveRight ()">STOP</A><A HREF="javascript:stopWin ()">RIGHT</A><SCRIPT LANGUAGE="JavaScript">function moveRight () {window.moveBy (2,0);
timer = setTimeout ("moveRight ()", 100);}
function stopWin () {clearTimeout (timer);}</SCRIPT>

サンプルではウィンドウが上下左右に動くよ移動量になる。かっこ内は（右方向の移動量、下タイマー設定をクリアするもので、ここでは関数

うにスクリプトを作成しているが、右方向への移方向の移動量）の順序で記述する。左や上に移moveRightで作成した変数 timerをクリアしてい動と停止の動作を行う部分のスクリプトだけを説動させたい場合は頭にマイナスを付ければオッケる。これでウィンドウを停止させる関数は完成だ。

明するとしよう。

ーだ。

さっそく動作を確認してみてほしい。

次の行には「setTimeout」がある。これは先月号
まずはソース1のように、「RIGHT」や「STOP」とでも説明したとおり、ある関数の中でsetTimeout

参考までに、ウィンドウを上下左右に移動させるいう文字をクリックすることで、移動や停止のためにその関数自身を指定すれば、繰り返し同じ処理処理を簡単に紹介しておこう。の関数を呼び出すリンクを作成する（上の画面でができる。また、同じかっこ内の数値は関数を呼は、Webdingsフォントを使って文字を「>」や「¦¦」び出す時間の間隔だ。関数「stopWin」でウィンのようなマークにしている。付録CD-ROMの中のドウを停止できるように、setTimeout が返す値ファイルを参照してほしい）。

を「timer」という変数に入れておく。これでウィンドウを右に移動させる関数は完成だ。このサンプ

window.moveBy (-2,0) ; //左に移動
window.moveBy (2,0) ; //右に移動
window.moveBy (0,-2) ; //上に移動
window.moveBy (0,2) ; //下に移動

次にソース2のように、ウィンドウの移動と停止を

ルでは、100ミリ秒ごとにウィンドウが右方向に2行う関数を作成する。関数「moveRight」ではピクセル移動することになる。

もちろん、それぞれsetTimeoutで繰り返し処理「window.moveBy」というメソッドを使っている。

次はウィンドウを停止させる関数stopWinを見てを行うことを忘れないでほしい。

これはウィンドウを相対的な位置に移動させるもみよう。この関数では「clearTimeout」というメソので、かっこ内にピクセル単位で指定した数値がッドを使っている。これは指定した変数で表される

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

INTERNET magazine 1999/3285

T IPS & T R ICKS

4
スクリプトレットを作る
4.0

5.0

左のサンプルは、いろいろなページを回ってキーワードやスタンプを集めていくウェブ上のオリエンテーリングをイメージしたものだ。たくさんの看板を置く必要があるが、HTMLをいちいち個別に書いていたのではめんどうだ。こうした場合でなくても、「他のページをオブジェクトとして持ってきて使えたら」と考えたことがあるかもしれない。それを可能にするのが今回ご紹介する「スクリプトレット」だ。スクリプ
トレットを使えば、HTMLとスクリプトをオブジェクトとして扱い、他のページから何度も利用して記述を節約できるようになる。ここでは、この便利なスクリプトレットの作り方をお伝えしよう。

d12（スクリプトレット）<SCRIPT LANGUAGE="JavaScript">
var public_number;var public_image;var public_imagenum;var public_key;function public_setStamps () {pnum.innerHTML = public_number;for (i = 0; i < public_imagenum; i++)document.images [i].src = public_image;pkw.innerHTML = public_key;}</SCRIPT>（スクリプトレットを使うHTML）
A<BODY STYLE="background-color:#ccccff;"
onLoad="scriptlet.number = 17;
scriptlet.image = 'tips4b.gif';
scriptlet.imagenum = 3;
scriptlet.key = 'P';
scriptlet.setStamps ();">B<OBJECT ID="scriptlet" STYLE="width:400; height:200;"
TYPE="text/x-scriptlet" DATA="tips4scl.htm"></OBJECT>

スタイルシート（ 拡 張 子 は「 c s s 」）やJ a v a

自体は普通のHTMLファイルになっていることがする。また、「TYPE="text/x-scriptlet"」を忘れScript（拡張子は「js」）のファイルを用意して、複わかるだろう。表示する部分は今までどおりHTMLずに付けること。

数のH T M Lファイルから参 照 するようにすれば、やスクリプトで記述すればよい。そして、他のページHTMLファイルの中にいちいちスタイルシートやから変更や操作をしたい変数や関数を作成する

あとは、イベントが発生するときにスクリプトレットJavaScriptを書く必要がなくなり、記述の節約に（ ソース1 ）。 変 数 はv a r を使って名 前 の前 にの変数や関数を指定 すればよい（ソース2のA）。

なることは以前にも紹介してきた。IE 4 以上で利「public̲」を付けて宣言する。たとえば、変数名指定するときは、「スクリプトレットのID . スクリプ用できるスクリプトレットはさらに強力だ。スクリが「val」なら「public̲val」という具合だ。関数にトレットの変数名（関数名）」とする。ただし、スクプトレットはHTMLとスクリプトで書かれていて、ついても同じように名前の前に「public̲」を付けリプトレットで宣言した「public̲」付きの変数や一見するとページの中に別のページを表示する感る。今回はわざと引数を使わなかったが、もちろん関数は、「public̲」をはずさなければならないのでじだが、スクリプトレットの変数や関数を他のペー関数に引数を使うこともできる。
「public̲」を付注意すること。上のサンプルでは、<BODY>タグジから操作できるという大きなメリットがある。こけた変数や関数は、スクリプトレット内ではそのまのonLoadでスクリプトレットを操作し、画像や文れによって、同じオブジェクトでもいろいろなバリ

ま「public̲」を付けて使う。

字を変化させている。

エーションを持たせることができる。
一方、スクリプトレットを使う側のHTMLファイル

今回のサンプルではオブジェクトはあまり大きくなさて、そのスクリプトレットの作り方だが、本誌のでは、まず、スクリプトレットを<OBJECT>タグでいのでそれほど恩恵があるわけではないが、複雑

付録 CD-ROMにスクリプトレット（Tips4scl.htm）

指定する（ソース2のB）。ID属性で名前を付け、で大きなオブジェクトをたくさん置く場合にはスクを収録しているので見てほしい。スクリプトレット

DATA属性でスクリプトレットのファイル名を指定

リプトレットが役に立つことになるだろう。

286 INTERNET magazine 1999/3

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

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

今月のテーマ<META>タグを制する
みなさんはHTMLのヘッダーに 記述するMETAタグを活用しているだろうか？ この<META>タグは文書に関するさまざまなデータを定義するもので、シフトJISやEUCなどの文字コードを設定したり、サーチエンジンのために文書に関連する「HTMLパズルに挑戦しよう」
宛 先

キーワードを指定する場合などに使われる。今月は<META>タグを使Dってページをジャンプさせたり最新のページを表示させたりする問題に正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

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

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

Q U E S T I O N

1 自動的にページを移動せよ！

3.0

4.0

5.0

3.0

4.0

長い間ホームページを作っていると、ページ全体の構成を変えたり、引っ越ししたりすることがある。この場合に問題になるのが訪問者に登録してもらったブックマークやお気に入りの存在だ。以前の訪問者がブックマークをたよりに再び訪れてくれても、そのページが「Not Found」ではちょっと申し訳ない気分になるのではないだろうか？ こんなときに活用できるのが今回のクイズだ。左のサンプルでは、5秒後に特定のページに自動的にジャンプさせている。解答の形式としては、「ジャンプの方法」、「秒数」、「指定ページ」のセットが正しい使い方をされていれば正解とする。みなさんからの多数の応募を期待している。
ヒン
トQ U E S T I O N「再読み込み」、「秒数」、「URL」を指定するには……

2 キャッシュを無効にせよ！

3.0

4.0

5.0

3.0

4.0

WWWブラウザーには、一度読み込んだページを保存しておいて、再度読み込むときにそのページを高速に表示させる「キャッシュ」という機能がある。この機能は時間を節約するのに非常に便利だ。しかし、最新のデータを表示できない場合があるという欠点もある。たとえば、画像を変更したのに古い画像が表示されてしまうといった経験のある人もいるだろう。これはキャッシュのデータが表示されていることが原因なのだ。ホームページを作っているとキャッシュされないほうが便利な場合もあるだろう。そんなときに使いたいのが今回のクイズだ。<META>タグだけで解決できる問題なので、ぜひチャレンジしてほしい！
ヒント「no-cache」と何かを組み合わせれば……

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

INTERNET magazine 1999/3287

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