第 49 回

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

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

今月は少々変り種のサンプルを集めてみた。ウェブページを彩るテクニックは、

4

インターネットエクスプローラ4以上

5

インターネットエクスプローラ5以上

IE 6のうわさも聞こえてきたが、ちょっと一休みして、ウェブページを使ったト

5.5

インターネットエクスプローラ5.5以上

リックを楽しんでみよう。

4

ネットスケープナビゲーター4以上

6

ネットスケープ6以上

タグやスタイルシート、JavaScriptだけではない。その周辺のさまざまな技術や、サイト運営に役立つ知識にも気を付けておく必要があるだろう。そろそろ

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

M18

Mozilla（数字はMilestoneの番号）

2月号「HTMLパズルに挑戦しよう」の解答
1問目はスタイルシートのごく基本的な問題なのだが、解答者が少なかったのは残念だ。2問目は先月の出
題欄で示したファイルを探せばすぐ分かる。なお、出題者も気づかなかったOPTION:before { content:url(item.gif); }という別解を送ってくれた方がいた。

A N S W E R

1 メニューを色分けせよ！

6

ごく基本的なスタイルシートの問題。<OPTION>タグにスタイルシートの「background-color」で1つずつ別の色を付けていく。色をグラデーションにしたり、同じグループのものに同じ色を付けたりするなどの応用が考えられる。
<SELECT SIZE="1" NAME="ken"><OPTION STYLE="background-color: #FF8080;" VALUE="1">北海道</OPTION><OPTION STYLE="background-color: #FFFF80;" VALUE="2">青森</OPTION>：</SELECT>A N S W E R

2 メニューに画像を入れろ！

正解者：坂部和久さん、TROOMさん、Masahiko
Murataさん、冨園慎一郎さん、ENDEさん、山口雅仁さん、たいきさん、よしともさん<OPTION>タグに「display」と「list-style-position」を指定すると、<LI>タグと同じようなスタイルシートの設定が有効になる。あとは、「list-style-image」で画像ファイルを指定すればいい。
<STYLE TYPE="text/css">
OPTION {display: list-item;
list-style-position: inside;
list-style-image: url("bullet.gif");}</STYLE>

316 INTERNET magazine 2001/3

正解者：坂部和久さん、Masahiko Murataさん、冨園
慎一郎さん、ENDEさん、山口雅仁さん、たいきさん、
よしともさんインターネットマガジン／株式会社インプレスR&D

スタイルシート：HTMLやXMLなどタグ付き文書を表示したときの視覚的効果を指定するための仕組み。CSS（Cascading Style Sheets）やXSL（eXtensible Style Language）がある。CSSは、インターネットエクスプローラ3以降とネットスケープナビゲーター4以降でサポートされた。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
テーマをカスタマイズする
6M 18

毎日使っているブラウザーだから自分の気に入ったデザインにしてみたい。そんなあなたのご要望にお応えして、今回はブラウザーカスタマイズのTIPSだ。Mozillaやネットスケープ6 のボタン類はほとんどがGIF画像で作られている。そう、つまりそうした画像を取り替えれば、ブラウザーのボタンを自分の好きなものに付け替えられるというわけだ。かわいいキャラクターやかっこいい画像を埋め込んでオリジナルのテーマを作ったら、先月のインストールボタンにセットして、ホームページで配布しよう。びっくりしてもらえることうけあいだ。（高橋登史朗）

d<RDF:Description about="urn:mozilla:skin:mySkin/1.0"chrome:displayName="mySkin/1.0"
chrome:author="(^^)/ myName "chrome:description="mySkin for NN6/Mozilla hoge@***.ne.jp"
chrome:name="mySkin/1.0"
chrome:image="jar:resource:///chrome/mySkin.jar!global/skin/preview.gif"></RDF:Description>

今回は、「再読み込み」ボタンの画像を取り意する。通常のボタン（reload.gif）とカーソルル名の拡張子「.zip」を「.jar」へ変更すると先替えて自分専用のブラウザーを作り、ついでに配が触れたときのボタン（reload-hover.gif）だ。

