このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい問題だ。そこでこのコーナーでは、TIPSご藤井 幸孝 川田 哲 大内 勇とにブラウザーの対応状況をアイコンで表している（3月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

ついにIE 5の正式版が登場した。IE 5にはボタンやアドレスバー、履歴や検索3.0に関する機能だけでなく、HTMLやスタイルシート、JavaScriptにも新しい機能が続々と追加されている。この連載でもすでに2か月前からIE 5のテクニ4.0ックを紹介しているが、ようやく自分のページでもそれが実際に使えるように5.0なったわけだ。それでは今月もさまざまなTIPSとTRICKを紹介しよう。
3.0

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

4.0

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

4月号「HTMLパズルに挑戦しよう」の解答
ブラウザーの種類やバージョンの識別と同様に、navigatorオブジェクトを使えば簡単に解ける問題だった。ほ
かにもnavigatorオブジェクトでは、プラグイン、言語（英語や日本語）、MIMEタイプを使った判別などもできるので挑戦してみよう。それでは、解答を発表する。

A N S W E R

1 Javaが 使用可能か判別せよ！

javaEnabledメソッドを使ってJavaが実行可能かどうかを調べる。javaEnabledは実行可能ならtrue、実行不可ならfalseを返す。
<SCRIPT LANGUAGE="JavaScript">function checkjava() {if (navigator.javaEnabled() == true)
location.href="tipsjava.html";
else alert("Javaアプレットが使用可能な状態になっていません。");}</SCRIPT><A HREF="javascript:checkjava();">HTML……</A>

A N S W E R

2 OSを判別しろ！

正解者：熊本芳朗、加島佳代子、池永達美、杉本敬治、azuma、いのうえ、佐伯衡、堀江、田中博英、鹿倉隆、うおまさ＠home、廣瀬道雄、齊藤貴志、
広末宜之、阿部香（敬称略）

platformプロパティーにはプラットホーム名が入っている。substrメソッドを使って先頭の3文字を抜き出して判別する。Windowsの場合は「Win」と比較すればよい。
<SCRIPT LANGUAGE="JavaScript">function checkos() {if (navigator.platform.substr(0,3) == "Win")location.href="tipswin.html";
else alert("Windowsではありません。");}</SCRIPT><A HREF="javascript:checkos();">HTML……</A>

322 INTERNET magazine 1999/5

正解者：熊本芳朗、杉本敬治、azuma、いのうえ、佐 伯 衡 、 田 中 博 英 、 堀 江 、 鹿 倉 隆 、 うおまさ
＠home、廣瀬道雄、齊藤貴志、阿部香（敬称略）

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

T IPS & T R ICKS

1
日本語入力システムを制御する
5.0
今月ついに正式版が公開された
IE 5の最新のTIPSをお届けしよう。
フォーム内のテキスト入力欄に文字を入力する際に、日本語入力システム（IME）を制御するというものだ。左のサンプルではいくつかテキスト入力欄が並んでいるが、「名前」の欄を選ぶと入力モードが全角ひらがなになり、「メールアドレス」の欄を選ぶと半角英数字の直接入力になる。日本語入力システ
ムを禁止して、ユーザーに全角では入力させないようにもできる。アンケートのページを作るときなどにたいへん役に立つ機能だ。IE 5から登場した新しいスタイルシートを使った簡単なTIPSなので、さっそ
く自分のページで試してみよう。

ime-mode: active

ime-mode: inactive

ime-mode: disabledd<INPUT TYPE="text" NAME="url" STYLE="ime-mode:disabled;"><TEXTAREA ROWS="5" COLS="80" NAME="kanso"
STYLE="ime-mode:active;"></TEXTAREA>

IE 5のスタイルシートに新しく「ime-mode」プ「auto」を指定すると、テキスト入力欄にフォーカ

サンプルの「ホームページアドレス」のように、半ロパティーが追加された。このプロパティーを指定

スを合わせる前の日本語入力システムの状態をそ

角文字しか使わない欄には「disabled」を指定すすると日本語入力システムを制御できる。当然だのまま引き継ぐ。
「active」を指定すると、以前のればいいだろう。これによって半角文字が必要な欄が、「TYPE="text"」を指定した<INPUT>タグや状態に関係なく文字を入力するときに日本語入力に全角文字を入力するという間違いが防げる。逆<TEXTAREA>タグといったテキスト入力欄でこのシステムが起動するようになる（通常は「全角ひらに、日本語を入力させる欄には「active」を指定しプロパティーを指定しないと意味がない。

