このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性

誰よりも早く最新のHTMLを使ってみたいの問題だ。そこでこのコーナーでは、TIPS

古澤祐治 白畑真

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

ナビゲーター4.0のバージョンは毎月のように更新され、その度にスタイルシートやダイナミックHTMLが充実してきている。なかでも「ダイナミックフォント」

3.0

はユーザーのコンピュータにないフォントを表示できるという、ウェブデザイナ
4.0

ー必見のうれしい機能だ。この最新情報ほもちろん、今月は、アクセス数倍増間違いなしの便利なTIPSとTRICKSを満載でお届けする。

3.0

4.0

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

7月号「HTMLパズルに挑戦しよう」の解答
JavaScriptを自力で書かなくてはならなかった先月のパズル。果たしてチャレンジャーはいるのか。そんな編集部の心配をよそに、すばらしいオリジナルスクリプトがいくつも届いた。お待たせしました。それでは7月号 背景色を制する の解答を発表しよう。

A N S W E R

1 オンデマンドで背景色を変えろ！

背景色を表す「bgColor」を使って関数を作り、これをアンカーで呼び出す。
<SCRIPT LANGUAGE="JavaScript">function chbgColor(col){ document.bgColor = col; }</SCRIPT><A HREF="JavaScript:chbgColor('red')">red</A>

A N S W E R

ANSWER 1 正解者の方々：松本貴嗣さん、相澤治郎さん、吉本克彦さん、ほか

2 バックグラウンドをフェードインさせろ！

0から255の10進数をfor文で滑らかに変化させて、2桁の16進数に変換する。
<SCRIPT LANGUAGE="JavaScript">function makearray(n){this.length = n;for(var i = 1; i <= n; i++) this[i] = 0; return this;}hex = new makearray(16);for(var i = 0; i < 10; i++) hex[i] = i;hex[10]="a"; hex[11]="b"; hex[12]="c";hex[13]="d"; hex[14]="e"; hex[15]="f";function hexen(i){if (i < 0) return "00"; else if (i >255) return "ff";else return "" + hex[Math.floor(i/16)] + hex[i%16];}function setbgColor(r, g, b){
var hr = hexen(r); var hg = hexen(g); var hb = hexen(b);document.bgColor = "#"+hr+hg+hb;}
function fade(sr, sg, sb, er, eg, eb, step){for(var i = 0; i <= step; i++){setbgColor(Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)),
Math.floor(sb * ((step-i)/step) + eb * (i/step)));}}
fade(0,0,0, 255,255,255, 255);</SCRIPT>

324 INTERNET magazine 1997/8

ANSWER 2 正解者の方々：相澤治郎さん、吉本克彦さん、山本達郎さん、ほか

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

T IPS & T R ICKS1
自分のページを検索されやすくする
3.0

4.0

3.0

4.0

このコーナーで紹介している便
利なTIPSなどを使って、なんとかホームページが完成したとしよう。
次に気になるのは「多くの人に見てもらいたい」ということだ。ユーザーは、検索サイトから目当てのページを探すことが多いはずだ。
そして、ほとんどの検索サイトでは、「ロボット」と呼ばれる自動収集プログラムを使ってキーワードと一致するページを見つけている。ということは、この検索ロボ
ットがキーワードを見つけやすいような工夫をすればいいはずだ。
それでは紹介しよう。今月のTIPS
第1弾は、「自分のページを検索されやすくする」だ。これさえあれば、アクセス数倍増も夢じゃない。

j http://www.apple.com/

d<META NAME="keywords"
CONTENT="html, tips & tricks, javascript, style sheet"><META NAME="description"
CONTENT="誰よりも早く最新のHTMLを使ってみたい">

検索対象にされたくなければページの内容によっては、検索サービスに見つけてほしくない場合もある。
検索サービスで使われている自動検索プログ
ラム「ロボット」は、<META>タグのなかに書かキーワードを記述する。複数ある場合は「,」で区切る。さらに、れたキーワードを優先的に発見する。このコーナー「TIPS & TRICKS」のホームページを作ったと仮定して、それぞれの値を入れてみた。それでは<META NAME="description"
CONTENT="誰よりも早く最新のHTMLを使ってみたい">

