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

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

1997年2月号に始まったこの連載も56回目でついに最終回を迎えることと4

インターネットエクスプローラ4以上なった。ブラウザーの進化に合わせてこれまで300以上ものTIPSを紹介して5

インターネットエクスプローラ5以上きたが、これらがウェブでの表現の幅を広げてきたと自負している。今回は5.5

インターネットエクスプローラ5.5以上XMLを利用したTIPSなどを紹介 するが、これらを今後のウェブの方向を考

6

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

えるうえでの 参考にしてもらえれば幸いである。

4

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

6

ネットスケープ6以上

CD-ROM収録先

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

Mozilla9月号「HTMLパズルに挑戦しよう」の解答
今回はひさしぶりに多くの方から応募をいただいた。W3Cのサイトに注目していれば、第1問のようにブラウザーの最新機能が発見できることもある。第2問では、<RT>タグを列挙して1つずつ表示を切り替える
スクリプトは、残念ながら不正解とさせていただいた。

A N S W E R

1 かっこを使いこなせ！

<RUBY>〜</RUBY>の間で、かっこを<RP>〜</RP>で囲む。ルビに対応したブラウザーでは<RP>の内容は表示されない。マイクロソフトのサイトには<RP>タグが記載されていないが、IE 5以上でサポートされているようだ。

<RUBY><RB>山路</RB><RP>（</RP><RT>やまみち</RT><RP>）</RP></RUBY>

A N S W E R

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

正 解 者 ： Kazuhisa Sakabe、 山 口 雅 仁 、Masahiko Murata、ENDE、岩 田 裕 之 、堀 江 、かず、 よしとも、 なるる、 鼎 甲 子 、 うおまさ
＠home（敬称略）

このページでメインとなるスタイルシートとは別に、RT { display: none; }だけの<STYLE>タグを追加する。スクリプトで配列styleSheetsを使ってこの<STYLE>タグの有効と無効を切り替えれば、ルビを一度に表示したり消したりできる。

<STYLE TYPE="text/css" DISABLED>RT { display: none; }</STYLE><SCRIPT TYPE="text/javascript">function rubyswitch(on) {document.styleSheets[1].disabled = on ? true : false;}</SCRIPT>

298 INTERNET magazine 2001/10

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

正解者：Kazuhisa Sakabe 、Masahiko Murata、ENDE、堀江、よしとも、なるる（敬称略）

W3C（ダブル・スリー・シー／World Wide Web Consortium）：WWWの発展との相互運用性の確保のために、企業や研究所、大学をメンバーとして設立された世界的な組織。
HTMLやCSS、XMLの仕様書を勧告として公開している。
©1994-2007 Impress R&D

TIPS & TRICKS1XSLTでXMLデータを検索する
6
連載の最終回にふさわしく、未来 のファイル形 式 X M Lを使ったTIPSを紹介しよう。左のサンプル
は一見CGIを使った検索フォームのようだが、実はJavaScriptで外部のXMLファイルを読み込んで、ブラウザー上でデータを検索しているのだ。これまで外部のデータを読み込むにはインラインフレー
ムを使うしか手がなかったが、XMLを使えばHTMLとは別にデータを保存して、JavaScriptから読み込んだり検索したりできる。しかも最近流行のXSLTを使ってXMLデータをHTMLのテーブルやリストに変換することも自由自在だ。この仕組みがわかれば新時代のウェブ技術もばっちりだ。（佐藤和人）

d1<XML ID="bookdata" SRC="book.xml"></XML><XML ID="bookxsl" SRC="book.xsl"></XML>2<SCRIPT TYPE="text/javascript">function search (keyword) {node = bookxsl.XMLDocument.selectSingleNode("//xsl:for-each");node.setAttribute("select", "//book[contains(title, '" + keyword + "')]");
str = bookdata.XMLDocument.transformNode(bookxsl.XMLDocument);
view1.innerHTML = str;}</SCRIPT>XSLT（XSL Transformation）とは、XML形式のスタイルシート言語XSL（Extensible StylesheetLanguage）の機能の1つで、あるXMLデータを別のXMLデータに変換するものだ。XSLTを使うと、msdn.microsoft.com/library/en-us/xmlsdk30/htm/xmmscxmlreference.asp
msdn.microsoft.com/library/en-us/xmlsdk30/htm/xmrefxsltreference.asp

