このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい藤井幸孝／大内 勇／高橋登史朗／佐藤和人

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

今月は遊び心いっぱいのTIPSとともに、実用的なTIPSも一緒にお送りする。

4

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

手の込んだページを作ると、一般的にはユーザビリティーが低下すると思われ

5

インターネットエクスプローラ5以上がちだが、最近のブラウザーはユーザーの使いやすさを考えた機能が多く、そ5.5

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

れを活用することでもユーザビリティーを向上させられる。今月のTIPSを活6

インターネットエクスプローラ6（パブリックプレビュー）

用して、ぜひともそれを実現させて欲しい。

4

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

6

ネットスケープ6以上

CD-ROM収録先

Å Magnavi→Ip0109→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!
M0.9.1

Mozilla8月号「HTMLパズルに挑戦しよう」の解答
久しぶりに複雑なスクリプトを書く問題だったが、いかがだろうか。ダイナミックHTMLはアニメーションのためだけにあるのではない。この問題のように、数値をさまざまな方法で表現するためにも使えるのだ。
DOMが普及すれば、データ分析のためにスクリプトを活用する場面が増えるに違いない。

A N S W E R

1 勝率を計算せよ！

<TBODY>要素内の行を配列rowsで、行の中のセルを配列cellsで参照する。セル内のテキストは、firstChild.nodeValueで参照したり書き換えたりできる。
function calc () {t1 = document.getElementById("tbody1");for(i = 0; i < t1.rows.length; i++) {win = Number(t1.rows[i].cells[3].firstChild.nodeValue);
lost = Number(t1.rows[i].cells[4].firstChild.nodeValue);t1.rows[i].cells[6].firstChild.nodeValue =String(win / (win + lost)).substr(0, 5);}}A N S W E R

2 表をソートせよ！

正解者：Kazuhisa Sakabeさん、ENDEさん、よしともさん、堀江さん、なるるさん、Masahiko
Murataさん

