XMLページをIEで表示させよう(基礎編): mode属性を使った例
簡単な目録を表示する

2003年8月31日(日)更新

■簡単な目録を表示する

たけち: これまでの学習で、とりあえず万葉集の歌とイメージを表形式で表示することが出来たね｡

さらら: えぇ。思っていたよりもきれいに表示できるものなのね｡

たけち: 今回はその表示の前に､表示している万葉歌の簡単な目録を表示させてみようと思うんだ。

さらら: あっ、そうね。たくさんの歌があったときには便利だわね｡

たけち: そうだね。じゃあ、まずはごく簡単に、次のようにしてみよう。元のXMLデータも再確認しておこうね｡

先頭に簡単な目録を表示しましょう

※XMLデータ例: 万葉集第1巻抜粋

<?xml version="1.0" encoding="Shift_JIS" ?>
<manyosyu>
<volume no="1">

<poem>
    <pno>8</pno>
    <mkana>熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜</mkana>
    <poet>額田王(ぬかたのおおきみ)</poet>
    <yomi>熟田津(にきたつ)に、船(ふな)乗りせむと、月待てば、潮もかなひぬ、今は漕(こ)ぎ出(い)でな</yomi>
    <image>image/m0008.jpg</image>
    <mean>熟田津(にきたつ)で、船を出そうと月を待っていると、いよいよ潮の流れも良くなってきた。さあ、いまこそ船出するのです。</mean>
</poem>

<poem>
    <pno>20</pno>
    <mkana>茜草指 武良前野逝 標野行 野守者不見哉 君之袖布流</mkana>
    <poet>額田王(ぬかたのおおきみ)</poet>
    <yomi>茜(あかね)さす、紫野行き標野(しめの)行き、野守(のもり)は見ずや、君が袖振る</yomi>
    <image>image/m0020.jpg</image>
    <mean>（茜色の光に満ちている）紫野、天智天皇御領地の野で、あぁ、あなたはそんなに袖を振ってらして、野守が見るかもしれませんよ。
    </mean>
</poem>

<poem>
    <pno>23</pno>
    <mkana>打麻乎 麻續王 白水郎有哉 射等篭荷四間乃 珠藻苅麻須</mkana>
    <poet>作者不明</poet>
    <yomi>打ち麻(そ)を、麻続(をみの)の王(おほきみ)、海人(あま)なれや、伊良虞(いらご)の島の、玉藻(たまも)刈ります</yomi>
    <image>image/m0023.jpg</image>
    <mean>麻続(をみの)の王(おほきみ)さまは海人(あま)なのでしょうか、(いいえ、そうではいらっしゃらないのに、)伊良虞の島の藻をとっていらっしゃる・・・・・ </mean>
</poem>

<poem>
    <pno>24</pno>
    <mkana>空蝉之 命乎惜美 浪尓所濕 伊良虞能嶋之 玉藻苅食</mkana>
    <poet>作者不明</poet>
    <yomi>うつせみの、命を惜しみ、波に濡れ、伊良虞(いらご)の島の、玉藻(たまも)刈(か)り食(は)む</yomi>
    <image>image/m0024.jpg</image>
    <mean>命惜しさに、波に濡れながら、伊良虞(いらご)の島の藻をとって食べるのです・・・
麻続(をみの)の王(おほきみ)が伊良虞の島に流された時、島の人がこれを哀しんで詠んだ歌を聞いて詠んだ歌ということです。 </mean>
</poem>

<poem>
    <pno>28</pno>
    <mkana>春過而 夏来良之 白妙能 衣乾有 天之香来山</mkana>
    <poet>持統天皇(じとうてんのう)</poet>
    <yomi>春過ぎて 夏来たるらし 白妙(しろたえ)の 衣干したり 天(あめ)の香具山(かぐやま)</yomi>
    <image>image/m0028.jpg</image>
    <mean>春が過ぎて、夏が来たらしい。白妙(しろたえ)の衣が香久山(かぐやま)の方に見える。 </mean>
    </poem>
<poem>
    <pno>37</pno>
    <mkana>雖見飽奴 吉野乃河之 常滑乃 絶事無久 復還見牟</mkana>
    <poet>柿本人麻呂(かきのもとのひとまろ)</poet>
    <yomi>見れど飽かぬ、吉野の川の、常滑(とこなめ)の、絶ゆることなく、またかへり見む</yomi>
    <image>image/m0037.jpg</image>
    <mean>何度見ても飽きることの無い吉野の川の常滑(とこなめ)のように、絶えること無く何度も何度も見にきましょう。</mean>
</poem>

</volume>
</manyosyu>

たけち: このように表示するにはどうしたらいいと思う?

さらら: う〜ん、と。。。。poem要素ノードに適用するテンプレートを作って、poem要素ノードの子ノードpno要素の内容をとってくればいいのよね。

たけち: 考え方はそうだけどね。ちょっと作ってみて。

さらら: こんな感じかしらね｡

■poem要素ノードに対するテンプレートを追加してみます

※XSLTスタイルシート例: 簡単な目録付き???(by さらら)

<?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>たのしいXML: XSLTスタイルシート例(簡単な目録付きで表示)</title>
  <link rel="stylesheet" type="text/css" href="manyo.css" />
  </head>

  <body>
  <p align="center"><font color="navy">万葉集第1巻抜粋: 簡単な目録をつけて表示</font></p>

  <table border="0" width="360" align="center">
    <tr>
    <td colspan="2">※ここでは、以下の番号の歌を紹介します｡</td>
    </tr>
    <tr>
    <td width="20%">歌番号: </td>
    <td><font color="green">
      <xsl:apply-templates />
    </font></td>
    </tr>
  </table>
  <xsl:apply-templates />

  </body>
  </html>