月紹介したスクリプトでインストールできるよう布もしてしまおうという企画だ。これができたら次に、改造用のファイル一式がCD-ROMに収録になる（CD-ROM参照）。

他の画像も取り替える方法は同じだから、どんしてあるので、それを自分のハードディスクにコどん挑戦してみてほしい。

ピーする。CD-ROM内のTIPS & TRICKSのペー

テーマに自分の名前やコメントを付けたいときネットスケープ6やMozillaの「再読み込み」ボジに説明があるので参照してほしい。

は、上記のソースを見てほしい。これはmySkin

タンはGIF画像で、「中止」「戻る」「進む」ボタ

ディレクトリーの下にchromeというフォルダー

フォルダーの下にあるmanifest.rdfというファインなどもみな同じだ。カーソルで触れたときに切があるので、この下にあるmySkin.zipというフルの一部だ。圧縮する前に書き換える部分は以り替わる画像は、CSSの「hover」で指定されァイルを解凍する（CD-ROMに収録されている下のとおり。ている。HTMLのページを作るのと同じ仕組みなWinZipなどを使用）。解凍してできるフォルダーのだ。

以下が今回用意した改造用テーマ（スキン）のchrome:displayName="表示される名前"内容だ。自分で用意した「再読み込み」ボタン

chrome:author="制作者名"

用画像は、「mySkin」→「navigator」→「skin」

chrome:description="コメント"

f 通常のボタンという場所へドラッグアンドドロップしてファイカーソルで触れた
ときのボタンs
まず、34×34ピクセルのオリジナル画像を2つ用ルを置き換える。基本的な作業はこれだけだ。

日本語を使う場合は文字コードをUTF-8にしてあとは、mySkinというフォルダーをzip形式で1おくとよい。でき上がったらさっそく自分のペーつのファイルに圧縮してから、圧縮されたファイジに置いて配布開始だ。

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

zip（ジップ）：広く利用されているファイルの圧縮形式。米PKWARE社が開発した。

©1994-2007 Impress R&D

INTERNET magazine 2001/3317

T IPS & T R ICKS

2
右クリックメニューを禁止する
45

5.5

46

M 18

ホームページに自分の作品として画像を掲載する場合に、ページに著作権に関する表記をして画像の転載に注意をうながしている人もいるだろう。しかし、画像の上でマウスの右ボタンをクリックすると「画像を保存」などのメニューが出てくるので、保存しようと思えばできてしまう。そこでここ
では、右クリックメニューを制限する簡単なTIPS を紹介する。左はこのサンプルで、画像の上で右クリックした直後の状態を表したものだ。通常ならブラウザーの右クリックメニューが表示されるのだが、このサンプルでは警告ウィンドウが表示される。それではソースを見て試してみよう。
（大内 勇）

d1 <SCRIPT TYPE="text/javascript">
var str = "この画像は保存できません";
function mdown (e) {if (document.all){if (e.button == 2) { alert (str); }}else if (document.getElementById) {if (e.button == 3) { alert (str); }}else if (document.layers){
if (e.which == 3) { alert (str); }}}function mup (e) {if (e.button == 3){
if (e.preventBubble) { e.preventBubble ( ); }}}</SCRIPT>

2 <IMG SRC="asahiyama.jpg"
onMousedown="mdown (event);"
onMouseup="mup (event);">

このTIPSはIE 4、5、5.5およびネットスケー

ときに、関数mup はマウスボタンから指を離しプの4と6、Mozillaに対応させたので、ソース1たときに実行される。2つの関数では、マウスイ

event.which ： ナビゲーター4の関数「mdown」の中に多くのif〜else文を用いベントで渡された値（event）を「e」として扱

ちなみに、左クリックも上記の方法で拾えるが、たが、ポイントとなるところは条件の「e.button」っている。関数mdown内のif〜else文はブラウ

この場合の値は「1」になることも覚えておこう。と「e.which」だけだ。

ザーの振 り分 けを行 うもので、 最 初 のi f 文（document.all）はIE 4以上に適用される。IEは関数mupはネットスケープ6やMozillaで右クリ先にソース2から説明する。これは<IMG>タグ

右クリックしたときの値に「2」が割り振られる