for-each>要素が次のように変わる。
<xsl:for-each select="//book[contains(title, 'キーワード')]">

XMLデータをHTML形式に変換してウェブブラウザーで自由に表示できるようになるため、現在大ソース2の「search」
はXMLデータを検索して表これにより、< x s l : f o r - e a c h > 要 素の意 味 がきな注目を集めている。

示させる関数だ。book.xslファイルのなかに次「<book>要素の下の<title>要素にキーワードがまずソース1のように、IEの独自タグ<XML>を使のような行がある。XMLデータの「<book>要素含まれるものを取り出せ」に変わる。って外部XMLファイルを読み込む。book.xmlはをすべて取り出せ」という意味だ。

次に、transformNodeメソッドでXMLデータとXSLTを組み合わせると、キーワードに一致したデ書籍データを記述したXMLファイルで、book.xsl
はそのXMLデータをHTML形式に変換するため<xsl:for-each select="//book">ータがHTML形式の文字列になって取り出せる。
この文字列をページのなかに表示させればいい。のXSLTを記述したXSLファイルだ。XSLもXML形式のため、<XML>タグで読み込める。book.

関数searchの最初の2行は、この<xsl:for-each>

今回のサンプルは残念ながらIE 6でしか動作しなxmlとbook.xslの内容についてここでくわしい説要素を入力されたキーワードに従って変化させるい。付録CD-ROMにはIE 5や5.5でも動くサンプ

明はしない。付録CD-ROMに収録したファイルをものだ。selectSingleNodeメソッドで<xsl: for-ルを収録してある。検索機能はなく、XMLデータ見ながら、マイクロソフトの次のページを参照してeach>要素にアクセスし、setAttributeメソッドを読み込むだけのものだが、XSLTの力は実感でほしい。

で select 属性を変化させる。その結果、<xsl:きるだろう。

インターネットマガジン／株式会社インプレスR&DXML（エックス・エム・エル／eXtensible Markup Language）：文書の構造を記述するタグ言語の1つでSGMLをリニューアルしたもの。文書自身の中にタグを埋め込む形で利用され、ユーザー自身が独自のタグを定義することができるのが特徴。
©1994-2007 Impress R&DINTERNET magazine 2001/10299

TIPS & TRICKS

2
背景画像をウィンドウサイズに合わせる
4

5

5.5

66

ホームページで大きい背景画像を使うときに、ウィンドウサイズと背景画像のサイズを合わせることができれば、きれいなデザインになるのにと思ったことはあるだろう。
そんなときは、ここで紹介するTIPSを使ってもらいたい。左はこのサンプルだが、ウィンドウサイズを変えると同時に背景画像のサイズも変わっていることがわかるだろう。
ただし、このTIPSには弱点もある。
上下のスクロールが必要なページの場合、スクロールした部分の背景がなくなるということだ。そのため、このTIPSは画面におさまるページで使うようにしてもらいたい。
ソースはとても簡単だ。興味のある方はさっそくトライしてみよう。
（大内 勇）d<IMG src="title.gif" width="100%" style="position:absolute;top:0;left:0;z-index:0"><DIV style="position:absolute;top:0;left:0;z-index:1">（ここにページの内容を記述）</DIV>

背 景 画 像というと、< B O D Y > タグの[ b a c k定している。それぞれ[position,left,top]属性でもウィンドウサイズに応じて変えることができるた

ground]属性を使って指定する手法が普通だが、同じ位置に指定し、[z-index]属性を使って重ねめ、さらにCool なページになるだろう。

ここで紹 介 するT I P S は上 記 のソースのとおり合わせの順番（値が大きいほうが上に重なる）を指<BODY>タグを使うことなく背景画像を表示させ定している。これでレイヤーが同じ位置に重なり合る。では、どのような手法を使っているのだろう

うようになるため、[z-index]の値が小さい<IMG>

font-size:expression(body.clientWidth/10)

か？ それはスタイルシートのレイヤー機能を使ってタグが背景画像になるのだ。背景画像がウィンド

ただし、この方法はIE5以降でしか 使えない。注いるのだ。

ウの サイズに合 う仕 組 みは、< I M G > タグの意してほしい。

