第 36 回

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

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

今月の特集「冬休みのホームページグレードアップ大作戦」は読んでいただけ
3

たかな？ この連載では味わえないCGIなどのさまざまなテクニックが満載だ。
TIPS & TRICKSだけでは飽き足らない欲張りな人はぜひ挑戦してほしい。

4

TIPS & TRICKSも負けてはいられない。今月はFlashを操作する2つの5

TIPSを中心として、この連載でしか味わえない最先端の技をお届けしよう。
3

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

4

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

1月号「HTMLパズルに挑戦しよう」の解答
難易度が低い割には応募数が少なかったのは残念だ。時間を操作するテクニックはJavaScirptの基本なので、ぜひ使いこなせるようになっておこう。ここでは、解答のうちスクリプト部分だけを掲載しているが、付録CDROMにはHTMLのほかの部分も収録しているので参考にしてほしい。

A N S W E R

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

JavaScriptのDateオブジェクトを使って、現在時刻と2000年1月1日0時を比較し、その結果に応じて異なる画像を表示するだけなので、比較的簡単だ。
<SCRIPT LANGUAGE="JavaScript">
nowTime = new Date ( );Y2 = new Date ( 2000, 0, 1 );countDown = Y2.getTime ( ) - nowTime.getTime ( );if ( countDown > 0 ) document.write ("<IMG SRC='before.gif'>");
else document.write ("<IMG SRC='after.gif'>" );</SCRIPT>A N S W E R

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

正解者：正解者：山口雅仁さん、村田正彦さん、よしともさん、Libretto 30さん、うおまさ@homeさん

まず、1問目とほぼ同じ要領でカウントダウンまでの秒数を得ている。あとは空のレイ
ヤーに文字列を表示する方法を知っていれば解ける。
<SCRIPT LANGUAGE="JavaScript">function time ( ) {nowTime = new Date ( );Y2 = new Date ( 2000, 0, 1);countDown = ( Y2.getTime ( ) - nowTime.getTime ( ) ) / 1000;
countDown = Math.ceil (countDown);
if ( document.layers ) { document.timer.document.open ( );document.timer.document.write ( countDown);
document.timer.document.close ( ); }else if ( document.all) timer.innerHTML = countDown;}</SCRIPT><BODY onLoad="setInterval ( 'time ( )', 1000 ) "><DIV ID="timer" STYLE ="position: absolute;"></DIV>

320 INTERNET magazine 2000/2

正解者：山口雅仁さん、村田正彦さん、よしともさん、Libretto 30さん、うおまさ@homeさん

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

Dateオブジェクト（デイトオブジェクト）：JavaScriptで日付や時刻を計算するときに使う。年を取得するgetYearや時刻を取得するgetHoursなどのメソッドがある。

©1994-2007 Impress R&D

T IPS & T R ICKS

1
日替わりでメッセージを表示する
5
今月は初めにIE 5でサポートされている変わった機能を利用して、毎日アクセスするたびに違ったメッセージをページ上に表示させる方法を紹介しよう。このサンプルには「Today's TIPS」コーナーがあり、訪れたユーザーに毎日1つずつちょっとしたHTMLテクニックを教えてくれる。JavaScriptに慣れた人
なら、日付を判定してdocument.
writeで書き込めばいいと思うかもしれないが、それではHTMLファイ
ルの中に366個の文字列を書かなければならない。それではページを編集するのがたいへんな作業になってしまう。IE 5なら、用意したメッセージを簡単にページの中に埋め込む方法があるのだ。

d1<STYLE TYPE="text/css">#msg { behavior:url ( #default#download ); }</STYLE>2<BODY onLoad="DownloadStart ( )"><P ID="msg"></P>

3<SCRIPT LANGUAGE="JavaScript">
var today = new Date ( );var m = today.getMonth ( ) + 1; if ( m < 10 ) m = "0" + m;
var d = today.getDate ( ); if ( d < 10 ) d = "0" + d;function DownloadStart ( ) {msg.startDownload ( m + "" + d + ".txt", DownloadDone );}function DownloadDone (s) {msg.innerHTML = s;}</SCRIPT>

このサンプルで表示される日替わりメッセージ

込んで、その内容をJavaScriptで処理できる機能

は、1日ずつ別々のテキストファイルに書かれていが付いた。ソース1を見てみよう。これは「msg」