列の番号を引数にした関数を作り、ラジオボタンから「onclick="mysort(6);"」のように呼び出す。行を入れ替えるには、removeChildとinsertBeforeを組み合わせる。
function mysort(col) {t1 = document.getElementById("tbody1");for(i = 0; i < t1.rows.length - 1; i++) {pos = i;val = t1.rows[i].cells[col].firstChild.nodeValue;
for(j = i + 1; j < t1.rows.length; j++) {val2 = t1.rows[j].cells[col].firstChild.nodeValue;if(val < val2) { pos = j; val = val2; }if(pos != i) t1.insertBefore(t1.removeChild(t1.rows[pos]), t1.rows[i]);}}

322 INTERNET magazine 2001/9

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

正解者：Kazuhisa Sakabeさん、ENDEさん、よしともさん、堀江さん、なるるさん、Masahiko
Murataさん

DOM （ドム／Document Object Model ）：プログラムによってHTML やXML の内容を検索したり操作したりする方法を共通化したルール。W3C は、1998 年にDOM level 1 、
2000 年にDOM level 2 をそれぞれ勧告し、現在DOMlevel 3 を策定中。
©1994-2007
Impress R&D

TIPS & TRICKS

1
画像を合成する
5.5

16

2000年5月号の「DirectXフィルターを使う」というTIPSで紹介したとおり、IE 5.5からフィルター機能が大幅に強化されている。今回はその中でもCompositorフィ
ルターを使って、フォトレタッチソ
フトのように2 つの画像を計算で合成する方法を紹介しよう。左のサンプルでは、「 HTML TIPS &TRICKS」というテキストと画像を合成しているが、これまでの透明化フィルターなどとはひと味違った色合いになっている。もちろんテキストと画像だけでなく、画像同士やテキスト同士の合成もできるし、重ね合わせる位置をずらすことでまた違った効果も生み出せるのでいろいろと工夫してみよう。
（佐藤和人）

d<BODY onLoad="onLoad()"><SCRIPT TYPE="text/javascript">function onLoad() {image1.filters[0].Apply();
image1.innerHTML = image2.innerHTML;
image1.filters[0].Play();}</SCRIPT>

2<DIV ID="image1" STYLE="filter:progid:DXImageTransform.Microsoft.Compositor(function=9);"><DIV ID="text">HTML TIPS<BR>&amp; TRICKS</DIV>À</DIV><DIV ID="image2" STYLE="display: none;"><IMG SRC="sea.jpg" WIDTH="480" HEIGHT="360" ALT="">
B̀
</DIV>

まずは、合成の対象となる2 つのタグを用意

A●

関数onLoad中のimage1.filters[0]とは、「imageする。今回はソース2のようにID属性を「text」と1の最初のフィルター」、つまりソース2で指定しA と、JPGファイルを表示した<DIV>タグ（以下●）

たCompositor フィルターだ。合成を行うには、B を合成する。ID属性させる<IMG>タグ（以下●）

image1の内容を変更するスクリプトを「Apply」

A
が「i m a g e 1 」の< D I V > タグで●を囲み、このメソッドと「Play」メソッドで囲めばいい。変更前<DIV>タグにCompositorフィルターを設定する。の内容と変更後の内容が合成されるのだ。

IE 5.5以 降 のフィルターは、「progid:DXImageA
B
今回は、ソース2で「function=9」として●と●Transform ……」とややこしい書き方をするが、を「加算」（重なり合うピクセル同士の明るさを足

これはCD-ROMに収録したソースからコピーしてB貼り付けてほしい。一方、●はID属性が「imageすこと）したが、「function=」の数字を変えれば計B●

算方法を次のように変えられる。

2」の<DIV>タグで囲み、「display: none」
として非表示にしておく。

1

AB●と●のうち暗いほうを表示。

AB●と●を用意したら、ソース1のスクリプトで合2

AB●と●のうち明るいほうを表示。

A
成すればいい。ID属性image1の中身は最初●

8A
B●から●を引いた値。になっているが、ページを開いたときに実行され10A
B●と●がどちらも透明でない部分を透る関数「onLoad」で中身をimage 2のもの、つまBり●に切り替える。この際に合成が行われる。

明にする。
24

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

A
B●から●を引いた値。

フィルター：IE 4以降の独自機能で、スタイルシートを拡張して画像や文字にさまざまな視覚効果を与えるもの。反転や半透明化を行ったり、スポットライトや陰影、炎、波型のような効果をHTMLだけで表現できる。スクリプトと組み合わせれば高度なアニメーション効果も可能。
©1994-2007 Impress R&DINTERNET magazine 2001/9323

TIPS & TRICKS2
画面の状態を保存する
5

5.5

6

掲示板やアンケートなどのフォームに記入しているときに、どうしてもブラウザーを閉じなければならなくなった。そこでお気に入りに登録して後で開いてみたが、記入した文字は消えていた。そんな経験はないだろうか。今回紹介するのは、こんな事態を防ぐTIPSだ。
これを使えばIE のお気に入りへの登録、もしくは画面スナップショットの保存をすると、フォームに書かれた内容も一緒に記録できる。
また、フォームのほかにもスクリプ
トやスタイルの状態も記憶させられるため、先月号で紹介した「エクスプローラ風のメニュー」でのメニューの状態なんていうのも保存できる。
（藤井幸孝）

1d.saveFavorite {behavior:url(#default#savefavorite);}2function fnSaveInput(){
oPersistInput.setAttribute("sPersistValue",oPersistInput.value);}function fnLoadInput(){oPersistInput.value=oPersistInput.getAttribute("sPersistValue");}3<INPUT class=saveFavorite onsave="fnSaveInput()" onload="fnLoadInput()" type=text id=oPersistInput>

やほかの名前に変えれば、そのほかのビヘイビアvalue）を記憶させる。ロード時の動作は反対にこいる。IE5以降でビヘイビア機能はかなり強化さを使うことができる。の「sPersistValue」から値を get すればよい。

れてきた。 その 1 つに I E が 標 準 で 備 えている

それではsaveFavoriteの機能を解説しよう。この

これでフォームに文字などを入れたままお気に入Default ビヘイビアと呼ばれる部品がある。今回ビヘイビアでは、記憶したい 項目（フォームのボッりへ登録し、そこから画面を開いてやれば、フォー

はこのなかの「saveFavorite」と「saveSnapShot」

クスやスクリプトのオブジェクト）ごとにAttributeムの文字が記入されたままになっているはずだ。の使い方を紹介しよう。

を作成して状態を覚えさせる。記憶するタイミン

実は、saveFavoriteクラスはスクリプトを書かずDHTMLビヘイビアというと、外部スクリプトの準グには onsave イベントを、記憶した値を呼 び出にクラスの設定だけでも機能する。この場合は保備が面倒で挫折した人もいるかもしれないが、デすタイミングにはonload イベントを利用しよう。

存するしないを細かにコントロールしたり、後で繰フォルトの部品を使うならそんな準備は不要だ。

次 にソース3を見 てほしい。
I N P U T ボックスにり返し値を取り出したりすることはできないが、簡まずソース1のように「saveFavorite」をCSS ス「class=saveFavorite」として先程作ったスタイル単に作れる。くわしくはCD-ROMのサンプルをタイルとして登録してみよう。これは標準のビヘイを適用している。これでこのタグの状態が記憶対見てほしい。なお、「savesnapshot」は画面の保ビアのため、URLの記述もシンプルだ。

象 に な る 。 ま た ス クリ プト で 扱 える ように存時に使える。ただし<HEAD>タグの中にこのTIPSではDHTMLビヘイビアを使用して「oPersistInput」というIDも振っておく。
.saveFavorite

onsave イベントで動作する fnSaveInput() 関数<META NAME="save" CONTENT{behavior:url(#default#savefavorite);}はソース2のとおりだ。INPUT オブジェクトに、="snapshot">「sPersistValue」という名前のアトリビュートを作
この「#savefavorite」の部分を「#savesnapshot」

324 INTERNET magazine 2001/9って、現在記入されている値（oPersistInput.

が必要になるなど、若干使い方が違う。

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

DHTMLビヘイビア：IE 5以降の機能で、スタイルシートとスクリプトを使ってタグに独自の機能を追加する仕組み。

©1994-2007 Impress R&D

TIPS & TRICKS

3
フォームへの入力をコントロールする
4

6

M 0.91

アンケートなどのフォームで、データベースなどからの出力による記入済みの項目と、新規に入力しなければならない項目とが混在してしまうことがないだろうか。このような場合は間違いがないように、記入済みの項目は入力できないよ
うにしたいところだ。2000年11月号に紹介したdisabledを使えば入力できないようになるが、内容を送信できない。そこで readOnlyプ
ロパティーを使った、入力できないが送信はできるというフォームを紹介しよう。また、今回のTIPSではJavaScriptとチェックボックスを利用して修 正 もできるようにした。
ブラウザーをデータベースと連動した入力フェイスとして使うときには重宝するぞ。 （高橋登史朗）

d2

1
function swtReadonly(oj,idName){var ele = oj.form.elements[idName]if(ele.readOnly){ele.readOnly = false }else{ele.readOnly = true}}<input type = "text"
name = "NAME"
value = "山田太郎"
readonly ><input type = "checkbox"
name = "NAMEsyuusei"
onClick = "swtReadonly(this,'NAME')"

まずソース2を見てみよう。入力フィールドとこれは、フォームの要素のリードオンリー、つまりここでは、if(ele.readOnly)とすることで、設定対チェックボックスだ。入力フィールドのほうはあら読み出し専用で、書き換えできない状態をスイッ

象が現在リードオンリーかどうかによって処理をかじめreadonlyが書き込まれているため、ページチ切り替えするためのスクリプトだ。

分岐するようにしている。もし、クリックされたときにリードオンリーならそれを解除(false)し、そうを読み込んだ時点で修正不可の状態に設定されている。チェックボックスはこのフィールドの修正var ele = oj.form.elements[idName]

でなければリードオンリー(true)に設定するということになる。

できない 状態を解除するためのものだ。つまり、はじめは修正できないが、必要ならチェックボック

これは、設定対象の要素(タグ)をeleという変数にできれば、今回のCD-ROMサンプルを使って実スをチェックして修正できるというわけだ。このチ代入している。これは別にeleという名前である必

際にフォームを送信し、自分の目でdisabledとェックボックスタグの中に書かれている、要はないが、これ以降、eleと書けばこの関数のの違いを確認してみよう。2つの違いを認識しな中では、設定対象の要素を意味することになる。

いうちになにげなくdisabledを使ってしまうと、せっかくフォームに内容を表示させているにも関

onClick = "swtReadonly(this,'NAME')"の部分がこの動作を起動している部分で、チェッif (ele.readOnly){ele.readOnly = false}

わらず送信できなくなってしまったりして、あとelseで痛い目に合うかもしれない。両者の違いを認識{ele.readOnly = true}

したうえで、うまく使い分けよう。

クボックスをクリックすると、ソース2にある関数
swtReadonly へthis (このフォームオブジェクト)とは、readOnlyプロパティーの状態を切り替えるス「NAME」(対象となる要素名)が渡される。

イッチ部 分だ。
「oj.readOnly = false」で読み書

それでは、この関数の中身を見てみよう。

きができて、trueでリードオンリーとなる。

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

フォーム：掲示板のコメントや検索サイトでのキーワードのように、ブラウザー上でユーザーが値を入力してサーバー上のプログラムに送信することで、対話的な機能を実現する仕組み。
HTMLでは<FORM>タグや<INPUT>タグを組み合わせて作成する。
©1994-2007 Impress R&DINTERNET magazine 2001/9325

TIPS & TRICKS

4
文章の読み方向を変える
55.5

6

まずは左のサンプルを見てほしい。右側の文章の読み方向が左右逆転しているのがわかるだろう。これはソースを逆から書いているわ
けではなく、IE5から使える「読み方向を指定する」機能を使っているのだ。単純に読み方向を指定するだけならばHTMLのタグだけでもOKなのだが、今回は左側の文章にマウスポインターを載せると読み方 向 が左 右 逆 転 するように、JavaScriptを使ってちょっとおもしろいTIPSに仕上げてみた。奇抜なアイデアだが、このようなTIPSをホームページに仕掛けて、訪問者を驚かせることも制作者の楽しみの1つだろう。作り方はとても簡単なので、興味を持った人はぜひともチャレンジしてみよう。
（大内 勇）

d1
var dirFlag = 0;
var parentObj = new Array("oDiv0");
var childObj = new Array("oBdo0");function dirChange(n) {pObj = document.all(parentObj[n]);cObj = document.all(childObj[n]);if (dirFlag == 0) {pObj.style.direction = "rtl";
cObj.style.direction = "rtl";
dirFlag = 1;}
else {
pObj.style.direction = "ltr";
cObj.style.direction = "ltr";
dirFlag = 0;}}

本来、横書きの文章は「左から右」へ読ませ

2<div id="oDiv0" onMouseover="dirChange(0)" onMouseout="dirChange(0)"><bdo id="oBdo0">（文章）</bdo></div>

右への読み方向のレイアウトになる。

読み方向を切り替える文章が複数あるときは、ソるようにするものだが、このページで紹介するTIPS

ソース2は読み方向とそれにともなうレイアウトをース2全体を切り替えたい文章の数だけ追加すは、あえて「右から左」へ文章をレイアウトすると適用する要素だ。<DIV>タグの内側に<BDO>タればよい。その場合は<DIV>タグと<BDO>タグいうテクニックだ。実用的とはいえないが、遊びグがあることがわかるだろう。今回のTIPSの核とのID名に別の名称を付け、同時にonMouseover

心を持ってちょっと奇抜なことをやってみるとおもなるのがこれだ。このタグはHTML4.0から採用さとonMouseout の引数も別の値にすればよい。

しろいだろう。

れたタグで、文章の読み方向を指定する目的で用そしてソース①の配列指定の部分に、追加した

ソース1はマウスを載せたときに、文章の読み方向いられる。今回のサンプルではJavaScript側で<DIV>タグと<BDO>タグのID名を追加してやれと左右のレイアウトを切り替えるJavaScriptだ。

レイアウト方向を指定しているため、ソース2だばよい。例えば、[id="oDiv1"]という<DIV>タグ最初に2つの配列を設定し、1番目の配列にはソーけでは方向を指定してはいないが、サンプルの右と[id="oBdo1"]という<BDO>タグを追加した場

ス2の<DIV>タグのID名を入れ、2番目の配列に側のブロックは次のようにDIRアトリビュートを指合の配列は次のようになる。

は同じく<BDO>タグのID名を入れる。マウスイベ定し、右から左へのレイアウトにしている。
var parentObj = new Array("oDiv0","oDiv1");

ントで切り替える文章が複数あるときは、この2つの配列に次々と配列要素を追加していけばよい。

<DIV DIR="rtl"><BDO DIR="rtl">

関数dirChangeでは[dirFlag]の値によって文字（右から左へ読ませる文章）のレイアウト方向と読 み方向を切り替えている。

</BDO></DIV>

326 INTERNET magazine 2001/9

このテクニックを長文に対して仕掛けるとクレームメールが送られてくるかもしれない。ちょっと[direction]プロパティーが方向を表し、その値が[rtl]だと右から左への方向になり、[ltr]だと左から

var childObj = new Array("oBdo0","oBdo1");

ソース1の説明でも触れたが、マウスイベントでした演出程度にとどめておこう。

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

アトリビュート（attribute）：属性や性質のこと。ここでは、文字を表示するにあたって、それに付加させる性質を指している。

©1994-2007 Impress R&D

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

今月のテーマ

ルビを制する6万部突破！

IEでバージョン5から採用されたルビ（ふりがな）だが、今年の 5月31日にはW3Cで 仕様が正式に勧告され、XHTML 1.1のモジュール の1つとなった。
TR/2001/REC-ruby-20010531/

www.w3.org/

これまでルビの表示はあまり知られていない「HTMLパズルに挑戦しよう」
宛て先機能だったが、HTMLの標準仕様となったことで、今後は古典文学 などDを 扱ったページや子供向けのページなどで使う機会が増えてくるに違い正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛て先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

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

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

Q U E S T I O N

1 かっこを使いこなせ！

5

5.5

6

ルビのような新しいHTMLの機能を使うときには、ブラウザーの互換性が気になるもの。ルビに対応していないブラウザーでページを開くと、「漢字かんじ」のように表示されてしまって格好が悪い。この問題を回避するために、ルビの仕様にはある仕掛けが組み込まれている。左のサかんじ

ンプルではその仕掛けを使って、IEでは「漢字」のようにルビを正しく表示させ、ネットスケープでは「漢字（かんじ）」のようにかっこの中にルビを入れて表示させている。つまり、IEで自動的にルビのかっこを表示させないようにできるのだ。これならどのブラウザーでも自然な表示になる。W3Cのページでルビの仕様書を見てその方法を探してみよう。
ヒン
トQ U E S T I O N"（"と"）"をあるタグで囲う……

2 ルビの有無を切り替えろ！

5

5.5

6

ウェブページでルビを表示できるのは確かに便利だが、漢字の読みをよく知っている人にとってはかえって読みにくいページになってしまうかもしれない。ルビもタグの一種なのだから、スタイルシートやスクリプトを適用できるはずだ。そこで第2問では、左のサンプルのように、ページ上部の「ルビあり」と「ルビなし」をチェックすることで、ルビを表示させたり消したりするスクリプトを書いてみよう。スクリプトは短ければ短いほど解答として好ましい。ページ中のルビをすべて列挙して、1つ1つ削除したり表示を消したりするようなことはしないでほしい。スタイルシートを活用して一発で切り替えるスクリプトを考えよう。
ヒント

スタイルシートの有効と無効を切り替える……

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

XHTML（エックス・エイチ・ティー・エム・エル／eXtensible HyperText Markup Language）：次世代のHTMLとして2000年1月に勧告されたマークアップ言語。HTML 4.0
をXMLに適合するように修正したもの。モバイル機器用に必要なタグだけを使ったり、ほかのマークアップ言語を埋め込んで拡張したりできる。
©1994-2007 Impress R&D

INTERNET magazine 2001/9327

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