</xsl:template>


<xsl:template match="poem" >
    <xsl:value-of select="pno" />
</xsl:template>

<xsl:template match="poem">
<table border="0" width="500" align="center">
    <tr>
      <th width="60%">歌番号: <xsl:value-of select="pno" /></th>
      <th><xsl:value-of select="poet" />の歌</th>
    </tr>
    <tr>
      <td colspan="2">原文: <xsl:value-of select="mkana" /></td>
    </tr>
    <tr>
      <td colspan="2">読み: <xsl:value-of select="yomi" /></td>
    </tr>
    <tr>
      <td><xsl:value-of select="mean" /></td>
      <td>
        <img>
            <xsl:attribute name="src">
            <xsl:value-of select="image" />
            </xsl:attribute>
            </img>
      </td>
    </tr>
</table>
</xsl:template>

</xsl:stylesheet>

たけち: 雰囲気はいい感じだねぇ〜。

さらら: あら。なっ、なに。その言い方・・・(^ ^;

たけち: じゃあ、試しに表示してみようか。

さらら: えぇ。画面を見てみましょう｡

さららの作ったスタイルシートで表示

さらら: あっ、あれ〜・・・ (^ ^;　歌番号が表示されないわ。どうして?

たけち: うん。上のXSLTスタイルシートをよく見てご覧｡
<xsl:template match="poem">
が二つあるよね。こんなときには、後に出てくるテンプレートが使われるんだね｡

さらら: あっ、そうなんだ。。。そう言われれば､どっちをつかっていいのか分かんないわね｡

でも、
  <xsl:apply-templates />
は二つかいてあるんだけど、これはどうなのかしら。

たけち: 表示されたものをよ〜く見てご覧。下にスクロールすると同じものがもうひとつ出てくるよ｡

同じものが二つ表示されています

■mode属性

さらら: あっ。ほんとだ。・・・ (^ ^;　じゃあ、こんなときはどうしたらいいの?

たけち: こんなときは、mode属性を使って､適用するテンプレートを選ぶんだ。

さらら: mode属性?

たけち: xsl:apply-templates要素とxsl:template要素で、同じ値を持つmode属性を書くんだ。
そうすると､xsl:apply-templatesが使われているときに、そこに適用されるテンプレートは、同じ値のテンプレート(xsl:template)から選択されるんだよ。

さらら: そうなんだ。

mode属性で適用対象となるテンプレートを選ぶ

■mode属性を使ったXSLTスタイルシート

たけち: じゃあ。さららの作ってくれたXSLTスタイルシートをmode属性を使ったものに変更してみよう｡ちょっとの違いだから分かるよね｡

※XSLTスタイルシート例: 簡単な目録付きで万葉歌を表示

<?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>たのしいXML: XSLTスタイルシート例(簡単な目録付きで表示)</title>
  <link rel="stylesheet" type="text/css" href="manyo.css" />
  </head>

  <body>
  <p align="center"><font color="navy">万葉集第1巻抜粋: 簡単な目録をつけて表示</font></p>

  <table border="0" width="360" align="center">
    <tr>
    <td colspan="2">※ここでは、以下の番号の歌を紹介します｡</td>
    </tr>
    <tr>
    <td width="20%">歌番号: </td>
    <td><font color="green">
      <xsl:apply-templates mode="index" />
    </font></td>
    </tr>
  </table>
  <xsl:apply-templates />

  </body>
  </html>
</xsl:template>


<xsl:template match="poem" mode="index">
    <xsl:value-of select="pno" />
    <xsl:if test="not(position()=last())">, </xsl:if>
</xsl:template>

<xsl:template match="poem">
<table border="0" width="500" align="center">
    <tr>
      <th width="60%">歌番号: <xsl:value-of select="pno" /></th>
      <th><xsl:value-of select="poet" />の歌</th>
    </tr>
    <tr>
      <td colspan="2">原文: <xsl:value-of select="mkana" /></td>
    </tr>
    <tr>
      <td colspan="2">読み: <xsl:value-of select="yomi" /></td>
    </tr>
    <tr>
      <td><xsl:value-of select="mean" /></td>
      <td>
        <img>
            <xsl:attribute name="src">
            <xsl:value-of select="image" />
            </xsl:attribute>
            </img>
      </td>
    </tr>
</table>
</xsl:template>

</xsl:stylesheet>

さらら: なるほどねぇ。こうすると、歌番号だけの簡単な目録を表示するためのテンプレートがちゃんと選ばれるのね｡

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

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

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

さらら: ちゃんと歌番号だけの目録が表示されたわ｡。。ところで
<xsl:template match="poem" mode="index">
    <xsl:value-of select="pno" />
    <xsl:if test="not(position()=last())">, </xsl:if>
</xsl:template>

の
    <xsl:if test="not(position()=last())">, </xsl:if>
って、どういう意味なの??

たけち: あっ、これは、歌番号の間のカンマを作っているんだけど、最後の歌番号にはカンマをつけないようにしているんだ｡詳しくは別のところで説明するね｡

さらら: あっ、はい。

たけち: じゃ。今回はここまでね。

さらら: ありがと。

→次は、xsl:for-eachです。。。(^ ^;