ックメニューを表示させないための処理だ。このにマウスイベントを拾うJavaScriptを仕込んだので、かっこ内（ここでは警告ウィンドウ）が実関数はほかのブラウザーでは実行されないようにもので、マウスボタンを押したとき（onMouse

行 されるのだ。 次 のi f 文 （ d o c u m e n t . g e t

なっているので、JavaScriptエラーが表示される

d o w n ） とマウスボタンから指 を離 したとき

ElementById）はネットスケープ6やMozillaでことはないので安心だ。

（onMouseup）に、ソース1の関数「mdown」

適用され、右クリックの値は「3」に、最後のifと「mup」を呼び出すように指定している。そ文（document.layers）はナビゲーター4で適用

ソース2のマウスイベントを<BODY>タグに設れぞれのかっこの中にある「event」はいろいろされ、右クリックの値は「3」になる。マウスボ定することで、ページ全体に対して右クリックをなマウス情報を保持しているもので、これを引数タンの値の拾い方は次のとおり。

禁止することもできる。ほかにも右クリックメニとしてソース1の関数に渡している。

ューにオリジナルのメニューを表示させるなどの
event.button ： IE4、5、5.5、

ソース1の関数mdownはマウスボタンを押した

318 INTERNET magazine 2001/3

ネットスケープ6、Mozilla

応用方法が考えられるので、スキルのある読者はチャレンジしてほしい。

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

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

©1994-2007 Impress R&D

T IPS & T R ICKS3
ダイアログを簡単に作る
5

5.5「ダイアログ」とは、ソフトウ
ェアのメインウィンドウに対して、機能を呼び出したり設定をしたりするための小さなウィンドウのことだ。ワープロの「ファイルを開く」や「検索と置換」などがそれだ。ウェブをOSのインターフェイスとして活用しようとしているマ
イクロソフトは、普通のソフトウ
ェアも記 述 できるようにJavaScriptの拡張を続けている。
ここで紹介するダイアログ作成機
能はその1つだ。openメソッドとは違い、つねにメインウィンドウより前面に表示できるし、メインウィンドウとの間でデータのやり取りもできるといった、本格的な機能を備えている。 （編集部）

d1<P ID="para1" STYLE="visibility: hidden;"><SPAN ID="username"></SPAN>さん、ようこそ！
</P><SCRIPT LANGUAGE="JavaScript">
str = showModalDialog ("dialog.htm", "","status:no;dialogWidth:320px; dialogHeight:240px");
if (str) {username.innerText = str;
para1.style.visibility = "visible";}</SCRIPT>

2<BODY onLoad="returnValue=' ';"><FORM
onSubmit="returnValue=this.username.value;
window.close(); return false;">
お名前を入力してください。<BR><INPUT NAME="username"><BR><INPUT TYPE="submit" VALUE="OK"><INPUT TYPE="button" VALUE="キャンセル"onClick="window.close();"></FORM>

このサンプルページを開くと、「HTML TIPS

ワープロの「検索と置換」のように、ダイアログ& TRICKS」というタイトルが表示されてから、を開いている間もメインウィンドウを操作できる

画 面 の中 央 にダイアログが現 れる。「O K 」かタイプだ。

「キャンセル」ボタンを押してダイアログを閉じにのように「 : 」でオプション名と値を区切る。
ダイアログは値を返すこともできる。次のようにダイアログを呼び出すと、ダイアログが閉じたあるまでは、ブラウザーのウィンドウは操作できな

この2つのメソッドの第1引数にはダイアログの中い状態になる。名前を入力して「OK」ボタンを身になるHTMLファイルを、第3引数にはオプシ押すと、「〜さん、ようこそ！」というメッセー

ョンを指定する。第2引数の使い方については次ジがブラウザーのウィンドウに表示される。

号以降に説明しよう。

ダイアログ用 のH T M L に書 くスクリプトでは、このようなダイアログを表示させるには、IE 5以

第3引数は、お馴染みのopenメソッドのように、「returnValue」という変数に値を入れると、そ上に用意されているshowModalDialogメソッドダイアログの大きさなどを指定するものだ。ソーれがダイアログの戻り値になる。

かshowModelessDialogメソッドを使う。この