内容を見てみよう。
では、検索結果として表示される「ページの説明文」<META NAME="keywords"
CONTENT="html, tips & tricks, javascript, style sheet">を記述している。この場合は、「NAME」の値を「description」にする。次に、「CONTENT=」に続けて簡単なページの説明を書いておく。キー<META>タグは、<HEAD></HEAD>の間に記ワードや説明文に日本語を使う場合は、h自分のページを検索対象にされたくないが、ページ内のリンクをたどっても構わない<META NAME="ROBOTS"
CONTENT="NOINDEX">h自分のページは検索対象にしてもいいが、ページ内のリンクはたどってほしくない<META NAME="ROBOTS"
CONTENT="NOFOLLOW">述する。検索サービスを利用するユーザーは、最<META HTTP-EQUIV="CONTENT-TYPE"CONTENT="text/html;CHRSET=iso-2022-jp">

h自分のページを検索対象にされたくに伝 えていると思 えばいい。「N A M E 」の値 をのように、使っている文字コードを指定しておく「keywords」にする。
「CONTENT=」に続けて（本誌6月号のこのコーナー参照）。

<META NAME="ROBOTS"
CONTENT="NOINDEX, NOFOLLOW">

初に自分の見たいページに含まれる「キーワード」を入力する。ここでは、「こんなキーワードをお探しなら私のページにいらっしゃい」とロボット

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

ないし、ページ内のリンクもたどってほしくないINTERNET magazine 1997/8325

T IPS & T R ICKS

2
ダイナミックフォントを使う
4.0
アドビ社が開発した「アクロバット」という技術を使って作成した文書は、作る側が指定したフォントが読む側のコンピュータになくても、作者の意図どおりに再現できる。HTMLでも<FONT>タグやスタイルシートを使えばフォントの指定ができるが、読む側に指定したフォントがなければ意味がない。それでは、左の図を見てほしい。これはアクロバット文書ではなく、HTML で書かれたものだ。
ところが、これを見ているコンピ
ュータにないフォントも正しく表示されているのだ。では、どうやって。ついにHTMLもここまで来た。今月の目玉「ダイナミックフ
ォント」がこれを可能にするのだ。

j http://home.netscape.com/comprod/products/communicator/

d2 <FONT POINT-SIZE=28 FACE="Impress BT">

1<LINK REL=fontdef SRC="impress.pfr">

文字列</FONT>「ダイナミックフォント」は、フォント情 報 を<LINK REL=fontdef SRC="impress.pfr">「PFR（Portable Font Resource）」という形式のフ

WWWブラウザー側の設定が必要
ナビゲーター4.0には、ダイナミックフォ

ァイルに格納しておいて、ページが表示される際に<HEAD></HEAD>の間に記述する。ポイントはフォント情報を同時にダウンロードすることで、コ「SRC="impress.pfr"」だ。このimpress.pfrがフンピュータにないフォントでも再現できるという画ォント情報を持ったPFRファイルにあたる。次に、期的なものだ。1つのPFRファイルの大きさは数十2のタグのように<FONT>タグを使ってフォントをを選 び、「 A p p e a r a n c e 」 の項 目 のキロバイトと小さく、ダウンロードにかかる時間も指定する「Fonts」を選択する。ここにある「Use

ほとんど気にならない。PFRファイルは、今後ビットストリーム社から提供されることになっている。
また、ナビゲーターの次のバージョンには、PFRフ
ァイルを作成するためのプラグインが付属するとの<FONT POINT-SIZE=28 FACE="Impress BT">
文字列</FONT>こと。作成されたファイルは、著作権などを考慮しントを使うかどうかを設定する箇所がある。
「Edit」メニューから「Preference」

document-specified fonts, including
Dynamic Fonts」にチェックを付けよう。
反対に、セキュリティー面を考えるとこの機能を使いたくないという場合は、て、作 成 する際 に設 定 したドメイン（i m p r e s s .

「Impress BT」というフォントがコンピュータになco.jp など）以外では使えないようになっている。

くても、1で指定したimpress.pfrにこのフォントの「 Use document-specified fonts, but

いずれにしても、実際にこの機能を使えるようにな情報が組み込まれているため、ページは作者の意図disable Dynamic Fonts」にチェックをるには、もう少し時間がかかりそうだ。さて、内容したとおりに表示されるのだ。

