たのしいXML: XMLページをIEで表示させよう(基礎編): step6

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

2001年7月15日(日)更新

■サンプルXMLテキストを表示する(3): 歌の読みだけを表示(for-eachで繰り返し)

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

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

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

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

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

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

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

たけち: そう、そうなんだ。よかった・・・・じゃあ、このようにするためのXSLの指定を次に載せるね。新しい言葉が出てきているから、簡単に説明しておくね。"全部の「歌」を見ていく"、って指定は、あとで説明するけど、for-eachという指定の仕方があるんだ。

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title>たのしいXML: 基本サンプル-2</title>
</head>
<body>
万葉集第1巻抜粋: 歌の読みを表示(1)
<xsl:apply-templates select="万葉集/巻" />
</body>
</html>
</xsl:template>

<xsl:template match="巻">
<xsl:for-each select="歌">
<xsl:value-of select="読み" />
</xsl:for-each>
</xsl:template>

</xsl:stylesheet>

<xsl:apply-templates select="万葉集/巻" />: ここに、"万葉集/巻"より下の部分についての指定をするのでよろしくね。→このXSLでは、"万葉集/巻"より下の部分についての指定は、<xsl:template match="巻">から</xsl:template>までのかたまりですね。
<xsl:template match="巻">: "巻"が見つかったら、</xsl:template>までの指定を処理してください。
<xsl:for-each select="歌">: "歌"のタグが見つかるたびに、</xsl:for-each>までの間に書かれている指定にしたがって処理をしてください。for-eachは、「"select="について繰り返してください」という意味ですね。
<xsl:value-of select="読み" />: (見つかった"歌"のタグの下の)"読み"のタグの内容(テキスト)を「ここ」においてください。→「ここ」は、実際にはタグとタグで囲まれているから、htmlの段落として表示されることになりますね。

さらら: さっきの図と見比べてなんとか分かるような気がするわ。... (^ ^; ともかく、前回のは、ぜ～んぶのテキストが表示されたけど、今回のXSL指定だと、「歌の読み」だけが表示されるのよね。

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

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

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

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

たけち: よかった～。

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

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

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

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

■xs:-for-eachを使わない方法についての説明を追加しました。。。。。 (^ ^)v