XMLでのホームページ作成入門

１　左側にタイトル，右側に本文を表示してみる。　　前回の応用編として，左側にタイトルのみの一覧，右側に本文を表示してみる。　　　　まず，htmlの構成だが，tableタグを使って左右に分け，そこに違うidを指定する。　　tdタグ内のvalign="top"がないと，テーブルの縦の真ん中に表示される。　　ＸＳＬ変換モジュールを２回呼び出すために，functionも少し前と違っているので注意。　　それでonclick内のfunctionも違う。　　　　


  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="xslprocessor.js"></script>
  <script type="text/javascript">
  <!--
  function hidari(){
         xslproc('test2.xml','hidari.xsl','kiji1',0);
  }

  function migi(jmp){
         xslproc('test2.xml','migi.xsl','kiji2',jmp);
  }

  function test(jmp){
         hidari();
         migi(jmp);
  }
  //-->
  </script>
  </head>
  <body>
  <input type="button" onclick="test(1)" value="実行">
  <table border="2">
    <tr>
     <td valign="top">
       <div id="kiji1"></div>
     </td>
     <td valign="top">
       <div id="kiji2"></div>
     </td>
    </tr>
  </table>
  <body>
  <html>

２　ＸＳＬは左側はと右と二つに分けて書くが，左側はＸＳＬその１のＢと同じだ。　　一応書いておくと下のようになる。　　これを，hidari.xslとして保存する。


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

  <xsl:template match="data/bunsho">
     <xsl:value-of select="title"/><br/>
  </xsl:template>

３　右側の本文は，一応，bango="1"だけを表示することにする。　　前回（ＸＳＬその２）の（Ｂ）のtitle部分を削除すると使えるはずだが，うまく動かない。　　試すと分かるが，titleも表示されてしまう。　　　　そこで，次のように若干変更する。　　（前回のものは，たまたまうまく動いているように見えただけ？）　　下のようになり，これをmigi.xslとして保存する。


  <xsl:template match="/">
     <xsl:apply-templates select="data/bunsho[@bango='1']/honbun"/>
  </xsl:template>

  <xsl:template match="honbun">
     <xsl:apply-templates select="ln"/>
  </xsl:template>
　　
  <xsl:template match="ln">
     <xsl:value-of select="."/><br/>
  </xsl:template>

５　実は，これと同じ表示は，こんな面倒なことをしなくとも実現できる。　　htmlを前回のシンプルなままで，前回の（Ｂ）xslにtableタグを付け加えればよい。　　　　なぜ面倒な方法をしているかは次回に明らかになる。　　動的に，右側の本文の表示を変化させるのだ。　　

６　（前回のおまけ）　　前回の（Ｄ）は，本文が１行しか表示しなかった。　　全部表示するには，次のようにapply-templatesを使う。　　　（Ｄ－２）


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

  <xsl:template match="data/bunsho">
    <xsl:if test="@bango='1'">
       <H1 style="color:red;">
         <xsl:value-of select="title"/><br/>
         <xsl:apply-templates select="ln"/>
       </H1>
    </xsl:if>
  </xsl:template>

  <xsl:template match="ln">
     <xsl:value-of select="."/><br/>
  </xsl:template>