XML+XSL

こないだ初めてXMLをXSLを使ってHTMLに変換する、というのをやってみた(XSL Transformations = XSLT)。結構面白い。

○概要
あるデータをXMLフォーマットで保存。それをWeb上に表示したい。その時にXMLをある一定の規則に従ってHTMLに変換するんだけど、その規則を定義するのがXSL(XML Stylesheet Language)。

XSLは何もXMLをHTMLに変換する時に用いられるだけではなく、XMLから他のフォーマットに変換する規則を記述する為の言語。XSL自体もXMLフォーマット。

○ファイルの用意
とりあえずファイルの階層構造を表す以下のようなXMLファイルをサンプルに。

<?xml version="1.0" encoding="Shift_JIS" ?>
<?xml-stylesheet href="test.xsl" type="text/xsl" ?>
<document>
<Folder name="folder1">
<File type="text">ファイル1</File>
<File type="img">ファイル2
<Folder name="invalid folder">
<File type="text">ファイル101</File>
<File type="img">ファイル102</File>
</Folder>
</File>
<Folder name="sub folder1">
<File type="text">ファイル3</File>
<Folder name="sub folder2">
<File type="text">ファイル4</File>
<File type="img">ファイル5</File>
</Folder>
<File type="img">ファイル6</File>
</Folder>
</Folder>
</document>

2行目で使用するXSLファイルを指定してる。

また、フォルダは複数のファイル・フォルダをその下に持つ事が出来るけど、ファイルはその下にノードを持つ事はできない。「invalid folder」というフォルダはファイルの下にあるので無効。処理の仕方は色々あるけど、とりあえず今回はこういう無効なのを無視するようにXSLを記述した。

test.xslはこんな感じ。

 1: <?xml version="1.0" encoding="shift_jis" ?>
2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
3:	<xsl:template match="/">
4:		<html>
5:		<head>
6:		<title>test</title>
7:		</head>
8:		<link rel="stylesheet" type="text/css" href="test.css" />
9:		<body>
10:		<xsl:apply-templates />
11:		</body>
12:		</html>
13:	</xsl:template>
14:
15:	<xsl:template match="document">
16:		<h1>ドキュメント開始</h1>
17:		<xsl:apply-templates/>
18:	</xsl:template>
19:	<xsl:template match="Folder">
20:		<div class="folder">フォルダ名:<xsl:value-of select="./@name"/>
21:		<xsl:apply-templates />
22:		</div>
23:	</xsl:template>
24:	<xsl:template match="Folder/File">
25:		<div class="file">
26:			ファイル名:<xsl:value-of select="./text()"/>、
27:			ファイルタイプ:<xsl:value-of select="./@type"/>
28:		</div>
29:	</xsl:template>
30:</xsl:stylesheet>

1〜2行目はお約束。
3行目:テンプレート(template)の定義。テンプレートとは、XMLのある要素に出会った時にどのような内容(のHTML)を出力するかを記述したもの。ここではルートノード「/」にマッチした時の内容を記述している。HTMLのヘッダやら何やらを出力し、<body>の中では<xsl:apply-templates />
でさらに別のテンプレートを適用。
15行目:<xsl:template match=”document”>も同様
19〜20行目:<Folder>というノードを発見したらname属性を取り出しそれを表示。
24行目:ファイルはフォルダの下になければいけないので「Folder/File」にマッチした時にファイル名とファイルタイプを表示。

○処理の仕方
大きく分けて3通りか。
1.クライアントサイドで処理(ブラウザが解釈して表示)
2.クライアントサイドで処理(JavaScript)
3.サーバーサイドで処理

1.の方法は、先ほど用意したXMLをブラウザで開くだけ。XML内でXSLが指定されているので、指定されたXSLを使ってHTMLに変換されブラウザに表示される。

2.の方法は、JavaScriptで以下のようにXMLを読み込んで、HTMLのノードを書き換える。

xml_doc = new ActiveXObject("Microsoft.XMLDOM");
xml_doc .async = false;
xml_doc.load("test.xml");
area.innerHTML = xml_doc.documentElement.nodeName;

XMLをパースして生成されたHTMLを入れる場所をこんな感じで確保しておく。

<div id="area"></div>

この方法の利点は動的にページの中身を書き換えられる事。

3.の方法はプログラム言語によるので別の機会に。

○感想
色々使い道があって面白いし、プログラムがすっきり書けそうな気がする。ここ2〜3年あまりプログラム触ってなかったので、色々勉強する事があるなぁと思った。

もともとここにあるDHTMLのツリーメニューをXMLでDBに保存して好きな時に呼び出して使えるようにしたい、というのが調べ始めたきっかけ。使っているようで結構使われてないなぁという印象。これからもっと普及していくのかな。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です