関数DownloadStartでは、DHTMLビヘイベアにる。1月1日なら「0101.txt」、11月23日なら「1123.というID名のタグにDHTMLビヘイビアを指定す

よってmsgオブジェクト（つまりID名「msg」の<P>txt」のように、日付をファイル名に付けて保存しるスタイルシートだ。1999年12月号の「訪問したタグ）に追加されたメソッド「startDownload」をておけば管理が楽だ。こうして作った366個のファ呼び出す。1番目の引数はダウンロードするファイ

イルをサーバー上にアップロードして、日付に合わ

回 数 を記 録 する」と仕 組 みは同 じだ。今 回 は「url ( #default #download )」と指定して、タグにフせてその内容が自動的にページに埋め込まれるよァイルのダウンロード機能を付けている。ている。2番目の引数はダウンロード終了後に呼要はないだろう。

ル名だ。ここでは日付からファイル名を組み立てび出される関数名だ。

うにしたい。

ファイルのダウンロードが終わると、関数「Down考えられるのは、フローティングフレーム（<IFRAME>

ソース2の「msg」というID属性のある<P>タグタグ）を埋め込み、JavaScriptでSRC属性を変更がダウンロード機能を追加したタグで、ここにメッloadDone」が呼び出される。このときの引数「s」することだ。そうすればIE 4でも表示できるようにセージが表示される。ページが読み込まれたときがファイルの内容になる。これをmsgオブジェクトなるが、ページの動作が重くなるし、サンプルのよに表示されるように、<BODY>タグのonLoadイのinnerHTMLプロパティーに代入するだけでメッ

うに読み込んだ内容がページと一体化しているよ

ベントで関数「DownloadStart」を呼び出す。

セージが表示される。

うな効果は出せない。
ソース3のスクリプトを見てみよう。まずDateオブ

このテクニックが使えれば、いろいろな応用が考えそこでIE 5の新機能の出番になる。IE 5では、外ジェクトを使って日付を取り出す。これはこの連載られる。
「今日のできごと」や「今日の誕生花」を表部にあるテキストファイルやHTMLファイルを読みで何度も紹介したテクニックなので、説明する必示するページを作るのも難しくない。

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

DHTMLビヘイビア（ディー・エイチ・ティー・エム・エル・ビヘイビア）：IE 5の新機能で、スタイルシートとスクリプトを使ってタグに独自の機能を追加する仕組み。

©1994-2007 Impress R&DINTERNET magazine 2000/2321

T IPS & T R ICKS

2
Flashを操作する その1
345

みなさんはFlashをご存じだろうか。名前は知らなくてもウェブを見ていれば、少なくとも一度はFlashで作成されたページを目にしているはずだ。
「Flash」と言っても意味は2つあり、1つは再生するプレイヤーで、もう1つは作成するためのオーサリングツールだ。 今 回のTIPSでは、後者を使って作成したFlashメディアをJavaScriptを使って制御することに挑戦する。左のサンプルでは、｢Zoom-In｣ボタンと｢Zoom-Out｣ボタンを押してFlashメディアを拡大させたり縮小させたりしている。Flashメディア
は右クリックメニューで操作するだけでなく、このような使い方もできるのだ。

d1

4<OBJECT
CLASSID="clsid :D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="300" HEIGHT="300" ID="sapporo_map"><PARAM NAME="MOVIE" VALUE="sapporo.swf"><PARAM NAME="QUALITY" VALUE="autohigh"><EMBED SRC="sapporo.swf" WIDTH="300" HEIGHT="300"
NAME="sapporo_map" QUALITY="autohigh" SWLIVECONNECT="true"></EMBED></OBJECT><FORM><INPUT TYPE="button" VALUE="Zoom-In" onClick="swfZoom (50)"><INPUT TYPE="button" VALUE="Zoom-Out" onClick="swfZoom (200)"></FORM>

2<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == "Netscape") { swflash = document; }if (navigator.appName == "Microsoft Internet Explorer") { swflash = window; }function swfZoom (n) {swflash [ "sapporo_map"].Zoom (n);}</SCRIPT>F l a s h を 使 っている人にとってソース1 の<OBJECT>タグ（ActiveXコントロールの指定）になっていなければ、このサンプルは動作しないの

