XMLページをIEで表示させよう(基礎編): XSLを書きましょう

2001年3月25日(日)更新

注) このページのサンプルを実行する前に msxml3.0のインストール を行ってくださいね。


■サンプルXMLテキストを表示する(3): 歌の読みだけを表示(xsl:templateで変換ルールを指定)

たけち: 前回は、ほんとうにとりあえずって感じですべてのテキストを表示させたけど、み〜んなつながっちゃって面白くなかったよね。今回は、XMLサンプルテキスト中の、すべての歌の「読み」だけを表示させてみよう。

さらら: あら、そこだけ表示、なんてことできるの?

たけち: うん。というか、表示したいテキストをそれぞれ細かく指定する必要があるんだよ。

さらら: ふ〜ん。まだちょっとわかんないわ。

たけち: じゃっ、じゃあともかく"XMLサンプルテキスト中のすべての歌の「読み」だけを表示"ということは何をするのかってことを図に示しておくね。今回も、まだ簡単のために、<p>タグと</p>タグで囲んで歌の読みをそれぞれひとつの段落として表示するようにするね。

それぞれの歌の「読み」を表示

さらら: あ、雰囲気はとっとも良くわかるわ。「歌」から「歌」への緑色の矢印は、全部の「歌」を見ていく、って意味なのよね。そうでしょ。

たけち: そう、そうなんだ。よかった。分かってもらえて・・・・じゃあ、このようにするためのXSLの指定を次に載せるね。そのXSLのリストに基づいて、どんな風に変換できるかを説明するね。

さらら: は〜い。

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>XSLサンプル : xsl:template;/title>
</head>
<body>
<p align="center">万葉集第1巻抜粋: 歌の読みを表示(1)</p>
<xsl:apply-templates select="manyosyu/volume" />
</body>
</html>
</xsl:template>

<xsl:template match="volume/poem">
<p><xsl:value-of select="yomi" /></p>
</xsl:template>

</xsl:stylesheet>

全ての歌の読み(yomi)を表示するXSLのはたらき

さらら-2: 最初にある <xsl:template match="/"> は、XSLの始まりって思っていいのよね。

たけち-1: そうだね。ここではそう思っていいよ。ここで重要なのはたらきをしているのは、

  • <xsl:apply-templates select="manyosyu/volume" />
  • <xsl:template match="volume/poem">
の二つだよ。

さらら-2: へぇ〜。どんなはたらきをしているの? なんとなくペアになっている感じがするけど・・・

たけち-1: そうそう。<xsl:apply-templates select="manyosyu/volume" />は、「ここに、"manyosyu/volume"より下の部分についてのテンプレートルールを適用(apply)するのでよろしくね。」っていう意味なんだ。

さらら-2: ふぅ〜ん。「よろしくね。」って、「msxmlさん、よろしくねっ」って意味なんでしょ。テンプレートルールって、なぁに?

たけち-1: テンプレートルールは、元のXMLテキストのどのタグや属性が在ったときに、どんな変換をするのかを指定するものなんだ。ここでは、<xsl:template match="volume/poem">というところで次のような指定をしているんだ。

<xsl:template match="volume/poem">
元のXMLテキストの中に"volume/poem"が見つかったら、以下の文(ここでは<xsl:value-of select="yomi" /></p>だけですね)で指定されているルールを実行してください。
<xsl:value-of select="yomi" /></p>
元のXMLテキストの中の"volume/poem"の下の"yomi"のテキストをとってきてください。

さらら-5: なるほど、そうなんだぁ〜。そうやって、"yomi"のテキストがhtmlの中に<p>熟田津(にきたつ)に、・・・・・<p>って入るのね。でも、「すべての"yomi"」ってどうやって指定しているの?

たけち-1: あっ、それはね。msxmlが「元のXMLテキスト内のすべての"volume/poem"の下の"yomi"」を探して処理してくれているんだよ。

さらら-7: あっ、そうなんだぁ〜!! これでおおまかな流れについては分かったような気がするわ... (^ ^; ともかく、前回のは、ぜ〜んぶのテキストが表示されたけど、今回のXSL指定だと、「歌の読み」だけが表示されるのよね。

たけち-1: そうなんだ。それがわかってもらえたら十分だよ。じゃあ、このXSLテキストを"sample-2.xsl"というファイルにして、実際にどうなるか見てみようね。次のテキストをクリックしてみて。あっ、そうそう。前回のXMLテキストと同じように、2行目は
<?xml-stylesheet type="text/xsl" href="sample-2.xsl"?>
として、"sample-2.xml"というファイルを前回とは別に作成しているからね。

万葉集第1巻抜粋のXMLファイル sample-2.xml(上記説明のXSL適用)

こんな風に表示されます・・・

さらら: あっ、出た出た!! だいたい想像していたとおりだわ!! なんだかうれしい。

たけち: よかった〜。

さらら: ねぇねぇ、たけちぃ〜。すこし面白くなってきたから、もっとかっこいい表示をしましょうよ〜。原文とか、イメージも入れたりして!!

たけち: そうだね。じゃあ、tableで、原文とか、イメージとかも表示してみようか。

さらら: わ〜い!! (*^ ^*)

次回をおたのしみに。。。。。 (^ ^)v