ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　XML/XSL-Views　xml_xsl_views.htm

XML、XSLの構造、ｿｰｽｻﾝﾌﾟﾙ、ﾌﾞﾗｳｻﾞｰでのﾏﾙﾁﾋﾞｭｰ。　　　　　XML、XSL。　　　　　　ﾃﾞｰﾀなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　Internet Explorer5.x〜 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、multiple_js.htm multiple_vbs.htm　で、絵画の入札（例）、3点。　　ﾃﾞｰﾀは、全て架空値。

　

< ご使用方法 >

・　ﾛｰｶﾙ（=PC）への保存は、xml_xsl/ をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、23個のﾌｧｲﾙを個別に、 [対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。　　　

　・　このDHTMLの実装方法は、*.htm、*.xml、*.xsl  をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1)を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、*.htm、*.xml、*.xsl をﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、(*2)〜 を参考に太字部分の編集を任意に行います。　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x〜 などで開いて。　　　　更新の確認は [F5]ｷｰ を押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.ｈｔｍ、*.xml、*.xsl なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

　･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、MSDN IE8 HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、IE7、IE6、XML、DHTML。

　

　

(*1) ：　auction1.xml （例）　ﾃﾞｰﾀ　　　　　Wordpadなどのﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

　HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

　

<?xml version="1.0" encoding="shift_jis"?>

<AUCTIONBLOCK>

<ITEM>

<TITLE>作品 XX0009</TITLE>

<ARTIST>F A W ｷﾞﾖｰﾑ</ARTIST>

<DIMENSIONS>450x700 mm</DIMENSIONS>

<MATERIALS>油絵</MATERIALS>

<YEAR>2010</YEAR>

<DESCRIPTION>Still Life</DESCRIPTION>

<PREVIEW-SMALL src="burl-s.jpg" width="300" height="194" alt="作品 XX0009"/>

<BIDS>

<BID>

<PRICE>6000</PRICE>

<TIME>3:02:22 PM</TIME>

<BIDDER>安室 奈美恵</BIDDER>

<TIMESTAMP>1317</TIMESTAMP>

</BID>

====　この間、説明を省略。　　====

<TIMESTAMP>1317</TIMESTAMP>

</ITEM>

</AUCTIONBLOCK>

　

　

(*2) ：　controls_js.htm （例）　左ﾌﾚｰﾑ - ﾒﾆｭｰ　　　　　　　Wordpadなどのﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

　HTMLの編集方法　  (*2) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>サンプルページ　　　XML/XSL-Views</title>

<STYLE>

====　この間、説明を省略。　　====

</STYLE>

</head>

<SCRIPT>

====　この間、説明を省略。　　====

{

if (!viewingSrc)

{

changeXML(styleURL);

changeXSL("raw-xml.xsl");

viewingSrc = true;

}

}

</SCRIPT>

<SCRIPT>

// ----- Scripts to activate buttons ------

====　この間、説明を省略。　　====

changeXML("auction1.xml");

changeXSL("raw-xml.xsl");

}

</SCRIPT>

<body bgcolor="#F4EEFB" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->

<DIV CLASS="headline"><b>XML/XSL 構造一覧</b></DIV>

<DIV CLASS="instructions">

<B>XML ﾃﾞｰﾀﾌｧｲﾙ、XSL ｽﾀｲﾙｼｰﾄ</B>

　　　<br>　<br>

</DIV>

<DIV CLASS="group"><b>XML ﾃﾞｰﾀﾌｧｲﾙ</b><DIV CLASS="button" ID="first-XML-item"

onMouseOver="over(this)"

onMouseOut="out(this)"

onClick='changeXML("auction1.xml"); select("xml",this)'>

auction1.xml<SPAN CLASS="arrow">4</SPAN>

</DIV>

<DIV CLASS="button"

onMouseOver="over(this)"

onMouseOut="out(this)"

onClick='changeXML("auction2.xml"); select("xml",this)'>

auction2.xml<SPAN CLASS="arrow">4</SPAN>

</DIV>

<DIV CLASS="button"

onMouseOver="over(this)"

onMouseOut="out(this)"

onClick='changeXML("auction3.xml"); select("xml",this)'>

auction3.xml<SPAN CLASS="arrow">4</SPAN>

</DIV>

</DIV>

<p>　</p>

<DIV CLASS="instructions">

