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

XMLドキュメントをIEで表示(基礎編): リンクの設定

2002年5月12日(日)更新

■XMLドキュメントを表示(7): 歌を表示(リンクの設定)

たけち: きょうは、リンクの設定をやってみよう。これは、<a href="link-address(URI)">を作ればいいね。

さらら: うん。前にやったxsl:attributeでimg要素のsrc属性を生成したと同じようにやればいいんでしょ。。。。。あっ、でも、今の「万葉集第1巻抜粋のXMLファイル」には、リンク先のアドレスが入っていなかったような・・・・

たけち: そうそう。だから、今回は、もとの「万葉集第1巻抜粋のXMLファイル」にもちょっとだけ手を入れるね。それぞれのpoem要素にurl属性を追加して、そこにリンク先のhtmlファイル名を入れておくことにしておいたらどうかな。

さらら: うん。ということはXMLドキュメントは
<poem url="http://www・・・・・/mxxxx.html">
って感じに書けばいいんでしょ?! で、xsltの指定はどうするの? (^ ^;

たけち: そうだね。XMLドキュメントはそれでいこう。で、XSLスタイルシートの方はどんな風にするのかを図に載せておくね。

リンク先の設定

さらら: あっ、そっか。xmlドキュメントのpoem要素のurl属性には、いちいちurl="http://www・・・・・"って書かないで、xslスタイルシートに一回だけ書いとけばいいのね。。。。ねえねえ、この@urlって、どういうことなの?

たけち: あぁ、「属性」の内容をとってくるときに属性名の前に@って書くんだ。だから、@urlの場合は、urlという名前の属性の内容(ここではm0008.htmlなど)がとってこれるんだね。

さらら: なるほどねぇ～。

たけち: じゃぁ、今回は、そこのところだけのソースを目立つように下に書いておくね。

<?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: XSL基本サンプル-5</title>
  <link rel="stylesheet" type="text/css" href="manyo.css" />
  </head>

  <body>
  <p align="center">万葉集第1巻抜粋: リンク先の設定</p>
    <xsl:apply-templates />
  </body>
  </html>
</xsl:template>

<xsl:template match="poem">
<table border="0" width="500" align="center">
<tr>
<th>
  <a>
  <xsl:attribute name="href">
    http://www6.airnet.ne.jp/manyo/main/one/
    <xsl:value-of select="@url" />
  </xsl:attribute>
  歌番号: <xsl:value-of select="pno" />
  </a>
</th>
<th><xsl:value-of select="poet" />の歌</th>
</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テキストを"basic5.xsl"というファイルにして、実際にどうなるか見てみようね。次のテキストをクリックしてみて。あっ、そうそう。いつもと同じように、２行目は
<?xml-stylesheet type="text/xsl" href="link.xsl"?>
として、"link.xml"というファイルを作成しているからね。また、"image"フォルダーを作って、そこに必要なイメージファイルを入れてあるからね。

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

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

さらら: "歌番号:8"などをクリックするとちゃんとそこのページにジャンプするわ。。。。これで、やっとホームページらしくなったわね。

たけち: あっ、そういえばそうだね。じゃぁ、今回はこれでおしまい。

さらら: うん。ありがと。 (*^ ^*)

→次回はxsl:if: 内容によって表示を変えるです。 (^ ^)v