ス1のように、「dialogWidth」でダイアログの2つのメソッドの違いは、前者が「モーダルダイ横幅、「dialogHeight」で縦の高さ、「status」アログ」を開くのに対し、後者は「モードレスダでステータスバーの有無を指定する。スクロールイアログ」を開く点だ。モーダルダイアログでは、バーの有無を指定する「scroll」やユーザーがサに"Taro"が入るようになるわけだ。ソース2ではこのサンプルやワープロの「ファイルを開く」ダ

イズを変 えられるかどうかを指 定 するユーザーが入力した名前を戻り値にしている。次イアログのように、閉じるまでメインウィンドウ「resizable」などのオプションもある。openメ号では、ダイアログの機能をさらに活用したペーの動作が停止する。
「モードレスダイアログ」は、ソッドとは違い、"status:no,scroll:yes"のようジを紹介することにしよう。とに変数「x」に値が入る。
x = showModalDialog(……);

returnValue = "Taro";
これで、メインウィンドウのスクリプトの変数x

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

引数（ひきすう）：プログラミング言語で、関数に渡す値のこと。関数は引数を計算して結果を返したり、引数に合わせて動作を変えたりする。

©1994-2007 Impress R&D

INTERNET magazine 2001/3

319

T IPS & T R ICKS

4
スクリプトを隠す55.5

ウェブページに使われているス
クリプトは、人間にも読めるテキストの状態で書かれているので、誰 にでもその内 容 が見 えてしまう。ビギナーにとっては勉強しやすい反面、会心のできばえのスクリプトを自分だけのものにしておきたい人や、クイズゲームを作ろうとしている人は、今までこのことに悩まされてきた。また、できのいいスクリプトこそ共有しよう
よというオープンソース派の人にとっても、IDとパスワードを照合するようなプログラムを作るには、この「誰でも読める」という特徴は悩みの種になる。今回はスクリプトの内容を隠してしまう異色のTIPSを紹介しよう。（藤井幸孝）

d変換前<SCRIPT LANGUAGE="JScript">// Password Check Script Sample ver 1.0// (C) Nobody 2001////**Start Encode**
passwd = prompt ("Enter your password / パスワードを入力してください", "?");
if (passwd != "impress")alert ("Invalid password / パスワードが違います");else
alert ("OK !");</SCRIPT>

変換後<SCRIPT LANGUAGE="JScript.Encode">// Password Check Script Sample ver 1.0// (C) Nobody 2001////**Start Encode**#@~^rgAAAA==@#@&d2m/khN,',2DK:2YvJ3UD+D,zW!DPaCd/SWMN~z~パスワードを入力してくださいEBJ_J*I@#@&drW,`wCdkh[Pex,JrswM+/kJ*@#@&idCV DOcrqx7CVbNPaCd/SWMN~z~パスワードが違いますE*i@#@&inVk+@#@&idlsnMY~`r6nPZr#p@#@&i5SYA
AA==^#~@</SCRIPT>IE 5以降では、JavaScriptやVBScriptの内示や注意書きは、この行より前に書いておこう。

いくつか注意点がある。まず、スクリプトの中の容を人間には判読できない文字列に変換して、HTMLファイルができたら、ツールを使ってスク2バイト文字は暗号化されないで残る。日本語をのぞき見を防ぐ機能が使える。まず「Windowsリプトを変換する。MS-DOS プロンプトで次の使ったクイズの答えを隠すのには使えないのが残Script Encoder」というツールをダウンロードしコマンドを実行すると、新たにファイルが作成さ念だ。また、この変換はあくまで簡単なエンコーよう。マイクロソフト社のサイトで手に入る。

れる。そのままでは「コマンドまたはファイル名ドにすぎず、強力な暗号化ではない。重要な情

www.microsoft.com/japan/developer/scripting/が違います」とエラーが出るので、インストール報を隠すのには向いていないので注意しよう。変し た フ ォ ル ダ ー に あ る「 s c r e n c . e x e 」を換後のファイルは、スクリプト部分とHTML部分C:¥Windowsにコピーしておくとよいだろう。のいずれでも、１文字でも変更すると動作しなく