XMLﾃﾞｰﾀを MSXML Parser で表示。

</DIV>

<DIV CLASS="group"><b>XSL ｽﾀｲﾙｼｰﾄ</b><DIV CLASS="button" ID="first-XSL-item"

onMouseOver="over(this)"

onMouseOut="out(this)"

onClick='changeXSL("raw-xml.xsl"); select("xsl",this)'>

XMLｿｰｽ: 　raw-xml.xsl<SPAN CLASS="arrow">4</SPAN>

</DIV>

<DIV CLASS="button"

onMouseOver="over(this)"

onMouseOut="out(this)"

onClick='changeXSL("bids-table.xsl"); select("xsl",this)'>

基本1: 　bids-table.xsl<SPAN CLASS="arrow">4</SPAN>

</DIV>

====　この間、説明を省略。　　====

onMouseOver="over(this)"

onMouseOut="out(this)"

onClick='viewXSL(); select("xml",this)'>

view xsl stylesheet<SPAN CLASS="arrow">4</SPAN>

</DIV>

</DIV>

<p>　</p>

<p>　</p>

<P><HR><font color="black" face="ms sans serif" size="1">&copy;<a href="http://www./……/xxx.html" target="_blank">&nbsp;&nbsp;hogehoge&nbsp;&nbsp;&nbsp;All rights reserved.</a></font>

</body>

</html>

　

　

(*3) ：　multiple_js.htm （例）　ﾌﾚｰﾑ　　　　　　　Wordpadなどのﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

　HTMLの編集方法　  (*3) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

　

<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->

<HTML>

<HEAD>

<TITLE>XML/XSL Viewer Demo</TITLE>

</HEAD>

<SCRIPT FOR="window" EVENT="onload">

controls.init();

</SCRIPT>

<FRAMESET COLS="200,*" FRAMEBORDER="0" BORDER="no" FRAMESPACING="0">

<FRAME ID="controls" SRC="controls_js.htm" SCROLLING="no">

<FRAME ID="results" SRC="results_js.htm">

</FRAMESET>

</HTML>

　

　

(*4) ：　results_js.htm （例）　右ﾌﾚｰﾑ　　　　　　　Wordpadなどのﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

　HTMLの編集方法　  (*4) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

　

<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->

<HTML>

<SCRIPT>

====　この間、説明を省略。　　====

</SCRIPT>

<body bgcolor="#F4EEFB" link="#54006C" vlink="#62000D" alink="#00FFFF">

<DIV id="xslresult">

<!-- resulting HTML will be inserted here -->

</DIV>

<DIV id="xsldebug">

<!-- resulting HTML source will be inserted here -->

</DIV>

<p>　</p>

<p>　</p>

<p>　</p>

<HR>

<font color="black" face="ms sans serif" size="1">&copy;<a href="http://www./……/xxx.html" target="_blank">&nbsp;&nbsp;hogehoge&nbsp;&nbsp;&nbsp;All rights reserved.</a></font>

</body>

</html>

　

　

(*5) ：　bids-table.xsl （例）　　　　　　　　Wordpadなどのﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

　HTMLの編集方法　  (*5) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

　

<?xml version="1.0" encoding="shift_jis"?>

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

<xsl:template match="/">

====　この間、説明を省略。　　====

</xsl:template>

</xsl:stylesheet>

　

　

(*6) ：　summary.xsl （例）　　　　　　　　Wordpadなどのﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

　HTMLの編集方法　  (*6) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

　

<?xml version="1.0" encoding="shift_jis"?>

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

<xsl:template match="/">

====　この間、説明を省略。　　====

<xsl:attribute name="src"><xsl:value-of select="PREVIEW-SMALL/@src"/></xsl:attribute>

<xsl:attribute name="width"><xsl:value-of select="PREVIEW-SMALL/@width"/></xsl:attribute>

<xsl:attribute name="height"><xsl:value-of select="PREVIEW-SMALL/@height"/></xsl:attribute>

<xsl:attribute name="alt"><xsl:value-of select="PREVIEW-SMALL/@alt"/></xsl:attribute>

</IMG>

</TD>

====　この間、説明を省略。　　====

</DIV>

</TD>

</TR>

</TABLE>

</xsl:for-each>

</DIV>

</xsl:template>

</xsl:stylesheet>

　

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。