まず、最初に基本的な構造を説明しておく。ソー[width]属性を100%に指定することで実現していこのページの右上の囲みでも触れたが、このTIPSスを見ると<IMG>タグと<DIV>タグを使っているる。本来なら背景画像をウィンドウサイズに合わを上下スクロールが必要なページに組み込むと、ことがわかるだろう。このソースは<BODY>からせるのだから、[width]属性に加えて[height]属性スクロールした部分の背景画像が表示されなくな</BODY>までの間に記述し、ページの構成要素の値も100% にしなければいけないのだが、これってしまうため、なるべくスクロールする必要のな

はソースの<DIV>から</DIV>までの内側に記述を指定してしまうと画像の縦横比が崩れてしまい、いページで使おう。

する。これで<IMG>タグと<DIV>タグが別のレイウィンドウサイズによっては非常に格好悪くなってなお今回のTIPSとは関係ないが、サンプル画面ヤーになるため、<IMG>タグで指定した画像を背しまう。[width]属性だけを指定しておけば、画像の上に重なっているレイヤーで使っているカレン景にできるのだ。

サイズの縦横比が維持されるため崩れない。

ダーはJavaScriptで作られている。誌面の都合次はこのTIPSの仕組みを説明しよう。<IMG>タ

このTIPSでは使ってないが、次のようなスタイル上これに関しては説明しないが、興味がある人はグと<DIV>タグには同じようなスタイルシートを指シートを<DIV>タグに指定すると、フォントサイズ

付録CD-ROMのソースを参考にしてほしい。

300 INTERNET magazine 2001/10

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

レイヤー：本来は「層、階層」の意味。複数のシートを階層的に重ね合わせてひとつの絵を作成する機能のこと。透明なセル画を重ね合わせるように、シートごとに色や部品を分けて絵を書き込んでいくと、シートを選んで表示させたり、シートごとに独立した加工ができたりする。
©1994-2007 Impress R&D

TIPS & TRICKS

3
スライダーバーを作る
5

5.5

6

今回は最終回にふさわしいTIPSということで、少しトリッキーな技を紹介しよう。見た目は普通のスライダーバーだが、普通と違うのは、実は、HTMLの<TEXTAREA>のスクロールバーを利用して作っているところだ。スライダーをドラッグして動かすことで、いろいろな可変数値入力のコントロールとして使える。ただ欠点として、トリッキーなTIPSだけあって利用できる環境がウィンドウズのIE5 以上に限定されてしまうが、スクリプト部分はいたってシンプルで、簡単にできる。クロスブラウザーなDHTMLを使うまでもない限定された場所などで気軽に使えて便利だ。
（高橋登史朗）d2<!--グラフ--><input type="text" id="inputdata1" style="width:50px"><span id="g1" class="gbar"></span>