付ければいい。

を見てみよう。まずは上記の1のタグから。

326 INTERNET magazine 1997/8

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

T IPS & T R ICKS

3
マウスカーソルの動きで文字が現れる
4.0
最近「ダイナミックHTML」という言葉をよく耳にするようになった。これまでのHTMLとは違い、ある動作や時間の流れによってページが動的に変化していくというものだ。先月のこのコーナーでも、いち早くエクスプローラ4.0のダイナミックHTMLを紹介した。それでは、 左 の図 を見 てほしい。
WWWブラウザーはナビゲーター
4.0 だ。このページでは、それぞれの項目にマウスカーソルを載せると、ページの下部に短い解説文が現れる。もうお分かりだろう。
ナビゲーター4 . 0 もダイナミックHTMLに対応しているのだ。今月の第3弾、このTIPSを読めば、あなたもダイナミックHTMLの使い手になれる。

j http://www.sdv.fr/arte/quizd/

1d<HEAD><LAYER name="text1_layer" top=400 left=100
visibility=hide>
カーソルを載せるとこの文字が現れます</LAYER>2<SCRIPT LANGUAGE="JavaScript">
var text1=document.layers["text1_layer"];</SCRIPT></HEAD><BODY><a href=""
onMouseOver="text1.visibility='show';"
onMouseOut="text1.visibility='hide';"><img src="menu.gif"></a></BODY>

ここでは、「LAYER」タグとJavaScriptのここまで記 述 したら、 このレイヤー部 分 を

onMouseOver="text1.visibility='show';"

組み合わせが使われている。まずは上のタグ1

JavaScriptで呼び出して使えるように名前をonMouseOut="text1.visibility='hide';">から。これは<HEAD>付けておく。

<img src="menu.gif"></a></HEAD>の間に記述する。

</BODY><SCRIPT LANGUAGE="JavaScript"><LAYER name="text1̲layer" top=400

var text1=document.layers["text1̲layer"];

これは、<BODY>

left=100 visibility=hide></SCRIPT>る。
「onMouseOver」は「カーソルが"menu.

カーソルを載せるとこの文字が現れます</LAYER></BODY>の間に記述すgif"の上に来たときは」を意味する。
「text1」
これで「text1」という名前でレイヤー部分をは先 に定 義 したレイヤ− の名 前 だ。 この操作できるようになった。タグ2は、マウスの「visibility」を「show（見える）」にすること「name」の値は、レイヤー全体の名前になる。

動きで文字列を表示させたり消したりする仕で、カーソルを載 せたら文 字 が表 示 される。

次の「top」と「left」の値は、ピクセル単位掛けにあたる。

次の「onMouse Out」は、カーソルが画像かの位置指定。ポイントは「visibility」の部分

ら外れたらもう一度文字を非表示にするためだ。この値を「hide」にすることで、<LAYER><BODY></LAYER>で囲まれた部分を非表示にできる。

<a href=""の記述になる。これで完成だ。

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

INTERNET magazine 1997/8327

T IPS & T R ICKS

4
ページの更新日を自動表示する
3.0

4.0

3.0

4.0

今月のTIPS 1では、ホームページのアクセス数を増やすために検索サービスに見つけられやすくするという工夫をした。ここで、もう1 つ忘れてはならないのが、ページを頻繁に更新して常に新しい情報を提供するということだ。多くのページでは、最終更新日を記述することで、ユーザーに情報が新しくなっていることをアピールしている。ところが、実際に更新作業をやってみると、これが意外に面倒な作業のうえに、ついつい日付を書きかえるのを忘れてしまう。そこで、今月最後のTIPSとして、毎日のようにページを更新するウェブマスター必見の「更新日自動表示法」を紹介しよう。