がな」になる）。キーボードやマウスを使わなくててあらかじめ切り替えておけば、ユーザーが自分でも自動的に日本語入力になるのだ。逆に、日本切り替える手間が省ける。このようにテキスト入力

ime-modeプロパティーには、次の4つの値を指語入力ができないようにするには「inactive」か欄 によってime-modeプロパティーの値を変えれ定できる。

「disabled」を指定すればいい。「inactive」とば、日本語入力システムの起動と停止を自動的に「disabled」の違いは、ユーザーが自分で日本語行える。

自動設定

入力を再 び起動できるかできないかだ。
「inac-active

日本語入力システムの起動

tive」を指定すると半角入力の状態からキーボー

3月号で紹介した<RUBY>タグのように、IE 5ではinactive

日本語入力システムの停止

ドやマウスで再び日本語入力モードにできるが、日本語環境をサポートする機能が増えた。入力欄（あとで起動可能）「disabled」を指定したテキスト入力欄にフォーカで半角と全角を頻繁に切り替える必要があるフォスがあると日本語入力システムがいっさい起動でームを作るときにはこのTIPSを活用してみるといきなくなる。

いだろう。

auto

disabled 日本語入力システムの停止（あとで起動不可）

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

INTERNET magazine 1999/5323

T IPS & T R ICKS

2
メディアプレーヤーを制御する
4.0

5.0

1998年3月号のこのコーナーでActiveXコントロールを使ってサウンド再生を制御するTIPSを紹介したのを覚えているだろうか？ 現在
マイクロソフトのメディアファイル再生用のコンポーネントは、ウィンドウズメディアプレーヤーとして更に進化を遂げた。ASF（MPEG-4）、RealAudio4、RealVideo4、MIDI、AVI、WAV、MPEG-1、MPEG-2、QuickTime、SND、AU、MP3な
ど実に多くのファイル形式に対応したメディアプレーヤーは、IE 5からは標準コンポーネントとなった。
IE 4でも、マイクロソフトのサイトからダウンロードすれば利用できる。
今回はメディアプレーヤーの基本的な使い方を紹介しよう。

ShowControls
ShowTracker
ShowPositionControls
ShowAudioControls
ShowGotoBar
ShowDisplay
ShowStatusBard<OBJECT CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><PARAM NAME="FileName" VALUE="media.mpg"><PARAM NAME="ShowControls" VALUE="True"><PARAM NAME="ShowTracker" VALUE="True"><PARAM NAME="ShowDisplay" VALUE="True"><PARAM NAME="ShowGotoBar" VALUE="True"><PARAM NAME="ShowStatusBar" VALUE="True"></OBJECT>

ウィンドウズメディアプレーヤーを使ってファイページの中にビデオを表示し、制御機能もフル活ShowAudioControls

ルを再生するのにもっとも簡単な方法は、次のよ用したいという場合には、<OBJECT>タグまたはShowPositionControls

うに<A>タグでファイルにリンクを張ることだ。

<EMBED>タグを使用する。今回は<OBJECT>

音量コントロール
早送り、巻き戻しボタンなど

タグの解説をしてみたい。基本的なところは普通

ShowTracker

再生位置スライドバーのA c t i v e X コントロールの組 み込 みと同じだ。

ShowDisplay

タイトル・著作権領域<OBJECT>タグのCLASSID 属性でメディアプレ

ShowGotoBar

関連リンクバー

ただしこの方法ではメディアプレーヤーはブラウザーヤーのクラスIDを指定する。付録 CD-ROMにShowStatusBarーの外部ソフトとして起動されてしまう。ページの収録したサンプルの HTMLをテキストエディター中に埋め込んで表示したい場合には<IMG>タグで開 いて、コピー＆ペーストで自分 のH T M L に

ShowAudioControlsとShowPositionControlsのDYNSRC属性を使う。

<OBJECT>タグをコピーしてほしい。の2つのパラメータは、ShowControlsに含まれる。

<A HREF= "media.mpg">……</A>

ステータスバー

またShowGotoBarとShowStatusBar の2つは<IMG START=1 LOOP=0 DYNSRC=

次に、このコントロールのパラメータを指定する。

デフォルトでは非表示になっているので、「True」"media.mpg">

