第4回 HTMLと絡めて見る
前回でデータの指定方法は大体説明したので(実際はもっと色々あるんですが 普通に使う分には、事足りると思います。普通でない使い方をされる方は、 他を当たって^^;)、今回はHTMLと絡めて、見栄えを良くしてみます。 では今回使うXMLデータです。<?xml version="1.0" encoding="Shift_JIS"?> <?xml-stylesheet type="text/xsl" href="sample05.xsl"?> <diary> <title>日記</title> <form> <date>06/15</date> <subtitle>CD買ってみた</subtitle> <diaryexp> 今日CDを買った。 聞いてみた。 ・・・はずれかもTT </diaryexp> </form> <form> <date>06/16</date> <subtitle>DVD買ってみた</subtitle> <diaryexp> 今日DVDを買った。 見てみた。 良かった〜。 </diaryexp> </form> <form> <date>06/17</date> <subtitle>LP買ってみた</subtitle> <diaryexp> 今日LPを買った。 ごめんなさいネタがつきました・・・ </diaryexp> </form> </diary>
見ての通り、日記のXMLデータです。 これを次の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: <xsl:value-of select="diary/title" /> 09: </title> 10: </head> 11: <body> 12: <h2>Diary</h2> 13: <p> 14: 気まぐれ日記〜 15: </p> 16: <xsl:apply-templates select="diary/form" /> 17: </body> 18: </html> 19:</xsl:template> 20:<xsl:template match="form"> 21: <table border="0" width="300"> 22: <tr> 23: <td width="60" bgcolor="ddeeff"><xsl:value-of select="date" /></td> 24: <td width="240" bgcolor="aaccff"><xsl:value-of select="subtitle" /></td> 25: </tr> 26: <tr> 27: <td colspan="2" bgcolor="f8f8ff"> 28: <pre> 29: <xsl:value-of select="diaryexp" /> 30: </pre> 31: </td> 32: </tr> 33: </table> 34:</xsl:template> 35:</xsl:stylesheet>
えー、前回とほとんど変わりません^^; 16行でformテンプレートを指定しています。 そしてformテンプレート内の、23,24,29行でdateとsubtitle,diaryexpをtdタグ内に差し込んでいます。 HTMLタグについての説明は・・・HTMLクイックリファレンスとかで調べてください^^; ・・・以上です。 これを表示すると次のようになります。 ここの日記にそっくり XSL ちなみにこのXML+XSLの面白いところは、XSLは変更する必要なしで、 どんどんXMLデータの日記を増やしていけるところ。 まぁ当たり前っちゃ当たり前なんだけね。 XMLデータだけ増やした場合は、次のように表示されます。 かなり適当日記 この辺は、ここの説明見るよりも、使ってみたほうが早いと思うので、 色々試してみてください。 さて、微妙に文章が堅くなってきたような気がしないでもないですが。 今回はここまでです。 次回は・・・XSLの便利な機能を説明する予定です。