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通りか。
１．クライアントサイドで処理（ブラウザが解釈して表示）
２．クライアントサイドで処理（JavaScript）
３．サーバーサイドで処理
１．の方法は、先ほど用意したXMLをブラウザで開くだけ。XML内でXSLが指定されているので、指定されたXSLを使ってHTMLに変換されブラウザに表示される。
２．の方法は、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>
この方法の利点は動的にページの中身を書き換えられる事。
３．の方法はプログラム言語によるので別の機会に。
○感想
色々使い道があって面白いし、プログラムがすっきり書けそうな気がする。ここ2〜3年あまりプログラム触ってなかったので、色々勉強する事があるなぁと思った。
もともとここにあるDHTMLのツリーメニューをXMLでDBに保存して好きな時に呼び出して使えるようにしたい、というのが調べ始めたきっかけ。使っているようで結構使われてないなぁという印象。これからもっと普及していくのかな。
