DHTML SAMPLES NEO2


【xml_table.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>DHTML SAMPLES NEO2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<SCRIPT LANGUAGE="JavaScript">
function loadXml()	{
	source = new ActiveXObject("Microsoft.XMLDOM");
	source.async = false;
	style = new ActiveXObject("Microsoft.XMLDOM");
	style.async = false;
	source.load("xml_table.xml");
	style.load("xml_table1.xsl");
	xslTarget.innerHTML = source.transformNode(style);
}

function chStyle()	{
	var myStyle = form1.select1.options[form1.select1.selectedIndex].value;
	style.load(myStyle);
	xslTarget.innerHTML = source.transformNode(style);
}

</SCRIPT>
</HEAD>
<BODY onload="loadXml()">
<H2>HTMLファイルへのXMLファイル、XSLファイルのロードの基本</H2>
<pre>
使用しているファイルは
xml_table.html(このファイル)
xml_table.xml
xml_table1.xsl
xml_table2.xsl
xml_table3.xsl
xml_table4.xsl
各ファイルのソースはこちらを参照。
</pre>
<HR>
<form name="form1">
<select name="select1" onchange="chStyle()">
<option value="xml_table1.xsl">スタイル1
<option value="xml_table2.xsl">スタイル2
<option value="xml_table3.xsl">スタイル3
<option value="xml_table4.xsl">スタイル4
</select>
</form>
<div id="xslTarget">
</div>

</BODY>
</HTML>

【xml_table.xml】
<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="xml_table.xsl"?>
<リスト>

<アイテム>
<機能>ATOKパレットのスケルトン表示</機能>
<質問>ATOKパレットを透明にする方法を教えてください。</質問>
</アイテム>

<アイテム>
<機能>推測変換</機能>
<質問>入力中にカーソル位置に現れる文字は何ですか？</質問>
</アイテム>

<アイテム>
<機能>記号入力</機能>
<質問>①②などの丸数字の入力方法が分かりません。</質問>
</アイテム>

<アイテム>
<機能>カタカナ語英語辞書</機能>
<質問>カタカナを英単語に変換できますか。</質問>
</アイテム>

<アイテム>
<機能>ら抜き表現の訂正</機能>
<質問>｢見れる｣や｢食べれる｣などのら抜き表現を自動的に訂正することはできますか。</質問>
</アイテム>

<アイテム>
<機能>ATOKパレットの表示</機能>
<質問>ATOKパレットが操作のじゃまになるので消したいのですが。</質問>
</アイテム>

<アイテム>
<機能>手書き文字入力</機能>
<質問>手書きで漢字を検索する機能の使い方を教えてください。</質問>
</アイテム>

<アイテム>
<機能>候補ウィンドウの拡大表示</機能>
<質問>候補ウィンドウの候補が小さくて見づらいのですが。</質問>
</アイテム>

</リスト>

【xml_table1.xsl】
<?xml version="1.0" encoding="Shift_JIS"?>
<div xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:for-each select="リスト/アイテム">
<div style="margin:10;width:60%;border:1 solid gray;padding:10;">
	<div style="font-size:8pt;text-align:right;padding-bottom:10;color:gray;"><xsl:value-of select="機能"/></div>
	<div style="font-size:11pt;"><xsl:value-of select="質問"/></div>
</div>
</xsl:for-each>

</div>

【xml_table2.xsl】
<?xml version="1.0" encoding="Shift_JIS"?>
<div xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<table cellpadding="3" border="3" style="width:80%;font-size:9pt;border-collapse:collapse;">
<xsl:for-each select="リスト/アイテム">
<tr>
<td><xsl:value-of select="機能" /></td>
<td><xsl:value-of select="質問" /></td>
</tr>
</xsl:for-each>
</table>

</div>

【xml_table3.xsl】
<?xml version="1.0" encoding="Shift_JIS"?>
<div xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<table cellpadding="3" border="3" style="width:80%;font-size:9pt;border-collapse:collapse;">
<tr style="background-color:crimson;color:white">
<td>機能</td><td>質問</td>
</tr>
<xsl:for-each select="リスト/アイテム">
<tr>
<td style="background-color:orange;"><xsl:value-of select="機能" /></td>
<td><xsl:value-of select="質問" /></td>
</tr>
</xsl:for-each>
</table>

</div>

【xml_table4.xsl】
<?xml version="1.0" encoding="Shift_JIS"?>

<div xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:for-each select="リスト/アイテム">
<span style="	width:30%;
				border-top:1 solid white;
				border-left:1 solid white;
				border-right:1 solid gray;
				border-bottom:1 solid gray;
				margin:3;padding:5;vertical-align:top;
				background-color:silver;">

	<div style="padding:3;background-color:silver;
				border-top:1 solid white;
				border-left:1 solid white;
				border-right:1 solid gray;
				border-bottom:1 solid gray;
				color:navy;
				font-size:9pt;text-align:right;">
	<xsl:value-of select="機能" />
	</div>

	<div style="font-size:11pt;padding:5;
				border-top:1 solid white;
				border-left:1 solid white;
				border-right:1 solid gray;
				border-bottom:1 solid gray;">
	<xsl:value-of select="質問" />
	</div>
</span>
</xsl:for-each>
</div>

【MEMO】
基本的には、次のようにしてxmlファイルをロードする。

	source = new ActiveXObject("Microsoft.XMLDOM");
	source.async = false;
	source.load("xml_table.xml");

sourceという名のActiveXオブジェクトを作成し、
load()メソッドでxmlファイルをロードする。
asyncプロパティはロードの同期がナントカ……だったような(詳細不明)。
xslファイルも同様に読み込める。
ドキュメントのロード時に実行するloadXml()関数は次のとおり。

	source = new ActiveXObject("Microsoft.XMLDOM");
	source.async = false;
	style = new ActiveXObject("Microsoft.XMLDOM");
	style.async = false;
	source.load("xml_table.xml");
	style.load("xml_table1.xsl");
	xslTarget.innerHTML = source.transformNode(style);

source、styleぞれぞれのオブジェクトにxmlファイル、xslファイルを読み込み

	xslTarget.innerHTML = source.transformNode(style);

によって、sourceオブジェクトに適用するxslファイルを
styleオブジェクト(=xml_table1.xsl)に変更する。
そして、それをinnerHTMLに入れる。
フォームのデータが変化したとき呼び出すchStyle()関数の内容は次のとおり。

	var myStyle = form1.select1.options[form1.select1.selectedIndex].value;
	style.load(myStyle);
	xslTarget.innerHTML = source.transformNode(style);

変数myStyleにはxslファイル(xml_table1.xsl～xml_table4.xsl)が入り、
あとはtransformNode()メソッドでxslファイルを切り替えている。