XMLページをIEで表示させよう(初級編)

2000年8月20日(日)更新


■XSLを切り替えて表示内容を変えよう(後半)

たけち: ここの例で使うテキストファイルは、manyo.xmlとそれに適用する三つのxslテストファイル(manyo1.xsl, manyo2.xsl, manyo3.xsl)、それにmanyo.cssです。

さらら: まぁ、ずいぶん必要なのね。。。。あっ、三つのxslを切り替えるんだったわね。 (^ ^;

たけち: それを読み込んで、ボタンクリックによって切り替える指定をするんだけど、"読みを表示"ボタンをクリックしたときに、manyo3.xslを読み込んだ"manyo3"を"manyo_xml"に適用して、here.innerHTMLに作る流れを図にしておくね。

さらら: うぅ・・・雰囲気はわかるけど、やっぱり複雑・・・ (;^ ^)A

たけち: そうだねぇ・・・しかたないかな。じゃあ、こういう流れを作り出すhtmlテキストを次に載せておくね。図で説明したとおりだから、あんまり説明はしないけど。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="manyo.css" />
<title>たのしいXML: XMLページをIEで表示させよう(初歩編)</title>

<xml id="manyo_xml" src="manyo.xml"></xml>
<xml id="manyo1" src="manyo1.xsl"></xml>
<xml id="manyo2" src="manyo2.xsl"></xml>
<xml id="manyo3" src="manyo3.xsl"></xml>

<script language="JavaScript">
<!--
	function manyoAll() {
		here.innerHTML = manyo_xml.transformNode(manyo1.documentElement);
	}
	function manyoSub() {
		here.innerHTML = manyo_xml.transformNode(manyo2.documentElement);
	}
	function manyoSummary() {
		here.innerHTML = manyo_xml.transformNode(manyo3.documentElement);
	}
-->
</script>

</head>

<body>
<h3 align="center">XSLを切り替えて表示の仕方を変えよう(IE5.0以上)</h3>

<p align="center">
	<form>
	<input type="button" value="すべて表示" onClick="manyoAll()">
	<input type="button" value="一部を表示" onClick="manyoSub()">
	<input type="button" value="読みを表示" onClick="manyoSummary()">
	</form>
</p>

<div id="here" align="center">manyo.xmlに指定したxslを適用した結果がここに表示されます。</div>

</body>
</html>

たけち: じゃあ、いつものように実際に見てもらえるようにリンクをつくっておくね。ボタンをクリックして楽しんでみて...

万葉集第1巻抜粋のXMLファイルをいろいろなxslで比較してみましょう

さらら: あっ、おもしろ〜い!! ひとつのxmlテキストから、こんな風にいろいろな見せ方ができるのっておもしろいとおもうわ。

たけち: 楽しんでもらえてぼくもうれしいよ。じゃぁ、今回はここまで。

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

※→ 補足: メニューでXSLTを切り替える


注) JavaScriptそのものについてはここでは詳しく説明できませんが、なにとぞご容赦くださいませ。