スタイルシートをクリックで動的に切り替えたい
XML文書をWebブラウザ上に表示させ、ボタンを押すなどの操作によって、表示内容を素早く切り替えたいと思っています。どのようにプログラムすればいいでしょうか。

回答／富士ソフトＡＢＣ株式会社 技術調査室
2000/12/14

　Webブラウザ上でXML文書を表示するには、XML文書とスタイルシートの組み合わせを利用します。マイクロソフトのInternet Explorer 5.0以降では、このスタイルシートを簡単なスクリプトで切り替えることができます。これによって、1つのXML文書を瞬時に違うスタイルで表示できるようになります。

ボタンを押すことで、表示が瞬時に切り替わる。HTMLとXML、XSL､DTDの4つのファイルを使っている

　ここでは、そのスタイルシートを切り替える方法を紹介しましょう。使用するファイルは、スクリプトを記述したHTML文書、データが記述されているXML文書、XML文書の定義が記述されているDTDファイル、そして切り替え用の4種類のスタイルシート（XSL）です。上記の画面は、Internet Explorer 5.0（MSXMLはデフォルトのまま）と下記のサンプルファイルの組み合わせで試すことができます。

　それぞれのファイルの内容を紹介していきましょう。

■HTMLファイル内のJavaScript

　まずは、HTMLファイルの内容です（sample.htm）。このHTMLファイルは、XML文書を表示する枠組みをWebブラウザ上に表示することと、そしてXML文書にスタイルシートを適用して表示するためのJavaスクリプトが記述されています。ここでは表示部分とJava Scriptについて説明します。行頭の数字は、それぞれのファイルにおける行番号です。

　6行目では、XMLデータアイランド定義を使って、使用するファイルにIDを割り当てています。XMLデータアイランドとは、実際にXML文書をブラウザ内にレンダリングするわけではなく、データとして取り込んで操作を可能な状態にする、という機能です。ここではsample.xml にsampleというIDを割り当てています。XSLファイルにも同様に、それぞれにIDを割り当てていきます。あとでスタイルを切り替えるときに、このIDを利用するわけです。

006: <xml id="sample" src="sample.xml"></xml>

　11行目からJava Scriptが始まります。ここでは、ボタンが押されたときに行う処理を記述していきます。複雑な処理ではないので、それぞれボタンごとに処理を記述します。

011: <script language="JavaScript">
012: <!--
013: function style1() {
014: here.innerHTML = sample.transformNode(style_1.documentElement);
015: }
016: function style2() {
017: here.innerHTML = sample.transformNode(style_2.documentElement);
018: }
019: function style3() {
020: here.innerHTML = sample.transformNode(style_3.documentElement);
021: }
022: function style4() {
023: here.innerHTML = sample.transformNode(style_4.documentElement);
024: }

　13行目から15行目が、1つ目のボタンのための記述です。ここで行っていることは、XML文書に指定したスタイルを適用して、指定した場所に表示することです。IDがsampleであるsample.xml文書ファイルに、IDがstyle_1である style_1.xsl で指定したスタイルを適用して、表示しています。

　transformNodeメソッドを使うと、渡されたXSLツリーを使ってXMLノードを出力文字列に変換できます。style_1.documentElementは適用するXSLツリーを表しています。IDに従って style_1.documentElementはstyle_1.xslファイルの内容になります。変換された文字列は、実際の表示を行う場所であるDIV要素に割り当てられたIDのhereに渡ります。

035: <input type="button" value="Noとタイトル" onClick="style1()" />

　次にWebブラウザに「Noとタイトル」ボタンを作成します。ボタンが押されると、style1( )のJava Script関数を呼び出します。この呼び出しによって、XML文書が処理されてページの下に表示されます。以下、それぞれのボタンについて指定しています。

041: <div id="here" align="center">

　上で作成しているボタンが押されると、呼び出されたJavaScriptの関数で処理されたXML文書のデータがここに表示されます。関数で処理された文字列がIDのhereに渡されると、DIV要素の現在の内容と置き換えられて表示されます。

■表示するデータをすべて含むsample.xml