メディアはナビゲーターではdocumentオブジェクで注意しよう。

トの、IEではwindowオブジェクトのプロパティーとして扱われる。

や<EMBED>タグ（プラグインの指定）は見慣れているだろう。手で書き写すのは面倒だろうから、ソース1の< F O R M >タグはボタンのクリックで付録 CD -ROMに収録されているソースをコピー「swf Zoom」関数を呼び出すための記述で、関このTIPSの核となる関数「swfZoom」では、swflashのかっこ（ [ ] ）の中 に<OBJECT>タグやすればいい。なお、上記のソースではCODEBASE数の引数には拡大や縮小の倍率を設定する。サ

<EMBED>タグで指定したID属性やNAME 属性属性やPLUGINSPACE属性は省略している。

ンプルでは引数に50（拡大）と200（縮小）を設定の「sapporo̲map」を入れて、Zoomメソッドでしている。拡大と縮小の値が逆のようだが、100Flashメディアを拡大させたり縮小させたりする。

<OBJECT>タグや<EMBED>タグに関しては特を引数で割った値が拡大率になるので、これでよ｢n｣ にはボタンのonClickイベントで渡された引に説明はしないが、<EMBED>タグの中に普段いのだ。

数が入る。この引数の値に応じて拡大率や縮小率が決定される。

は使うことのないSWLIVECONNECT属性を設定しているので、これについて説 明しておこう。

ソース2を見てみよう。ここでは最初にナビゲー

SWLIVECONNECTは、ナビゲーターのJavaでターとIEを判別して、変数「swflash」の値を指定

以上で今回のTIPSは完成だ。訪問者が右クリッFlash メディアを操作する際に設定する属性で、している。ナビゲーターなら｢document｣が、IE

クでポップアップメニューを表示させる必要がな値は必ず「true」にする。ナビゲーターは Javaなら｢window｣ が、変数 swflash の値 になる。

いので、Flashの操作方法に慣れている人にとてScriptでプラグインを操作するときにJavaを起動

Flashメディアの扱いがIEとナビゲーターでは違うも歓迎される機能と言えるだろう。

する。ナビゲーターの設定が「Javaを有効にする」ために、このような手法をとっているのだ。Flash322 INTERNET magazine 2000/2

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

Flash（フラッシュ）：マクロメディア（株）によるアニメーション作成ツール。定価39,800円。プレイヤーは無償で配布されている。

©1994-2007 Impress R&D

T IPS & T R ICKS

3
Flashを操作する その2
3445

前ページではFlash メディアを拡 大させたり縮 小させたりするTIPSを紹介したが、単純に拡大するだけではその拡大した部分がどこにあたるのかがわかりにくい。そこで今度は拡大したあとに表示領域を移動するJavaScriptを紹介しよう。左のサンプルでは、地図の8方向に矢印がある。この矢印それぞれがFlashメディアの表示領域を移動させるボタンになっているのだ。サンプルのようにFlashを使って地図を作る際には、移動させるテクニックも知っておけば便利だ。拡大・縮小と移動のテクニッ
クを併せて使って、自分の住んでいる街の地図をホームページで公開してみよう。

d1<BODY onLoad="setTimeout ('swfZoom ( 50)', 500 ) ;">2<A HREF="javascript:void (0)" onClick="swfPan (-50,-50 ) "><IMG SRC="tips3a.gif" BORDER="0" ALT="左上に移動"></A>

3<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == "Netscape") { swflash = document; }if (navigator.appName == "Microsoft Internet Explorer") { swflash = window; }function swfPan(x,y) {swflash ["sapporo_map"].Pan ( x,y,0 );}</SCRIPT>

このTIPSも前ページと同じく、Flashメディア

ソース2の<A>タグを見てみよう。ここでは画像てもらうとして、最後の「Pan」だけを説明する。カ

をJavaScriptで操作する。違うのは、前ページがにリンクを設定している。リンク先のHREF属性はッコ内の「x」と「y」にはソース2の<A>タグで渡拡大と縮小の操作だったのに対して、今度は表示JavaScriptを使って無効にしており、onClickイされた引数が入る。これで移動するための矢印ボ領域の移動する点だ。ソース自体は前ページとほベントでソース3の関数「swfPan」を呼び出すよ

タンが押されるたびに、表示領域を移動させるメ