次のパラメータを「True」または「False」に設定に設定すれば、すべての制御パネルや情報パネルすれば、ビデオの下にある制御パネルの表示と非を表示させられる。ミュートや音量調節、早送りな表示の切り替えが可能だ。

ど多彩な機能が使用できるようになるので、画面

しかし、この方法だとメディアプレーヤーの機能サイズに余裕があればすべて表示させてみてはどの一部しか利用できない。
ShowControls

324 INTERNET magazine 1999/5

コントロールバー

うだろうか。

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

T IPS & T R ICKS

3ボタンにアイコンを付ける
4.0

5.0

TIPS1の日本語入力システムの制御に続き、フォームを使ったテクニックをもう1つ紹介しよう。左のサンプルのフォームには封筒のアイコンが描かれたボタンがある。このボタンを押すと、アイコンごとボタンがへこみフォームの内容が送信される。このようにフォームの意
味を表すわかりやすい絵を付ければ、ただのボタンよりもずっと押してもらいやすくなるのではないだろうか。しかけはいたって簡単だ。先月号のTIPS 3 のようにスタイルシートの枠線を操作しているわけではない。ボタン全体を画像にしているわけでもない。だれでも知っている<IMG>タグともう1つ何かを組み合わせればすぐにできあがる。

d<BUTTON TYPE="SUBMIT"STYLE="width: 200px; background-color: #FFC000;"><IMG SRC="MAIL.GIF" ALIGN="absmiddle"><FONT SIZE=5 COLOR="#FF0000"><B>送信！</B></FONT></BUTTON>

せっかくきれいなページを作ったのに、フォーそれだけなら<INPUT>タグと何も変わらないよう1月号の「フォームをデザインする」で紹介したよう

ムのボタンのデザインが変えられなくて困るというに思えるかもしれないが、<BUTTON>〜</BUT-に、フォームの部品にもスタイルシートを指定できことがあるだろう。このテクニックを使えば、地味TON>の間には、普通の文字だけでなくタグも書ける。< B U T T O N > タグにスタイルシートのb a c k

なフォームもぐっとわかりやすく見栄えのするものるのだ。上のサンプルでは、<FONT>タグを使っground-color やbackground-imageを指定すに変わる。て文字を大きめにし、赤い色を付けている。<BR>

れば、ボタンの背景に色を付けたり画像を敷いた

タグを使えばボタンの上のテキストに改行を入れらりすることも可能だ。たとえば背景画像を指定す

このサンプルのボタンは<INPUT>タグの代わりにれる。<MARQUEE>タグを使えばボタンの上で文るには次のようにする。

<BUTTON>タグを使っている。<BUTTON>タ字の自動スクロールもできる。

グのTYPE 属性の値として「SUBMIT」（送信）、ということは、当然<IMG> タグも使えるはずだ。

「RESET」（リセット）、「BUTTON」（ただのボタン）

背景を透過させたGIFファイルを用意して、<IMG><BUTTON STYLE="background-image:url (back.gif)">のどれかを指定すれば、<INPUT>タグのTYPE属

タグを<BUTTON>〜</BUTTON>の間に置く。

性で指定した場合と同じ機能を持 つボタンが作<IMG>タグの横には説明用の文字を並べる。ここのサンプルは IE 4以上でしか 動 作しないが、成できる。<INPUT>タグではVALUE属性でボタれでデスクトップ上のアイコンやウィンドウのツール<BUTTON> タグはHTML 4.0に採用されているンの上に表示される文字を指定するが、<BUT-

バーのようなわかりやすいボタンができあがる。画ので、ネットスケープコミュニケーターの次期バー

TON>タグでは<BUTTON>〜</BUTTON>に囲像にアニメーションGIFを使えばさらに楽しいボタジョン5ではサポートされるようになるだろう。

まれた文字がボタンの上に表示される。

ンになるだろう。

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

INTERNET magazine 1999/5325

T IPS & T R ICKS

4ウィンドウを自動的に閉じる
4.0

5.0

3.0

4.0

H T M LではT A R G E T 属 性 に「̲blank」を指定してリンク先のページを新しく開いたウィンドウに表示させるテクニックがある。また、同じようにJavaScript の「open」メソッドで2 つ目のサブウィンドウにアナウンスなどを表示させることも可能だ。このコーナーの読者なら、これらのテクニックはもうご存じだろう。だが、新しく開いたウィンドウはすぐ邪魔になって困るという人はいないだろうか？ ウィンドウが必要なくなったら「×」ボタンを押して閉じればいいのだが、それもなかなか面倒だ。ここでは訪問者の手間を省かせるために、開いたウィンドウを自動的に閉じるスクリプトをご紹介しよう。