Script Encoderをインストールすると、スタートメニューからこのツールのヘルプを開けるようになる。HTMLファイルが完成したあと、最後に変screnc 変換前のファイル名 変換後のファイル名換しよう。

ので、ここでは簡単な紹介にとどめよう。

テキストエディターなどで変換後のファイルを開Script Encoderで変換したスクリプトは、ナビゲはじめに、いつもと同じようにスクリプトを作成

いてみると、スクリプトがわけのわからない文字ーターでは動作しないし、多用するとウェブをつする。 言 語 の指 定 には<SCRIPT Language=列になっているのがわかるだろう。これで簡単にまらないものにしてしまうかもしれない。おもしJscript>としておこう。続いて、スクリプトの変プログラムを盗み見ることはできなくなった。言ろいスクリプトを参考にするのは、スクリプトの換したい部分の始まりを示すために「//**Start

語指定の部分が<SCRIPT Language=JScript.

腕を磨く一番の近道だからだ。どうしてもというEncode**」という行を挿入しておく。著作権表

Encode>と変わっているのが完了の印だ。

場合の切り札として覚えておけば十分だろう。

なる。詳しい使い方や注意点が紹介されている

320 INTERNET magazine 2001/3

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

MS-DOSプロンプト：ウィンドウズ95、98、Meにおいて、キーボードで操作するMS-DOS形式のプログラムを動かすための仕組み。スタートメニューの「プログラム」から「MS-DOSプロンプト」を選んで起動する。ウィンドウズNTや2000では、「コマンドプロンプト」という名称になる。
©1994-2007
Impress R&D

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

今月のテーマ<OBJECT>を制する

大好評発売中！

IEでActiveXコントロールを埋め込むためのタグとして出発した<OBJECT>は、HTML 4で採用されて、汎用的なマルチメディア用のタグとなった。<IMG>の代わりに画像を埋め込むこともできるし、<APPLET>の代わりにJavaアプレ「HTMLパズルに挑戦しよう」
宛 先ットも指定できる。ただし、HTML 4で規定されている機能は、IEもネD

ットスケープも完全にはサポートしていない。今月は、<OBJECT>タグ

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

をHTML 4のやり方で活用するパズルに挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ <OBJECT>を制する にチャレンジ！

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

Q U E S T I O N

1 6でPNG、3でGIF！

55.5

6

M18

HTML 4.0式の<OBJECT>タグの魅力は、ブラウザーの機能に合わせて、表示させたいファイル形式をいくつも指定できることだ。左のサンプルは、同じページをネットスケープ6とナビゲーター3で画像を表示させたところだ。ネットスケープ6ではPNG形式の画像が、PNGをサポートしていないナビゲーター3 ではG I F 形 式 の画 像 が表 示 されている。
JavaScriptでブラウザーに合わせてタグを作成しているわけではないし、<EMBED>タグを使っているわけでもない。<OBJECT>タグを活用してこんなページを作ってみよう。なお、ナビゲーター4はバージョンによってはPNGをサポートしているが、このサンプルではGIFを表示する。
ヒント

Q U E S T I O N

入れ子にする……

2 Lynxにマップを見せろ！

6M18

HTML 4では、<OBJECT>タグによってイメージマップの機能が強化されている。画像やマウスをサポートしないブラウザーでもウェブページが自然に使えるような工夫がなされているのだ。左のサンプルは、<OBJECT>タグで作った同じイメージマップをMozillaとテキストブラウ
ザーのLynxで表示させたところだが、Mozillaではイメージマップが表示され、Lynxではイメージマップの中のリンクが普通のリンクとして表示されている。さて、どんなふうに作っているのだろう。なお、ウィンドウズ版よりもHTML 4への対応が進んでいるマッキントッシュ版のIE 5では、このタイプのイメージマップに対応している。
ヒント

あのタグで領域を指定する……

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

イメージマップ：ウェブページの1枚の画像の中に特定の領域がいくつもあり、その領域をマウスでクリックすることで、別のページに移動できるようにした仕組み。<IMG>タグ（画像）と<MAP>、<AREA>タグ（領域指定）を組み合わせて作成する。
©1994-2007 Impress R&D

INTERNET magazine 2001/3321

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