　次に、表示されるXML文書の内容について説明しましょう（sample.xml）。

001: <?xml version="1.0" encoding="Shift_JIS"?>
002: <!DOCTYPE doc SYSTEM "doc.dtd">
003: <doc>

　1行目はXML文書の先頭で必ず定義される一文です。XMLのバージョンは1.0、文字コードは Shift_JISでこの文書が記述されていると宣言しています。

004: <info>
005:   <data>2000/01/01</data>
006:   <no>3015</no>
007:   <title>XML サンプル - 1</title>
008:   <category>CD-ROM</category>
009:   <key>XML</key>
010:   <contents>XMLのサンプルCD-ROMを入手しました</contents>
011: </info>

　4行目から、要素infoが開始されています。このXML文書では、<info>と</info>で囲われたデータがいくつか記述されており、この内容が表示されます。

■表示スタイルを決めるスタイルシート [ style_1.xsl 〜 style_4.xsl ]

　切り替え表示のためのXSLファイルについて説明しましょう。XSLファイルは1から4までありますが、今回はほとんど同じ内容なので、style_1.xslを例にして説明します。

001: <?xml version="1.0" encoding="Shift_JIS"?>
002: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

　XSLファイルも、XML文書ファイルと同様に、XML宣言が最初にあります。2行目も、XSLを記述するときに、必ず記述する文書です。名前空間(Namespace)などを定義するために必ず記述するものですが、このサンプルを作った当時は、XSLの仕様がワーキングドラフトで正式勧告前だったため、その状態の宣言になっています。

　現在では、既に仕様が勧告になっているため、それに従うと、正しくは次のようになります。

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:fo="http://www.w3.org/1999/XSL/Format"
version='1.0'>
スタイルシートの宣言を変更すると、正しく表示されなくなることがあります。これはその前提となる名前空間の実装仕様に差異があるためです。XML関連技術は現在進行中であるため、1台のマシンでうまく動作したとしても、ほかの環境では動作しない可能性があります。環境をそろえたり、実装仕様を確認してXSLの記述を変更したりする必要があります。

003: <xsl:template match="/">
004:   <html>
005:     <head>
006:       <title>サンプル表示</title>
007:     </head>
008:     <body>
009:       <p>最新版 技術情報 [Ｎｏとタイトルの表示]</p>
010:       <p>----------------------------------</p>
011:     </body>
012:     <xsl:apply-templates select="doc" />
013:   </html>
014: </xsl:template>

　3行目の定義で、このスタイルシートをドキュメントルートに対応させています。続いて、9行目では、Webブラウザ上に表示される表のタイトルを示しています。これはXSLファイルごとに異なります。

　12行目では、要素docについてこのXSLTファイル内の別のテンプレートが適用されることを表わしています。実際の表示では、別のテンプレートの適用によって生成されたデータがこの定義と置き換えられます。

■XML文書の構造を定義するdoc.dtd

　sample.xml の文書型定義（DTD）について、定義内容を説明します（doc.dtd）。DTDは、XML文書の構造や情報の妥当性に対する構文をチェックするために記述されます。XML文書内部に記述することも、.dtdファイルとして外部に記述することもできます。DTDの記述は必須ではなく、省略もできます。

001: <!ELEMENT doc (info*)>
002: <!ELEMENT info (data, no, title, category, key, contents)>
003: <!ELEMENT data (#PCDATA)>

　1行目では、最上位のルート要素としてdocを定義しています。また、info*は子要素としてinfoを持っていることを定義し、*はinfo要素を0個以上持てることを意味しています。info?のように * が ? の場合、持てる要素数は0〜1個になります。info として * や ? が何も指定されていない場合は、必ず1つの要素を持つことを意味します。

　2行目で、docの子要素であるinfoについて定義しています。さらに子要素として、data、no、title、category、key、contentsを1個ずつ持つことを定義しています。さらに3行目で、infoの子要素であるdataについて定義しており、内容として #PCDATA（テキスト）を持つと定義しています。

　

「Ask XML Expert」

　



XML & SOA フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日月間
＠IT