とんど同じなので、ここでは<OBJECT> タグとうにしている。関数swfPanのかっこ内には2つのソッドPanが呼び出されるのだ。

<ENBED>タグを省略してある。

引数を設定し、1番目が横方向の移動量（ピクセル数）になり、2番目が縦方向の移動量になる。上記

Flashメディアを拡大させておけば、マウスカーソ

まずはソース1だ。<BODY>タグにonLoadイベのソースでは左上に移動するためのボタンしか示

ルを上に載せるだけで自動的に手のマークに変わントを設定して、Flashメディアの表示を拡大させしていないが、8方向の移動を行っているので、実り、ドラッグして自在に移動できるのだか、地図サている。なぜあらかじめ拡大するのかというと、ソイトのようにボタンで明確に移動させたい場合もース3に「Pan」という命令があるが、これは移動際には<A>タグは8 個書かれている。それぞれの引数には左と上に移動させたい場合は「-」( マイさせる領域がない場合は機能しないからだ。初期ナス ) を付けた数値を設定し、右と下に移動させれだ。ぜひチャレンジしてみよう。

状態ではすべての領域が表示されて、移動させるたい場合はそのままの数値を設定する。

あるだろう。そのようなときに使ってほしい技がこ

なお、今回紹介したFlashを操作する2つのサン領域がないので、矢印ボタンが機能しなくなってしまう。なお、
onLoadでZoomを実行するとIEでソース3の最初の2 行は前ページと同じなので説プルは、いずれもマッキントッシュ版のIE 4.5では最大化 表示になってしまうので、setTimeout

明は省略。次に関数swfPanだが、これも「swflash[ "sapporo̲map" ] .」の部分は前ページを参照しは動作しないことに注意してほしい。

を使ってタイミングをずらしている。

インターネットマガジン／株式会社インプレスR&D引数（ひきすう）：JavaScriptの関数内で処理させるために、関数名の後ろにかっこで囲って指定する値。引数を変えれば、1つの関数でいろいろな動作ができる。

©1994-2007 Impress R&D

INTERNET magazine 2000/2

323

T IPS & T R ICKS

4
印刷機能を制御する
5
レストラン紹介サイトの地図やクーポン、気になる新聞記事など、ウェブページを印刷する機会は意外と多い。そんなとき、普通はブラウザーのメニューから「ファイル」→「印刷」を選んでプリントアウトする。しかしこれではメニューバーを隠したウィンドウの場合や、まだブラウザーに不慣れなユーザーの場合には不便なこともあるだろう。
そこで IE 5では新しくJavaScriptを使って印刷をサポートする機能が付いた。左のページにある「Print」
ボタンをクリックすると、メニューを選 んだときとまったく同じように「印刷」ウィンドウが開き、印刷することができる。今回はこの機能をマスターしよう。

d1<SCRIPT LANGUAGE="JavaScript">
var originalTitle ;function beforeprint () {originalTitle = document.title;
document.title = "iNTERNET MAGAZINE 記事より："+ document.title;
document.all.t1.style.fontFamily = "Times New Roman";}function afterprint () {document.title = originalTitle;
document.all.t1.style.fontFamily = "Comic Sans MS";}</SCRIPT>

2<BODY onbeforeprint="beforeprint()"
onafterprint ="afterprint()">3<FORM><input type="button" value="印刷" onClick="window.print ();"></FORM>

初めにページに「Print」ボタンを付けてみよう。と同じくIE 5で新たに追加されたイベントで、印刷わかるような簡単なものだ。beforeprintでは、変いつもフォームで使っているようなボタンをクリッの実行前と実行後に何らかの仕掛けを動かすこと

数「originalTitle」に文書のタイトル（document.

クすると、ブラウザーのメニューから「印刷」を選んができるようにするものだ。たとえば印刷前にタイt i t l e ）を 保 存 し て か ら 、 タ イト ル の 前 にだ場合と同じように印刷できるようにしてみる。

トルをわかりやすく変更し、印刷が終わったらサイ「iNTERNET MAGAZINE 記事より：」という文字

ソース3を見ればわかるとおり、これはとても簡単

ト全体のポリシーに合わせたものに変更する。ま列を追加している。また、ページの一部のフォンだ。IE 5で追加された新しいJavaScriptのメソッド「window.print ( )」をボタンのonClickイベントにたは、印刷前にフォントや背景色を変えて、印刷終ト を「 Times New Roman」に 変 え て い る 。

