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

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

IE4.0も多くのユーザーが使用しはじめた。いよいよ本格的にダイナミックHTMLが流行しそうだ。今後ダイナミックHTMLはアプリケーション開発にも重要な役割を担うと3.0いう。どんどん複雑になっていくHTMLだが、ここでは誰にでもできるTIPSを紹介し4.0ていくつもりだ。今月もすぐに使えるダイナミックHTMLからJavaスクリプトまで、新しもの好きのウェブページ作成者が唸るTIPSとTRICKをお届けする。

3.0

4.0

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

12月号「HTMLパズルに挑戦しよう」の解答
残念なことに解答を送ってくれた人が少なかった。レイヤー機能は高度なテクニックだったのだろうか、それとも単に人気がないだけなのだろうか。いずれにせよ、これから流行しだすTIPSには違いない。今から習得しておけば、誰よりも早く先端のページを作ることができるぞ。それでは レイヤーを制する の解答を発表しよう。

A N S W E R

1 レイヤーを前面に表示させろ！

レイヤーを前にしたり後ろにしたりするには、JavaScriptの「moveAbove」、「moveBelow」を使う。「document.layers["back"].moveAbove(document.layers["fore"])」は、「back」というレイヤーを「fore」というレイヤーの前に出すという意味になる。あとはこのスクリプトを「onMouseOver」で呼び出すだけだ。
<SCRIPT>
function foreLayer() { document.layers["back"].moveAbove(document.layers["fore"]);}
function backLayer() { document.layers["back"].moveBelow(document.layers["fore"]);}</SCRIPT><LAYER NAME="back" TOP=100 LEFT=64>画像略</LAYER><LAYER NAME="fore" TOP=160 LEFT=100>文字</LAYER><A HREF=javascript://" onMouseOver="foreLayer()" onMouseOut="backLayer();">
img above , or below</A>

正解者の方々：米澤慎一郎さん、川田哲さん、ほか

A N S W E R

2 レイヤーを使ってウェブページを表示させろ！

レイヤーの中身を特定のウェブページにするには、やはりJavaScriptで「document.layers["quote"].src = "http://www.impress.co.jp/"」とすればいい。これはレイヤーで表示するものを指定したURLにする、という意味だ。模範解答では、アンカーでURLを指定し、そのURLを引数にとる関数「quoteLayer」を作って汎用性を持たせてみた。
<SCRIPT>
function quoteLayer(srcurl) { document.layers["quote"].src = srcurl;}</SCRIPT><LAYER NAME="quote" TOP=160 LEFT=120 WIDTH="480" HEIGHT="400"BGCOLOR="antiquewhite"></LAYER><A HREF="JavaScript:quoteLayer('http://www.impress.co.jp/')">
quote another page</A>

正解者の方々：川田哲さん、ほか

354 INTERNET magazine 1998/1

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

T IPS & T R ICKS

1
文字にフィルターをかける
4.0
ウェブページを作成するときに文字に特殊な効果を与えたい。今までそんな場面では、フォトレタッチソフトなどを使って画像ファイルを作成し、その画像を表示させる方法しかなかった。しかし、これまで何度も書いてきたように画像を使うとどうしてもダウンロードに時間がかかってしまう。作成者から見ても、膨大な手間が画像作成にかかてしまう。その問題を解決してくれるのが今回紹介するTIPSだ。
このTIPSを使えば画像を使わなくても簡単に文字に特殊効果を与えることができるのだ。ページの見出し文字に使えば軽くてしかも目を引くようなページができるぞ。では早速このTIPSを紹介しよう。

d<SPAN STYLE="WIDTH: 580; HEIGHT: 96;FONT-SIZE: 96pt; font-family: arial black; color:red; Filter: Wave(Add=0, Freq=2, Lightstrength=5, Phase=55, Strength=8)">HOT</SPAN><SPAN STYLE="WIDTH: 380; HEIGHT: 36; FONT-SIZE: 96pt; font-family: Arial; font-weight:bold; color: #0000FF; Filter: Shadow(Color=#9EAFE9, Direction=225)">COOL</SPAN><SPAN STYLE="WIDTH: 25; HEIGHT: 30; FONT-SIZE: 96PT; COLOR: #000000; FILTER:DROPSHADOW(COLOR=#808080, OFFX=5, OFFY=5, POSITIVE=1)">T</SPAN><SPAN>タグで囲まれた文字列にフィルターだ。
「Phase=25」は波の始まりを指定するもの

左斜め下の方向に尾が伸びるように指定していをかけるTIPS を先月紹介した。今回紹介する

で、値は0から100までのパーセンテージで表す。

る。

TIPSもフィルター使って上の画面のように特殊

