Webアプリ開発事始 第20回
XMLとプログラミング（１）
～DOMによるXML文書の操作		 長谷川裕行
有限会社 手國堂
サンプル～スタイルシートの切り替え

JavaScriptでXMLデータアイランドを使ったサンプルとして、スタイルシートの切り替え処理を紹介しましょう。


- スタイルシートで表示を切り替える -

XMLで記述されたデータベースのテーブルは、XSLスタイルシートによって表示形式を設定できます。つまりスタイルシートを複数用意すれば、１つのテーブルの内容を様々な表示形式で提示できるということです。

リスト1は、前回紹介した社員情報のXML文書です。但し、

　　<?xml-stylesheet type="text/xsl" href="members04.xsl"?>

といったXSLスタイルシートの指定行を削除してあります。

このXML文書を表示するためのスタイルシートを、リスト2～4の３通り用意します。各スタイルシートの表示形態は、以下のようになっています。

　　members-a.xsl（リスト2）：単純にデータを表示するだけ
　　members-b.xsl（リスト3）：社員番号を太字で表示する
　　members-c.xsl（リスト4）：データを枠線付きの表形式で表示する

リスト1：社員情報を記録したXML文書～members04.xml
リスト2：単純にデータを表示するだけのスタイルシート～members-a.xsl
リスト3：社員番号を太字で表示するスタイルシート～members-b.xsl
リスト4：枠線付きの表形式で表示するスタイルシート～members-c.xsl


- ボタンでシートが切り替わる -

こうして３つのスタイルシートによる３通りの表示方法を用意しても、XML文書内でスタイルシートの指定を記述していたのでは、表示を変更するたびに

　　<?xml-stylesheet type="text/xsl" href="members-a.xsl"?>

などとXSLスタイルシートの名称を書き換えなければなりません。それではXMLを利用する意味がないので、別のHTMLファイルにJavaScriptを記述し、それによってスタイルシートを切り替えるようにしてみます。

リスト5のHTML文書をブラウザで開くと、画面1のようになります。３つのボタンに、先に紹介したスタイルシート（members-a.xsl、members-b.xsl、members-c.xsl）による表示が割り当てられているので、ボタンをクリックすると画面2～4のようにXML文書の表示が切り替わります。

リスト5：JavaScriptでスタイルシートを切り替えてXML文書のデータを表示する～members04.html

画面1：members04.htmlを開いたところ。ボタンのクリックで表示形式を切り替えられる


画面2：[通常の一覧]ボタンをクリック～members-a.xslによる表示


画面3：[番号を太字]ボタンをクリック～members-b.xslによる表示


画面4：[表形式]ボタンをクリック～members-c.xslによる表示



- transformNodeメソッドを使う -

JavaScriptの詳しい解説は本記事のテーマから外れるため、ソースの詳細な説明は割愛します。要は

function ViewTypeA() {
viewarea.innerHTML = members_xml.transformNode(type_a.documentElement);
}

のようにして、特定のXSLスタイルシートでXML文書を表示させるメソッドを用意し、

<input type="button" value="通常の一覧" onClick="ViewTypeA()">

という形でボタンのOnClickイベントに割り当てているだけです。

transformNodeメソッドは、XML文書を指定したスタイルシートに従った表示形式に変換します。書式は以下の通りです。

　　戻り値 = オブジェクト.transformNode(スタイルシート)
　　　戻り値：返還後の文字列
　　　オブジェクト：XML文書を保持しているDOMDocumentオブジェクト
　　　スタイルシート：スタイルシートを保持しているDOMDocumentオブジェクト


あとがき

スクリプト言語からDOMDocumentオブジェクトを使ってXML文書を操作する方法を、簡単に紹介しました。DOMDocumentオブジェクトを使ったWebアプリケーション開発については、もう少し掘り下げて紹介したいので、次回はXML文書のデータ検索処理を例に説明を続けます。

また、DOMの欠点をカバーするSAXの扱いについても、回を追って紹介しようと思います。

Downloadサンプルファイル (LZH形式 2.19 KB)
■ トップページ
■ DOMとDOMDocumentオブジェクト
■ 各種言語とDOMDocument
■ サンプル～スタイルシートの切り替え
・ スタイルシートで表示を切り替える
・ ボタンでシートが切り替わる
・ transformNodeメソッドを使う
■ あとがき

Copyright © MESCIUS inc. All rights reserved.