1.sliders {font-size:614px;
width:20px;height:200px;
border :4px solid #ffffff}

3<!--スライドバー--><textareaid= "data1"class = "sliders"
onscroll = "inputdata1.value=this.scrollTop;
document.all('g1').style.width=this.scrollTop"></textarea>

まずソース3を見てみよう。これが今回のス

ご存じのように、テキストエリアにスクロールバ

ルは作った時のスライダーの可変数値を500に微ライダーバー本体だ。え? ただのテキストエリアーが現れるためには、「テキストエリアから文字調整しているが、これは、font-size:614px とじゃないかって? その通り。このテキストエリアが溢れていて、スクロールしないと全部を見れな

border :4pxの組み合わせで指定する。仮に700に魔法のCSSをかぶせてスライダーバーに仕立てい」という状態になる必要があるのだ。そこでまに指定したければ、上げてみた、というわけだ。そこで、このテキスず、下のように、
font-size:703px ;トエリアを調べる前に、class属性で指定していfont-size:614px ;るCSSソース1を見て欲しい。まず、

border :4px;

width:20px ;とフォントサイズを大きくする。これで文字が溢となる。この辺は、関数を別に作っておくと便利

height:200px ;れて、スクロールバーが現れる。バーの太さを変かもしれない。

更したい時は、が第1のポイントだ。これで、テキストエリアの幅が20px、高さ200pxに絞り込まれる。これが最後に、ソース3のonscroll内のスクリプトだが、これは、スライダーバーをドラッグした値を表示

border :4px #ffffff ;スクロールバーのエリアになるわけだ。もし、こし、グラフ化するためのものだ。もちろん使い方はこれに限らない。可変数値の入力が必要な場の幅と高さを逆にすれば、横向きのスクロールバのpx値を変更すると良い。これを小さくするほーエリアが確保されることになる。でも、実はこど太くなり、大きくするほど細くなる。#ffffffのれだけでは、スクロールバーは現れてくれない。

部分の色はページの背景色に合わせよう。サンプ

所なら、気軽に使える。

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

テキストエリア：フォームの入力用のタグの1つで、複数行のテキストを入力するのに使われる。掲示板やアンケートのメッセージ欄はその例。COLS属性で横の文字数を、ROWS属性で行数を指定できる。
©1994-2007 Impress R&D

INTERNET magazine 2001/10301

TIPS & TRICKS

4
プライバシーポリシーを表明する
6
最新のテクノロジーを使いこな
そうとする者は、最新のオピニオンにも敏感でなければならない。そう思う君なら、いまネットで関心を呼んでいるプライバシーの問題にも無関心ではないだろう。そこで
今回はW3Cが策定中のP3Pを利用して、サイト運営者がフォームやクッキーを通じて集めるユーザーの情報を、いったい誰が、どんな目的で、どのように使うのかを表明するTIPSを紹介しよう。残念ながら、現在のところ対応ブラウザーがIE6 の英語版だけしかないのだ
が、日本の製品版では搭載される可能性の高い機能だけに、学んでおく価値があるだろう。
（藤井幸孝）

d1

3<HTML><HEAD><link rel="P3Pv1" href="p3p.xml"></HEAD></HTML>

2<META xmlns="http://www.w3.org/2000/12/P3Pv1"><POLICY-REFERENCES><EXPIRY max-age="172800"/><POLICY-REF about="/P3P/PolicyMain.xml"><INCLUDE>/*</INCLUDE><EXCLUDE>/cgi-bin/*</EXCLUDE></POLICY-REF></POLICY-REFERENCES></META><POLICY xmlns="http://www.w3.org/2000/12/P3Pv1"
discuri="http://www.blueyonderairlines.com/ourprivacypolicy.html"><ENTITY><DATA-GROUP>（サイト運営者の情報を書く）</DATA-GROUP></ENTITY><ACCESS><contact-and-other/></ACCESS><STATEMENT><CONSEQUENCE>関心を持たれた商品情報をお送りします。</CONSEQUENCE><PURPOSE><pseudo-analysis/></PURPOSE><RECIPIENT><other-recipient/></RECIPIENT><RETENTION><business-practices/></RETENTION<DATA-GROUP><DATA ref="#user.home-info.email"><CATEGORIES><online/></CATEGORIES></DATA></DATA-GROUP></STATEMENT></POLICY>

英語版のIE6では、メニューバーの[View]の須項目のdiscuriで、ポリシーをくわしく説明したペり、それを閲覧できるという意味になる。

なかに[Privacy Report]という項目があり、そのージのURLを挙げる。<ENTITY><DATAGROUP>

これらのタグや値はごく一部にすぎない。よりくわサイトの持つプライバシーポリシーを表示できる。

はサイト運営者の情報、<STATEMENT>が実際しく知りたい人は、W3C のP3P仕様書

この機能で利用されるP3Pのポリシーは、ポリシのポリシー部 分 になる。 個 人 情 報 収 集 の目的

たは日本語訳

ー参照ファイルとポリシーファイルの2つから構成（PURPOSE）、受取人（RECIPIENT）、保管ポリシ

さて、気になるポリシーの提供方法だが、まずはされ、それぞれはXMLで記述される。

ー（RETENTION）、対象データ（DATA-GROPUP）

ポリシー参照ファイルをブラウザーに渡してやらな

ソース2の参照ファイルは、ポリシーファイルののほかに、オプションで言葉による説明（CONSEければならない。W3Cでは、サイトの特定の場所格納場所を示している。<EXPIRY>タグはポリシ

QUENCE）を書くこともできる。<DATA GROUP>「http://ドメイン名/w3c/p3p.xml」に置く、もしく

Jump 02

Jump 01

まを参考にしてほしい。

ーの寿命で、max-age="mm"で「mm秒間有効」には複数の<DATA>とその<CATEGORIES>をは H T T P ヘッダーに記 述 する、たとえば「P 3 P :という意味だ。<POLICY-REF about="filename.

記述する。ここでは「匿名分析（pseudo-analysis）

policyref="http://www.impress.co.jp/P3P/p3xml">はポリシー本体を相対URLで表している。のために、サイト運営者以外（other-recipient）
が、p.xml"」のような方法、HTMLのLINKタグを使う<INCLUDE>と<EXCLUDE>はポリシーの適用/ネット（online）情報であるメールアドレス（ref=「<link rel="P3Pv1" href="p3p.xml">」の3種類非適用範囲をディレクトリー単位で表す。例では"#user.home-info.email"）を集め、ビジネス判の方法を定義している。今回の例ではソース1の/cgi-bin ディレクトリー以外のすべてのディレク断で保存する」ことを知らせている。

ように<LINK>タグを利用してみた。

トリーが適用対象となる。

<ACCESS>タグは、サービス提供者に質問や不Jump 01

www.w3.org/TR/P3P/

そしてポリシーの本体が、ソース3のポリシーファ

満があれば苦情を出せるかどうかを示すためのも

Jump 02

イルだ。まずxmlnsでP3PのDTDを示した後、必のだ。contact-and-other は、連絡用情報があmda.or.jp/enc/w3c/
cr-p3p-20001215j.html

302 INTERNET magazine 2001/10

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

クッキー：WWWサーバーがブラウザーに対してデータを保存するように要求する仕組み。または保存されたデータ。以前にページを訪れたユーザーを識別するためなどに使われる。
JavaScriptでもクッキーを扱える。
©1994-2007 Impress R&D

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

今月のテーマ3つのブラウザーを制する6万部突破！

これまで56回にわたってさまざまなTIPSとパズルをお届けしてきたが、新しいブラウザーの登場や気付かなかったテクニックの発見によって、今では古くさく見えるサンプルもある。そこでこれまでの連載の復習として、以前にこの連載で紹介し「HTMLパズルに挑戦しよう」
宛て先たダイナミックHTMLを、①IE 4〜6、②ネットスケープナビゲーター

D

4、③ネットスケープ6とMozillaという3つの系統のブラウザーで同じ正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛て先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

ように動作 するように書き直すパズルに挑戦していただく。正解者には抽選で 折り畳み傘をプレゼントさせてもらおう。なお、正解は9月29日にウェブページ内internet.impress.co.jpで発表する。それでは頭をやわらかくして、今月のテーマ"3つのブラウザーを制する"にチャレンジ！

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

Q U E S T I O N

1 マウスオンでメッセージを表示せよ！

4

5

5.5

6

4

6

MO.91

右のサンプルは、1999年3月号（単行本「ホームページ裏ワザ大全HTML TIPS & TRICKS」では99ページ）で紹介した「2つのブラウザーでダイナミックHTMLを動かす」と同じく、マウスをリンクの上に載せるとそれぞれ違ったメッセージを表示させるページだ。これをナビゲータ
ー4とIEだけでなく、ネットスケープ6とMozillaでも動作するように改良するのが第1問だ。さらに、1999年3月号のようにnavigatorオブジェク
トを使ってブラウザーを判別せずに、ほかの方法を使ってダイナミックHTMLが使えるかどうかを調べることを条件とする。その判別方法も、これまでの連載をよく見れば実は何度か紹介されている。
ヒント

Q U E S T I O N

getElementByIdでオブジェクトを取得して……

2 オブジェクトを自由に 動かせ！

45

5.5

6

4

6

MO.91

第 2 問も第1問と同じように、1999年4月号（単行本「ホームページ裏ワザ大全 HTML TIPS & TRICKS」では100ページ）で紹介した「2つのブラウザーでダイナミックHTMLを動かす その2」をネットスケープ6とMozillaで動作させる問題だ。3 種類のブラウザーでマーキーのように文字の位置を動かし、画面からはみ出さないように左右に往復させるスクリプトを書いてみよう。第1問と同じく、navigatorオブジェクトを使わないことが条件だ。ネットスケープ6は、オブジェクトの操作方法ではIE 5以上と共通する部分が多いが、ウィンドウの幅の取得など標準化されていない部分ではナビゲーター4との互換性を残している。
ヒント

ネットスケープではinnerWidth……

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

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

©1994-2007 Impress R&D

INTERNET magazine 2001/10

303

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