d<BODY onBlur="window.close () ;">まずはサンプルの2つの画面を見てほしい。上ろ」ということを表している。このTIPSは、たった

なお、ウィンドウを閉じるこのスクリプトは、「win-の画面では手前に小さいウィンドウが表示されてこれだけのスクリプトを記述するだけで実行できてdow」を省略して単に「close()」だけでも動作いるが、下の画面ではそれが消えている。小さいしまうのだ。最近、このコーナーの内容が難しくてする。

ウィンドウが別のウィンドウの後ろに回り込んだわ

敬遠気味だった読者には、ぜひ試してみてほしい。
最後に、もうご存じだとは思うが、ページが読み込

けでも、「×」ボタンを押してウィンドウを閉じたわ
けでもない。スクリプトを使って、ウィンドウが非ア

単純にウィンドウを閉じるだけでなく、閉じる前にまれたときに小さいウィンドウを新しく開くためのクティブな状態になったら自動的に閉じるようにし何かの処理をしたい場合は、次のように<SCRIPT>

スクリプトも紹介しておこう。ているのだ。
「非アクティブなウィンドウ」とは、ウィタグを作って「onBlur」から呼び出される関数を作成し、関数の中で「window.close ();」を呼ぶ。

ンドウズならタスクバーに表示されているアプリケーション（ウィンドウ）の中で、その時点では前面で<BODY onLoad="window.open('sub.html',使われてないウィンドウのことだ。それでは、この<BODY onBlur="closeWin ( );">

スクリプトの説明をしよう。

<SCRIPT LANGUAGE="JavaScript">function closeWin ( ) {IE のようにブラウザーによっては、スクリプトを使上のスクリプトは、新しく開かれるウィンドウの（目的の処理）って開いたウィンドウは「window. close ();」で自window.close ( );動的に閉じられるが、TARGET属性を使って開いHTML に記述するものだ。<BODY> タグの「onBlur」は、「ウィンドウが非アクティブになったとき」を表し、「window.close ();」は「ウィンドウを閉じ326 INTERNET magazine 1999/5'sub','width=200,height=110');">}たウィンドウでは閉じる前にメッセージが表示され</SCRIPT>る場合もある。

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

T IPS & T R ICKS

5
Waveフィルターでアニメーション
4.0

5.0

99年1月号と2月号に続き、フィルターとスクリプトを組み合わせたアニメーションをご紹介しよう。今回取り上げるフィルターはWaveフィルターで、その名のとおり文字や画像に波状にゆがむような効果を与えるものだ。スクリプトで一定時間ごとにWaveフィルターの値を変更すれば、文字や画像がうねるようなアニメーションを作り出すことができる。原理は今までこの連載でご何度も紹介してきたアニメーションの方法とほとんど同じなのでそれほど難しくはないだろう。また、今回は複数のタイマーを使って2つ以上の文字や画像に対して同時に別のアニメーション効果を与える方法についても見てみよう。

d1<SCRIPT LANGUAGE="JavaScript">function Wave ( ) {if ( SAMPLE2.filters ["Wave"].Strength > 0 ) {SAMPLE2.filters ["Wave"].phase += 16;ÀSAMPLE2.filters ["Wave"].Strength -= 1;} else {clearInterval ( tid );B̀}}function Start ( ) {setInterval ('SAMPLE.filters ["Wave"].phase += 8;', 200);
tid = setInterval ("Wave ()",100 );}</SCRIPT>

2<DIV ID="SAMPLE"
STYLE="position:absolute; left:50; top:50;
Filter:Wave (Add=0,Freq=1,LightStrength=0,Phase=0,Strength=8 );"><IMG SRC="FLAG.GIF" WIDTH="210" HEIGHT="170"></DIV><DIV ID="SAMPLE2"
STYLE="position:absolute; top:300; text-align:center;
Filter:Wave (Add=0,Freq=5,LightStrength=0,Phase=0,Strength=100 );"><IMG SRC="QUEST.GIF" WIDTH="155" HEIGHT="150"></DIV><BODY onLoad="Start ();">