この値は角度に依存していて、25の場合は山か効果をほどこすのだ。今回紹介するフィルターはら、 7 5 の場 合 は谷 から始 まる。 最 後 にFilter: DropShadow(Color=#808080,「Shadow」、「Drop Shadow」、「Wave」の3種「Strength=8」であるが、これは波の大きさを指OffX=5, OffY=5, Positive=1)類である。

定するパラメータだ。値が大きすぎると原形をとどめないものになってしまうので気を付けよう。

Filter: Wave(Add=0, Freq=2,「DropShadow」は画面の「Tips」のように影が付く効果を与える。
「Color=#808080」は影LightStrength=5, Phase=25, Strength=8)

Filter: Shadow(Color=#9EAFE9,の色を16進数で指定している。
「OffX=5」と「Direction=225)

OffY=5」は影の位置を指定するのに用い、それぞれ文字列からの下方向右方向の距離を表して「Wave」は画面の「HOT」のように、波を打った効果を文字列に与えるフィルターだ。
「Add」「Shadow」を指定すると、画面の「Cool」のよいる。数字は影を付ける文字列からの相対距離が1 の場合効果を与えた文字列の上に元の文字

う に 尾 を 引 い た 効 果 が 得 ら れ る 。

を指定している。
「Positive」が0の場合影が透列を表示させ、0の場合には効果を与えた文字列「Color=#9EAFE9」は尾の色を16進数で指定し明になり、1の場合には不透明になる。

のみを表示する。
「Freq=2」は波の数の指定だ。ている。
「Direction=225」は尾が伸びる方向をここまで理解できたら、今度は自分で作る番だ。

数 が多 いほどほど波 が細 かくなる。

角度で指定している。角度は真上を0度として時試してみて欲しい。

「LightStrength=5」は波の明暗を指定するもの計回りに大きくなる。ここでは225度、すなわちインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/1355

T IPS & T R ICKS

2
表を自動的に作成する
4.0
表組みをHTMLで作成するのは非常に手間がかかる。最近では、
HTML エディターを使って簡単に作成できないこともないが、表の中の値が変わるとその都度HTMLを書き換えなければならない。そんな手間を省く方法として、CGIアプリケーションによって自動的に表の値を変える方法があるが、アプリケーションの作成に手間がかかる。今回紹介するTIPSはそんな問題を解決してくれるものだ。
右の画面の表組みは、テキストフ
ァイルのデータを読み込みHTMLだけで自動的に表組みにしたものだ。これはテキストファイルを書き換えるだけで表の値を変更できるすぐれものだ。

j http://www.microsoft.com/gallery/files/html/
repeat.htm

d<OBJECT ID="QUOTELIST"
CLASSID="CLSID:333C7BC4-460F-11D0BC04-0080C7055A83"
ALIGN="BASELINE" BORDER="0"
WIDTH="0" HEIGHT="0"><PARAM NAME="DATAURL" VALUE="QUOTES.TXT"><PARAM NAME="USEHEADER" VALUE="TRUE"></OBJECT>

このTIPSでは表のデータをコントロールするために<OBJECT>タグを使用する。またデータ<TABLE BORDER="1" ID="ELEMTBL"DATASRC="#QUOTELIST"><THEAD><TR><TD>Symbol</TD><TD>Quote</TD><TD>Change</TD><TD>Volume</TD></TR></THEAD><TBODY><TR><TD><DIV DATAFLD="Symbol"></DIV></TD><TD><DIV DATAFLD="Quote"></DIV></TD><TD><DIV DATAFLD="Change"></DIV></TD><TD><DIV DATAFLD="Volume"></DIV></TD></TR></TBODY></TABLE>

ときの「CLASSID」はとても重要な値だ。例で挙げた値とまったく同じものを入力てほしい。

番で、データフィールド名とデータをカンマで区<PARAM NAME="DATAURL"

切ったテキストファイルが必要だ。これはExcel

VALUE="QUOTES.TXT">

やAccess で保存するとき、ファイルタイプを作成できる。では早速内容を見ていこう。
<OBJECT ID="QUOTELIST"<THEAD>タグでヘッダーを、<TBODY>タグで表組みの中に入るデータ部分を記述する。

ファイルとして、表の列に表示されるのと同じ順CSV（カンマ区切りファイル）にすれば簡単にして読 み込 めるようにしている。 また、<TD><DIVDATAFLD="Symbol"></DIV></TD>「NAME="DATAURL"」で表組みにデータファ
イ ル を 使 う こ と を 宣 言 す る 。「 V A L U E =「DATAFLD="symbol"」はデータファイルに記" Q U O T E S . T X T " 」 は表 のデータファイル

述された「symbol」というデータフィールドを「QUOTES.TXT」を指定している。

指定している。これによってデータファイルに書

CLASSID="CLSID:333C7BC4-460F-

かれたデータフィールド「symbol」のデータが11D0-BC04-0080C7055A83"<TABLE BORDER="1" ID="ELEMTBL"

表組みの列に入力される。

ALIGN="BASELINE" BORDER="0"

DATASRC="#QUOTELIST">

たったこれだけでテキストデータから表が自動的にできてしまう。ちょっと難しいかもしれないが、

WIDTH="0" HEIGHT="0"><TABLE>タグに<OBJECT>タグで指定したID
まず「ID=QUOTELIST」と名前を付けて、このを「DATASRC="#QUOTELIST"」と追加するコントロールを参照できるようにしている。このことで、指定したデータファイルを表のデータと356 INTERNET magazine 1998/1

理解できたら早速チャレンジだ。

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

T IPS & T R ICKS

3URLエンコードされていないメッセージを受け取る
3.0

4.0

<FORM>タグを使って、ウェブページ上でアンケートを採ったりコメントをもらったりしたい。こんな場面はホームページを作っているなら誰しも思うことだろう。しかしプロバイダーによってはCGIプログラムが使えないことがある。こんなとき便利なのが、フォームの中身を直接メールで受け取る方法だ。だた直接メールで受け取るよ
うにすると、メッセージはURL エ
ンコードという方式で変換されているので、そのままでは日本語の部分 がまったく読めない。そこで、
このT I P Sでは、H T M Lを使ったURLエンコードデータを簡単に読める方法を伝授しよう。こんな解決法もあったのかと驚くはずだ。

d<FORM ACTION="mailto:ip-enq@impress.co.jp"
METHOD="POST" ENCTYPE="text/plain">

フォームの内容をCGIで受け取ろうとするとき、通常<FORM>タグはこんな風に書く。

り出せる。

ルソフト（Becky!など）や、専用のデコードツー

では、CGIではなくてメールアドレス宛にデータルを使わないと日本語メッセージを解読できない。

を送信させるにはどうするか。
<FORM ACTION="mailto:ip-cdrom@

METHOD="POST">

そこで出てくるのが「ENCTYPE」オプションだ。
「encode type」の略で、送信データの変換形式<FORM ACTION="../cgi-bin/sample.cgi"を指定することができる。これを利用するのだ。

impress.co.jp" METHOD="POST">「ACTION」は、<FORM>〜</FORM>で括られENCTYPE="text/plain"

た中のデータを「sample.cgi」というスクリプ「ACTION」部分を「mailto:メールアドレス」とトプログラム宛に送信しろという意味だ。この方することによって、受信先をCGIスクリプトから法で送信すると、データは「URL エンコード」メールアドレスに変えればよい。このようにすれ

レーンテキスト（普通のテキスト）として送られてという方式に変換されてひと目では意味が分かば、CGIの利用を許していないプロバイダーでもくるので、URLエンコードのデコード機能を持っらないような文字列に変換され、sample.cgiと問題なくフォームのデータが送信できる。ただしていないメールソフトでもそのまま読めるといういうスクリプトに渡される。CGIアプリケーショ

欠点もある。ユーザが事前にブラウザーで自分のわけだ。

ンの作者は、そのアプリケーションの中にURLエ

メールを使えるように設定していなければ、デー

この機能を使えば簡単にアンケートページが作れ

ンコード形式のデータを再変換して普通のテキスタをメールで送ることはできない。この方法による。ブラウザーに表示されることのない、地味なト（プレーンテキスト）に戻すような機能を組みって受信されたデータは、やはりURLエンコード

TIPSだが、試してみる価値はあるぞ。

込むようにしているので、意味のあるデータを取方式に変換されている。デコード機能のあるメー「text/plain」と指定しておけば、メッセージはプ

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

INTERNET magazine 1998/1

357

T IPS & T R ICKS

4
ドラッグアンドドロップで文字列を出現させる
4.0
今月もネットスケープ社によるサンプルコードを使ったTIPSを1
つ 紹 介 し よ う 。 同 社 サイト で「ANOTHER DRAG AND DROPCOMPONENT」として公開されているものだ。ダイナミックHTMLが流行してから、文字や画像をドラッグできるページはそれほど珍しくはなくなっているが、このコードを使うと、なんとドラッグするごとに新しい文字列を表示させることができるのだ！ 左の画面の文字列は、すべて「Try to drag me!」をクリックして生成させた文字列をちりばめたものだ。これを読んだ
ら早速ネットスケープ社のサイトに行って、サンプルコードを取得してこよう。インタラクティブなページがまた1つ作れるぞ。

~

j http://www.hh.iij4u.or.jp/ yujifuru/dhtml/sample/dragcloner.html
サンプルコード入手先
j http://developer.netscape.com/library/examples/index.html→Dynamic HTML→ANOTHER DRAG
AND DROP COMPONENT→View Example

d<SCRIPT LANGUAGE=javascript1.2 SRC=dragcloner.js></SCRIPT><SCRIPT LANGUAGE=javascript1.2 >var d= new DragCloner(100,100, "First String","New String");var num=2;
d.ondown=function (cloner,clone) {cloner.html="New String Nomber"+num;num++;}</SCRIPT>

解説をしていこう。

String」という文字をドラッグした場所

Javaスクリプトファイルが必要だ。まずはこれをまずヘッダー部分で、先ほど作成したdragcloner.に生成することを意味している。

手に入れよう。上記のサンプルコード入手先のjsファイルを参照するように書く。

このTIPSを使うにはネットスケープ社にある

d.ondown=function (cloner,clone) {URLからリンクをたどって、「ANOTHER DRAG
AND DROP COMPONENT」の解説コーナーま<SCRIPT LANGUAGE=javascript1.2

cloner.html="New String Number"+num;

で進もう。サンプルコード入手先のURLに行っ

SRC=dragcloner.js></SCRIPT>

num++;たら左のフレームの「Dynamic HTML」をクリ｝

ックし、右にサンプルのリストが並ぶので、その続いて、dragcloner.js内で作られている関数を中から探してほしい。たどりついたら、そのペー呼び出す準備をしておく。

ジ（右のフレーム）の一番下の部分へ移動だ。そ2 回目以降にドラッグして生成される文字列は、残りの部分で指定している。ここでは「num」とこに「The source for this component can bevar d = new DragCloner(100,100,いう変数を利用して、「New String Number X」

found here.」とある。
「here」の部分がリンクに"First String","New String");とだんだん数字が増えてくるようになっている。

なっていて、必要なJavaスクリプトのソースコードつまらないと思ったら、if文などを使って、「clone.

が置かれている。このファイルを手に入れて欲し

これは一例だが、上から100、左から100の位置html」の値を変化させてやればさらに凝ったものい。手に入れたらファイル名を「dragcloner.js」に、ページが開かれた時点で「First String」とができるぞ。という名前で保存する。これで準備は完了だ。

いう文字列を表示し、さらに表示された文字列

さて、ここまで準備ができたら、本題のHTMLの「 First String」 を 1回 ドラッグ する と 「 New358 INTERNET magazine 1998/1

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

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

今月のテーマ

IE4.0のダイナミックHTMLを制する
これまでダイナミックHTMLといえば、ネットスケープの専売特許だった。ところがIEも正式リリースされダイナミックHTMLの機能を充実させ始めた。ネットスケープのダイナミ
ックHTMLとは違い、IE4.0のダイナミックHTMLは、スタイルシートを拡張したものになっている。今後はこれがウェブページやウェブアプリケーションを作成するうえで重要な位置を占めるだろう。そこで、今月は、この「ダイナミックHTML」に挑戦していただく。トリックが分かったらすぐに解答を送ってきてほしい。正解者にはダイレクトプラスを発行させていただく。
なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ"IE4.0のダイナミックHTML"にチャレンジ!

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

1 マウスカーソルを自在に変えろ!

4.0

左の図を見てほしい。紙面では分かりにくいのだが、実をいうと文字の上にカーソルを乗せると、カーソルの形がいろいろと変わるのだ。これは別にブラウザーがファイルのロードなどの動きをしているから変わっているというわけではない。なんとIE4.0では、ページ作者が読者のマウスカーソルの形を指定することができるのだ。この文字の上では砂時計、あの文字の上では十字矢印、その文字の上では他の形のカーソル……という具合に変化させることができる。まさにダイナミックカーソルだ。カーソルを文字の上に持っていくと変化する。そんなHTMLを書いてほしい。このパズルを解いたら独創的な使い方を考えてみよう。
ヒン
トQ U E S T I O N

IEのダイナミックHTMLはスタイルシートを使っている……

2 入力した文字を表示させろ！

4.0

ウェブページの読者をページ作りに参加させる、つまり読者の入力した文字をページに反映させるということは、CGIを使えば簡単にできる。しかしこの方法ではサーバーにアクセスしなければならず、通信が終わるまで時間がかかってしまう。だがダイナミックHTMLを使えば、サーバーとのやりとりなしに読者のメッセージをページに取り込むことができるのだ。
左の図は、読者の名前を聞いてあいさつをするというインタラクティブなページだ。これを発展させれば簡単な会話ページが作れるぞ。フォームに入力したメッセージを使って、CGIなしでページを書き換える、そんなページを作るのが第2問だ。アイデアに富んだ面白い解答を送ってほしい。
ヒン
トJavaスクリプトと組み合わせて……

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

INTERNET magazine 1998/1359

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