第2回 XMLをそれっぽく表示させる
では。 まずはXMLをそれっぽく表示させるための説明から。 XMLはこれ単体だと、見た目ぱっとしないので、これをぱっとさせる為の スタイルシート(なんて言えばいいんだろ・・・変換方法を書いたもの・・・かな)があります。 これはeXtensible Stylesheet Languageと呼ばれるもので・・・って長ったらしいので 通常XSLと略して呼ばれていますが、これを使ってXMLの見栄えを良くすることが出来ます。 じゃ、前回使った<?xml version="1.0" encoding="Shift_JIS"?> <whatsnew> <date>06/15</date> <rev>日記更新</rev> </whatsnew>
これを見栄え良くしてみます。 まず、XMLに使用するXSLを指定する命令を追加します。<?xml version="1.0" encoding="Shift_JIS"?> <?xml-stylesheet type="text/xsl" href="sample.xsl"?> <whatsnew> <date>06/15</date> <rev>日記更新</rev> </whatsnew>
追加したのは、<?xml-stylesheet・・・の上から2行目です。 この中にあるhref=の後にXSLファイルを指定します。 次にそのXSLファイルを作ります。 内容はこんな感じです。01:<?xml version="1.0" encoding="Shift_JIS"?> 02:<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 03:<xsl:output method="html" encoding="Shift_JIS" /> 04:<xsl:template match="/"> 05:<html> 06: <head> 07: <title> 08: XMLでHP 09: </title> 10: </head> 11: <body> 12: <xsl:apply-templates /> 13: </body> 14: </html> 15:</xsl:template> 16:<xsl:template match="whatsnew"> 17: <p> 18: <xsl:value-of select="date" /> 19: <xsl:value-of select="rev" /> 20: </p> 21:</xsl:template> 22:</xsl:stylesheet>
おおぅ、いきなり長くなったな・・・ まず、XSLについての説明を。 XSLって言うのは、XMLのデータを使って見やすいように加工するための スタイルシートで、今回はHPを作ることを目指しているので、XMLを使ってHTMLを 出力する、というXSLになります。 上のリストを見ても判る通り、HTMLがそのまま入っています。 この中にXMLのデータを差し込んで、見栄え良く表示させる為のXSLと言うことになります。 (実際はHTMLだけじゃなく、使いようによっては、いろいろな出力が出来ます。) では必要なところだけ^^;上のリストを順を追って説明します。 まず01〜03行は、約束事として必ず書いてください。 HTMLを作成する上では、ここを変更する必要はありません。ので説明も無しで^^; 04行から実際に表示させる為のテンプレート(これも説明難しいな・・・よく雛型って説明 されてますが。よく使われる型って言うか、ここでは変換方法かな)になります。 この行はXMLデータのルート・・・最上位を表しています。 ちなみにルートはwhatsnewのさらに上を指します。つまり何も無い部分。 そして全てのXMLデータに存在する部分です。 なにやら難しげですが、実はここも変更する必要はありません。このままでOKです。 05〜11行はHTMLタグそのままです。ちなみに、HTMLタグは必ず小文字で書いてください。 XSL内でHTMLタグを使う場合の決まりごとなので。大文字で書くと、そんなタグねーよっ て怒られます。 12行ですが、ここに別のテンプレートを使って差し込みますよーって言う命令です。 じゃどのテンプレートを差し込むかというと、「適合したテンプレート全て」ということになります。 もし特定のテンプレートのみ差し込みたい場合は、<xsl:apply-templates select="date"/> <xsl:apply-templates select="whatsnew/date"/> ここの例だとこっちの方が正しいですね・・・
といった感じになります。 13,14行はHTMLタグの閉じ部分ですね。 15行は、04行から始まったテンプレートの終りを示しています。 16行からは差し込むためのテンプレートになります。 match=の部分で指定するのは、XMLで作成したタグになります。 ここの例でいくと、whatsnewタグについてのテンプレート、ということになります。 ちなみに先ほど12行のところで説明した、テンプレートを指定する場合も、このタグ名 を指定することになります。(もちろんそのタグ用のテンプレートが必要) 17,20行はHTMLのPタグです。 18,19行はその中にXMLのデータを差し込みます。指定方法はselect=の後に差し込みたいデータ のタグを書きます。 21行はこのテンプレートの終りを示しています。 そして最後に22行でXSL終了となります。ふぅ・・・ かなり簡単に(そして長く)説明しましたが、流れとしてはこんな感じです。 どうしてもXSLは長くなってしまうので、難しげに見えますが、変更する場所はある程度 決まっているので、慣れてしまえばそんなに難しくないと思います。 ちなみに表示させるとこんな感じです。 サンプル XSL (IE5.5以上でないと表示されません・・・) さて。 今回は長くなったのでここまで。 次は・・・もう少し細かく(そして短く・・・)説明する予定です。 あ、そうそう。 XSL内でHTMLタグを使う上で、注意する点があります。 それは「必ず、HTMLタグを終了させること。」 どういう意味かというと、例えば<br>。 これは改行させるためのタグですが、実はこれXSLだとエラーとなります。 なぜかというと、タグがちゃんと終了していないから。 Pタグだと<p>で始まり、</p>で終了しているけど、 <br>だけだと、brタグが終了していないのです。 じゃどうするかというと、 <br /> これでOK。 タグ名の後に/をつけることで、これだけで完結しているよーってことに なります。 後､上でも書いてるけど、HTMLタグは必ず小文字で書くこと。 HTMLタグを使う場合(っていうかHTMLタグ必ず使うけどね)は、そのあたり を気をつけてください。