Waveフィルターには次のようなパラメータがある。に応じて調節する。ソースの2は、2つの画像にように複数のオブジェクトに効果を加えるには、そフィルターを設定したものだ。

れぞれのオブジェクト用に関数を用意し、複数のタイマーを使って別々に関数を実行すればいい。

元のオブジェクトとの合成

そして、ソースの1のようにスクリプトでPhase パ

1つのタイマーを使って複数の関数をまとめて実行（0：合成しない、1：合成）

ラメータを一定時間ごとに変えていけば、まるで画してもいいが、タイマーを複数用意すればオブジェ波の数像がうねっているようなアニメーションができる。こクトによってインターバルを変えられるし、途中でアLightStrength 波に当たる光の強さ

A
れだけでも十分だが、これに加えて1の`のようニメーションを終了するオブジェクトがある場合にPhase

波の始まる位置にStrengthパラメータやFreqパラメータを変化さB
は、1の`のようにタイマーIDをクリアすればいい

Strength波の幅せると、崩れた状態から時間がたつにつれてだんだけなので、スクリプトがスッキリとした形になる。

Add
Freq

だん元に戻っていくアニメーションになる。もちろ
アニメーションの方法はこれまでご紹介してきたもんその逆も可能だ。LightStrength パラメータをなお、タイマーを設定する場合は、次のように関数のと同じで、あらかじめ文字や画像などのオブジ変えると波に当たる光の強さが変わる。このようを用意せずに変更部分をそのまま書けることも付ェクトにフィルターをかけてからスクリプトを使ってにWaveフィルターを使えば、さまざまなバリエーけ加えておこう。

パラメータを一定時間ごとに変えていけばいい。

ションのあるアニメーション効果を作成できる。

ここで注意することは、Addパラメータを必ず0にすることだ。1にすると元のオブジェクトと一 緒に1月号や2月号では、1つのオブジェクトに対してア表示されてしまう。それ以外のパラメータは必要

ニメーション効果を加えていたが、このサンプルのインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

setInterval ('SAMPLE.filters ["Wave"].
phase += 8;', 200 );1999/4INTERNET magazine 1999/5327

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

今月のテーマロード時の動作を制する
今回のパズルでは、ページがロードされたとき、つまり 読み込まれ たときにさまざまな効果を出すスクリプトについて考えていただく。このコーナーでは今まで多くのパズルを出題してきたが、スクリプトを使ったものは初心者 にはやや難しかっ「HTMLパズルに挑戦しよう」
宛 先たかもしれない。そこで1〜2行の短いスクリプトで効果が出せるパズルDを2問用意してみた。今回は正解者欄にあなたの名前を載せる絶好のチ

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

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

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

Q U E S T I O N

1 フレームをクリアせよ！

3.0

4.0

5.0

3.0

4.0

フレームを使ってリンクを設定すると、普通はリンクのあるフレームにページが読み込まれてしまう。自分のページに他人からフレームを使ってリンクされると、自分のページが他人のページの一部に見えてしまうことがある。
フレームは登場してから長い間そうしたトラブルの種になってきたが、第 1
問ではこのことにスポットを当ててみた。分割されたフレームの片方に自分のページが読み込まれたときに、即座にフレームを解除して自分のページを全面に表示させる方法を考えてほしい。最近ではフレームを悪用して他人のページのデータを盗めるブラウザーのバグも報告されているので、こうした技を知っておくといいだろう。
ヒント

Q U E S T I O N

自分自身のフレームは「self」、最上位は「top」…

2 ブラウザーのサイズを指定せよ！

4.0

5.0

4.0

ホームページを作っているみなさんは、自分のページのデザインやレイアウトにはかなり気を使っているだろう。最近ではスタイルシートを取り入れているページも多くなり、レイアウトが大幅に崩れているページを見かけることは少なくなってきた。しかし、テキストなどの改行位置はブラウザーのサイズに依存してしまうので、レイアウトを完全に指定することはできない。
そこで2 問目はページが読み込まれたときにブラウザーのサイズを変更して、作者の意図したとおりのレイアウトを完璧に実現する方法を考えてほしい。IEとナビゲーターでは実行結果に違いが出てしまうが、スクリプトの基本的な部分が合っていれば正解とする。
ヒン
ト328 INTERNET magazine 1999/5

サイズの変更を英語で言えば、「リサイズ」だ……

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.