了後には元に戻す、というようなサービスが可能afterprintでは、変更した文書のタイトルを元に戻組み込めばいいだけだ。これだけで、Visual Basicになる。

で作られた普通のアプリケーションと同様に、わざし、フォントを「Comic Sans MS」に戻している。これで、印刷されたときに便利なように一時的にペわざメニューをたどらなくてもクリック1つで印刷で組み込みたい仕掛けは、
ソース1の「beforeprint」ージのスタイルを変更し、印刷が終わったら元のペきるようになる。と「afterprint」のようにJavaScriptの関数としてージに戻すという仕掛けができ上がる。

あらかじめ定義しておく。ソース2の<BODY>タ
さてこれだけでは面白くないので、もう1つちょっグのように、onbeforeprint イベントとonafter

このサンプルは新機能をチェックしてみるだけの簡とした仕 掛 けを組 み 込 んでみよう。ソース2のprintイベントが発生したとき、つまり印刷前と印単なものだが、ブラウザーで見たときと印刷したと<BODY>タグを見てほしい。ここに「onbeforeprint」

刷後にこの2つの関数がそれぞれ呼 び出されるよきとで表示を細かく調整するスクリプトを書けば、と「onafterprint」という2つのイベントが指定されているのがわかるだろうか。これはwindow.print ( )うにしている。

実用的なページもできるだろう。

324 INTERNET magazine 2000/2

2つの関数の内容はこの連載の読者ならひと目でインターネットマガジン／株式会社インプレスR&D

イベント：ウェブページ上でマウスを動かしたときやクリックしたときのように、「何々した場合」を表す。JavaScriptはイベントに合わせて動き出すように記述できる。

©1994-2007 Impress R&D

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

今月のテーマ

新年のあいさつを制する

大好評発売中！

最近は電子メールで 年賀状を出したり、元旦にホームページを更新して新年のあいさつを表示させたりしている人も多いのではないだろうか。そこで今回は、スクリプトを使ってページ上で自動的に「あけましておめでとうございます」などとあいさつ「HTMLパズルに挑戦しよう」
宛 先するパズルに挑戦していただく。これがわかれば、年賀状を出しそこねたD人も安心だ。大晦日までに問題を解いて2000年の元旦を迎えよう。ト

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

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

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

Q U E S T I O N

1 干支を計算せよ！

3

4

53

4

筆不精な人にとっては、毎年年賀状を書くのは何とも面倒なことだ。そこで1回作れば毎年使えるようになる年賀状をホームページに表示させてみよう。左のサンプルは、まったく同じスクリプトを使って毎年元旦にアクセスしたときだけに新年のあいさつを表示させるページだ。その年が何年かを表示させるだけでなく、干支を自動的に計算して2000年なら「辰」、2001年なら「巳」という文字を表示させる機能も付いている。解答はIE3やナビゲーター3でも表示できるものとすること。正解とは関係はないが、マイクロソフトオフィスなどに付属している和文フォントを持っているなら、雰囲気のある解答を作ってほしい。

ヒント

Q U E S T I O N

最初の子年は西暦4年……

2 英語と日本語であいさつせよ！

4

5

4

左のサンプルは第１問と同じく、毎年元旦だけに新年のあいさつを表示させるページだ。ただし、日本語のブラウザーでアクセスしたときと英語のブラウザーでアクセスしたときで表示が変わるようにしたい。これがわかれば新年のあいさつだけでなく、訪れた人の言語によって自動的に各国語のページにジャンプするなどの応用が利く。正解はシンプルなものだが、IEとナビゲーターでやり方が違うことに注意。IE 5では、「ツール」メニュー→「インターネットオプション」→「言語」で「変更」ボタンを押して英語表示を追加すればテストができる。なお、解答は英語でなくても日本語以外の外国語であればOKだ。
ヒン
トnavigatorオブジェクトのプロパティーを調べよう……

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

navigatorオブジェクト（ナビゲーターオブジェクト）：JavaScriptでブラウザーの情報を得るのに使われる。ブラウザーの種類を得るuserAgentなどのプロパティーがある。

©1994-2007 Impress R&D

INTERNET magazine 2000/2325

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