j http://www.dexnet.com/homesite/d<FONT FACE="Comic Sans Ms">
<SCRIPT LANGUAGE="JavaScript">
ページ更 新 日"+document.lastModified);
document.write("ペ</SCRIPT></FONT>

現在の日付も自動表示できる

JavaScriptには、ページの更新日（ファイル

新日 06/02/97/ 20:30:10」のように更新のタイに変更を加えた日）を自動的に表示するためのミングが表示される。ただし、これだけでは、な

ページの更新日だけでなく、ユーザーがページ便利な機能が用意されている。それでは、内容んの飾りもなく味気ない文字列となっていまう。

を見ているその日時を表示することもできる。

を見てみよう。

このコーナーの読者の方々なら、もう少し工夫がほしいはずだ。そこで、これを<FONT>タグで囲んでみよう。

<SCRIPT LANGUAGE="JavaScript">

document.write（"ページ更新日 "+document.lastModified）;<FONT FACE="Comic Sans Ms"></SCRIPT>（JavaScript）
これは、本文の中の好きな場所に記述してよい。

何種類かの方法があるが、最も簡単なのは<SCRIPT LANGUAGE="JavaScript">
document.write(date());</SCRIPT></FONT>だろう。これで、曜日、月、日、時間、年の「document.write」は続く「( )」のなかの内容をページに表示するための命令文だ。まず、「" "」ここではフォントの種類を定義しているだけだ順に日付が表示される。これだけでも、なんで囲まれた「ページ更新日」という文字が表示が、もちろん文字の大きさや色も指定できる。ペとなくページの情報が新鮮に感じられるから不される。次 に「+ 」の後 の「d o c u m e n t . l a s tージのデザインに合わせてフォント指定をすれば、思議だ。<FONT>で文字に飾りを付けるのをModified」が表示されるが、これが更新日を調スクリプトで自動的に表示させているとは思えな忘れずに。たった3行でできるJavaScriptを、べて自動表示するための命令文となる。以上をいほど自然な文字列ができあがるはずだ。あとは、ぜひ自分のページで生かしてほしい。

ページの始めや終わりに書いておけば「ページ更がんばってページの内容を充実させるだけだ。

328 INTERNET magazine 1997/8

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

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

今月のテーマポップアップメニューを制する先にも紹介したように、HTMLの世界は「ダイナミックHTML」が主流になろうとしている。ユーザーのアクションに応えてくれるような「動的」なページが求められているということだ。加えて、ナビゲーション機能なども重要になっている。そこで、今月はメニューなどをクリックすると「ポップアップメニュー」が現れて、リンク先の付加情報を表示するといったパズルに挑戦していただく。JavaScriptを使うことになるが、2問とも比較的簡単にできるはずだ。トリックが分かったらすぐに解答を送ってきてほしい。正解者にはダイレクトプラスを発行させていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ ポップアップメニューを制する にチャレンジ！

Q U E S T I O N

1「HTMLパズルに挑戦しよう」
宛 先D
正解が分かった人も、分からなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！
m ip-cdrom@impress.co.jp

3.0

4.0

3.0

4.0

ステータスバーにポップアップ！
一時期、ステータスバーに動くメッセージを流すという仕掛けがはやった。実は、これがユーザーの間ではかなりの不評で、最近ではあまり見かけなくなってしまった。でも、ステータスバーという貴重な場所を使わずにいるのもなんだかもったいない。もっとスマートにメッセージを表示できないものか。そこで、左の図を見てほしい。それぞれのメニューにマウスカーソルを載せると、ステータスバーに簡単な内容の説明が表示される。もちろんカーソルを外すと、文字が消えるから邪魔にもならない。
これが今月の最初のパズルだ。答えは2、3行で書けてしまう。ぜひ、便利でクールなこのテクニックをものにしよう。
ヒント「<A href=""」から始めて、「</A>」で終わる……

3.0

Q U E S T I O N

4.0

3.0

4.0

2

「ポン」と鳴るポップアップ！
ステータスバーだけではちょっと地味だという人もいるかもしれない。もっとアピールしたければ、目立つポップアップメニューを出してみよう。左の図では、メニューにマウスカーソルを載せると、小さなダイアログボッ
クスが現れる。もちろん、このなかに好きなメッセージを入れられる。さらに、ポップアップが表示される瞬間に「ポン」という音が出るから、ユーザーの注意を引きつけること間違いなしだ。リンク先の簡単な説明などを書いておけば、ページを見る側の興味は10倍。これが今月の第2問だ。
JavaScriptを使ってこの仕掛けを作ってみてほしい。個性たっぷりのオリジナルスクリプトをお待ちしている。
ヒント「ポン」という音は警告音。警告は「alert」……

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

INTERNET magazine 1997/8329

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