XMLページをIEで表示させよう(基礎編): リンクを設定しよう

2000年10月29日(日)更新


■サンプルXMLテキストを表示する(7): 歌を表示(リンクの設定をしよう)

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

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

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

さらら: は〜い。<歌 url="http://www・・・・・/mxxxx.html">って感じに書けばいいんでしょ?! で、xslの指定はどうするの? (^ ^;

たけち: じゃあ、いつものようにどんな風にするのかを図に載せておくね。

リンク先の設定

さらら: あらっ。xmlのurl属性には、いちいちurl="http://www・・・・・"って書かないで、xslに一回だけ書いとけばいいのね。。。。ねえねえ、この@urlって、どういうことなの?

たけち: あぁ、「属性」の内容をとってくるときに@って使うんだ。だから、@urlの場合は、urlという名前の属性の内容(ここではm0008.htmlなど)がとってこれるんだね。じゃぁ、今回は、そこのところだけのソースを目立つように下に書いておくね。

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

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

<xsl:apply-templates select="万葉集/巻" />

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

<xsl:template match="万葉集/巻">
<xsl:for-each select="歌">
<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="歌番号" />
</a>
</th>
<th><xsl:value-of select="作者" />の歌</th>
</tr>
<tr>
<td colspan="2">読み: <xsl:value-of select="読み" /></td>
</tr>
<tr>
<td><xsl:value-of select="意味" /></td>
<td>
<img>
<xsl:attribute name="src">
<xsl:value-of select="イメージ" />
</xsl:attribute>
</img>
</td>
</tr>
</table>
</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

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

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

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

さらら: これで、やっとホームページらしくなったわね。

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

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

→XSLの書き方、さらに続きます。。。 (^ ^)v