Webアプリ開発事始 第20回

XMLとプログラミング(1)
~DOMによるXML文書の操作
長谷川裕行
有限会社 手國堂

サンプル~スタイルシートの切り替え

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


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

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

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

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

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

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

  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


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

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

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

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

リスト5のHTML文書をブラウザで開くと、画面1のようになります。3つのボタンに、先に紹介したスタイルシート(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 © GrapeCity inc. All rights reserved.