ＸＭＬ+ＸＳＬ（１）
　
ＸＭＬデータをＸＳＬスタイルシートでＨＴＭＬに変換する（導入）
　

１　ＸＭＬ，ＸＳＬの基礎知識
　次の二つのサイトを読むとほとんど理解できる。印刷して適宜参照すると良い。

　　(1)サンプルで覚えるXSLTプログラミング
　 http://www.atmarkit.co.jp/fxml/tanpatsu/xslt/xslt00.html 

　　(2)XSLTスタイルシート書き方講座
　 http://www.atmarkit.co.jp/fxml/tanpatsu/10xslt/xslt01.html 

２　それでは，(1)の最初に書いてある例を試してみよう。
　　エディタはez-HTMLを使用する。( http://www.w-frontier.com/ )
    ez-HTMLは，無料のすぐれたHTML編集ソフトである。
    
　　ＸＭＬファイルは，test.xmlという名前で
　　ＸＳＬファイルは，test.xslという名前で保存する。
　　
　　xslprocessor.jsを同じフォルダにおく。
　　xslprocessor.jsの内容や呼び出すhtmlファイルのサンプルは下に書いてある。

　　注意：(1)ではshift-jis等のエンコーディングだが，ここでは，すべてUTF-8とする。
　　　　　UTF-8ユニコードでないとスタイルシートがうまく適用できない。

　　ez-HTMLでUTF-8で保存するには，ファイル－文字コードの設定（高度）
　　から，次の３つにチェックする。
　　　・ファイル読み込み時に文字改行コードの自動認識を行う
　　　・UTF-8(BOM付き)で保存する
　　　・改行コードCR-LFで保存(windows)

　　XMLファイルの先頭部分のエンコード宣言を次のようにUTF-8にする。


    <?xml version="1.0" encoding="UTF-8" ?> 



　　XSLファイルの先頭部分のエンコード宣言を次のようにUTF-8にする。（２カ所）


  <?xml version="1.0" encoding="UTF-8"?>
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" encoding="UTF-8"/>



　　エンコードがshift-jisになっていると実行した場合に空白しか表示されないなどのエラーになる。
　　つまり，xml,xslに問題がないのに表示されないときは，ez-HTMLでshift-jisなどになっている場合がある。
　　ez-HTMLの右下に現在のエンコードが表示されているので常に注意しておく。
　　
３　サンプルを作成しておいたので，下のボタンを押すと，表示される。

　　html内のどこに表示するかは，id="kiji"というので指定している。



　　htmlのサンプルは次のようになる。
　　onclick="test('test.xml','test.xsl','kiji',0)"のtest.xmlとtest.xslを該当のファイル名にする。
　　 

  <html>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <head>
  <script src="xslprocessor.js"></script>
  <script type="text/javascript">
  <!--
  function test(xm,xl,loc,jmp){
         xslproc(xm,xl,loc,jmp);
  }
  //-->
  </script>
  </head>
  <body>
  <input type="button" onclick="test('test.xml','test.xsl','kiji',0)" value="実行">
  <div id="kiji"></div>
  <body>
  <html>



　　htmlから呼び出しているxslproc()が入っているxslprocessor.jsは次の内容だ。
　　xslprocessor.jsという名前で保存し，html,xml,xslと同じフォルダにおく。
　　
　　これがxslを使ってxmlをhtmlに変換するコアプログラムで，IEとmozilla,Operaに対応している。
　　内容は難しいが，一度作っておけば，内容を意識しないで使える。
　　

   
function xslproc(myxml,myxsl,myId,jmp) {
  var elem = document.getElementById(myId);
  
  //if (window.ActiveXObject) {
  //IE11ではwindow.ActiveXObjectを用いてIEかどうかの判断ができなくった。
  //そのため以下ではuserAgentで判断しているが，推奨されない方法である
  
  var ua = window.navigator.userAgent.toLowerCase();
  var isIE = (ua.indexOf('msie') >= 0 || ua.indexOf('trident') >= 0);
  
  if (isIE) {
   //for IE
     var xsltie =new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
     xsltie.async = false;
     xsltie.load(myxsl);
     var xmlie = new ActiveXObject("Msxml2.DOMDocument");
     xmlie.async = false;
     xmlie.load(myxml);
     var xslTemp=new ActiveXObject("Msxml2.XSLTemplate");
     xslTemp.stylesheet=xsltie;
     var xslProc=xslTemp.createProcessor();
     xslProc.input=xmlie;
     xslProc.addParameter("jump",jmp);
     try{
        xslProc.transform;
        elem.style.display="";
        elem.innerHTML=xslProc.output;
       }
        catch(e)
       {
         elem.innerHTML=e.description;
       }
   } else if (!document.all) {
    //for mozilla,Opera
     var xml = new Object();
     var xslt = new Object();
     var xhttp = new XMLHttpRequest();
     xhttp.open("GET", myxsl, false);
     xhttp.send(null);
     xslt = xhttp.responseXML;

     xhttp.open("GET", myxml, false);
     xhttp.send(null);
     xml = xhttp.responseXML;

     var processor = new XSLTProcessor();
     processor.importStylesheet(xslt);
     processor.setParameter(null,"jump",jmp);

     var node = processor.transformToFragment(xml,document);
     elem.style.display="";
     elem.innerHTML="";
     for (var i = 0; i < elem.childNodes.length; i++)
         elem.removeChild(elem.childNodes[i]);

     elem.appendChild(node);
   }
   else{
     document.innerHTML="Sorry your browser can not show contents";
   }
}



　　test.xmlは次のとおり。最初のサンプルとしては複雑だが，



  <?xml version="1.0" encoding="UTF-8"?>
  <PAGE>
   <EMPLOYEES>
    <EMPLOYEE>
      <EMPNO>1</EMPNO> 
      <ENAME>佐野力</ENAME> 
      <JOB>President</JOB> 
      <HIREDATE>1990-04-01</HIREDATE> 
      <SAL>10000</SAL> 
      <DEPTNO>10</DEPTNO> 
    </EMPLOYEE>
    <EMPLOYEE>
      <EMPNO>50</EMPNO> 
      <ENAME>高橋敦子</ENAME> 
      <JOB>Director</JOB> 
      <MGR>1</MGR> 
      <HIREDATE>1991-04-01</HIREDATE> 
      <SAL>6000</SAL> 
      <DEPTNO>30</DEPTNO> 
    </EMPLOYEE>
    <EMPLOYEE>
      <EMPNO>1401</EMPNO> 
      <ENAME>小山尚彦</ENAME> 
      <JOB>Analyst</JOB> 
      <MGR>50</MGR> 
      <HIREDATE>1999-09-01</HIREDATE> 
      <SAL>3000</SAL> 
      <DEPTNO>30</DEPTNO> 
    </EMPLOYEE>
  </EMPLOYEES>
</PAGE>



　　test.xslは次のとおり。



<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>

 <xsl:template match="/">
    <xsl:apply-templates/>
  </xsl:template> 

  <xsl:template match="PAGE">
    <HTML>
    <BODY>
    <xsl:apply-templates/>
    </BODY>
    </HTML>
  </xsl:template> 

  <xsl:template match="EMPLOYEES">
    <xsl:apply-templates/> 
  </xsl:template> 

  <xsl:template match="EMPLOYEE">
    <xsl:value-of select="ENAME"/><BR/>
  </xsl:template> 

</xsl:stylesheet>



　　これは，(1)のサンプルのままなので，<HTML>や<BODY>が入っている。
　　このままでも動くが，不要ではある。
　
次のお勉強
　
inserted by FC2 system