リストボックスやラジオボタンの出し方
XML文書をXSLTで変換して、HTMLのリストボックスを出す例を教えてください。同様に、ラジオボタンの例も教えていただけると助かります。

回答/富士ソフトABC株式会社 技術センター
2002/1/18

 XSLTスタイルシートを用いて、XML文書をHTMLに変換したときに、図のようにリストボックスやラジオボタンとして出力する例を説明しましょう。

 最初に、リストボックスとラジオボタンの選択肢となるデータを格納するXML文書を考えてみます。分かりやすいように「選択肢」要素内に「項目」要素が列挙されただけの簡単な構成とします。それぞれの「項目」要素の内容が、リストボックスとラジオボタンの選択肢となるわけです。「項目」要素の「既定」属性で、表示時に選択されている規定値を設定することにします。

<?xml version="1.0" encoding="shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="Select.xsl"?>
<選択肢>
      <項目>項目1</項目>
      <項目>項目2</項目>
      <項目 既定="yes">項目3</項目>
      <項目>項目4</項目>
      <項目>項目5</項目>
</選択肢>
選択肢が格納されたXML文書 (Select.xml)

 作成するXSLTスクリプトのアウトラインは、次のようになります。

 1: <?xml version="1.0" encoding="shift_JIS" ?>
 2: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
 3:    <xsl:output indent="yes" method="html" encoding="shift_JIS"/>
 4:
 5:    <xsl:template match="/">
 6:     <html>
 7:      <title>ListBox and Radio Button</title>
 8:      <body>
 9:       <xsl:apply-templates/>
10:      </body>
11:     </html>
12:    </xsl:template>
13:
14:    <xsl:template match="選択肢">
15:     <!-- リストボックスの処理 -->
16:     <!-- ラジオボタンの処理 -->
17:    </xsl:template>
18:
19: </xsl:stylesheet>

 最初にルートノードのマッチ(5行目)で、HTML文書のアウトラインを形成してしまいます。要素の内容は、xsl:apply-templatesエレメント(9行目)により外部で指定することを宣言しています。

 実際のリストボックスとラジオボタンの生成処理は、14行目の「選択肢」ノードのテンプレートで処理します。

 まず、リストボックスの生成処理について見てみます。

 1: <select name="listbox" size="4">
 2:   <xsl:for-each select="項目">
 3:    <option>
 4:     <xsl:if test="@既定[.='yes']">
 5:      <xsl:attribute name="selected">selected</xsl:attribute>
 6:     </xsl:if>
 7:     <xsl:value-of select="."/>
 8:    </option>
 9:   </xsl:for-each>
10: </select>

 各行を詳しく見てみます。

1行目: リストボックス<select name="ListBox">を宣言しています
2行目: 「項目」要素が存在する間の繰り返しを示しています。こうすることで、Select.xml の「項目」要素がすべて処理されます
3行目: リストボックスの選択肢<option>の宣言をしています
4行目: 「項目」要素の「既定」属性が「yes」か否かの判断をしています。「既定」属性が「yes」であれば5行目が処理され、「yes」でなければ5行目は処理されません
5行目: <option>のselected属性を設定しています
7行目: 「項目」要素の内容を<option>の内容として記述しています

 すると、変換結果としてのHTMLは、以下のような内容が出力されます。

<select name="listbox" size="4">
  <option>項目1</option>
  <option>項目2</option>
  <option selected="selected">項目3</option>
  <option>項目4</option>
  <option>項目5</option>
</select>

 ラジオボタンの生成処理に関しても、生成する対象がリストボックスかラジオボタンかの相違はありますがほぼ同様に記述できます。

1: <xsl:for-each select="項目">
2:   <input type="radio" name="Radio">
3:    <xsl:if test="@既定[.='yes']">
4:     <xsl:attribute name="checked">checked</xsl:attribute>
5:    </xsl:if>
6:    <xsl:value-of select="."/>
7:   </input>
8: </xsl:for-each>

 基本的な記述方法を説明しましたが、最初の図で示した出力結果を得るための完全な形のSelect.xsl を示しておきます。

 上記の説明以外にラジオボタンの生成処理では、アクセスキーの設定やラベルの使用などを盛り込んであります。また、xsl:paramエレメントやxsl:variableエレメントの使用例としても参考にしてください。

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

    <xsl:template match="/">
      <html>
         <title>ListBox and Radio Button</title>
         <body>
           <xsl:apply-templates/>
         </body>
       </html>
    </xsl:template>


    <xsl:template match="選択肢">
<!-- 出力する文字をパラメータにセットします -->
        <xsl:param name="Lp" select="string(' (')"/>
        <xsl:param name="Rp" select="string(')')"/>
        <xsl:param name="Rb" select="string('radio')"/>

<!-- リストボックスの例 -->
        <hr/>
        <h1>リストボックス</h1>
        <xsl:comment>リストボックスの出力例です</xsl:comment>
        <select name="listbox" size="4">
            <xsl:for-each select="項目">
               <option>
<!-- 規定値(selected)とするか否かのチェック -->
                  <xsl:if test="@既定[.='yes']">
                  <xsl:attribute name="selected">selected</xsl:attribute>
                  </xsl:if>
                  <xsl:value-of select="."/>
               </option>
            </xsl:for-each>
        </select>


<!-- ラジオボタンの例 -->
        <hr/>
        <h1>ラジオボタン</h1>
        <xsl:comment>ラジオボタンの出力例です</xsl:comment>
        <fieldset>
          <legend>選択してください</legend>
           <xsl:for-each select="項目">
<!-- 現在のコンテキストの位置を変数に代入する -->
              <xsl:variable name="Rpos" select="position()"/>
<!-- ラベルとの関連付けに使用する文字列を変数に代入する -->
              <xsl:variable name="Rname" select="concat($Rb,$Rpos)"/>
              <input type="radio" name="Radio">
<!-- アクセスキーの設定 -->
                <xsl:attribute name="accesskey">
                   <xsl:value-of select="$Rpos"/>
                </xsl:attribute>
                <xsl:attribute name="id">
                   <xsl:value-of select="$Rname"/>
                </xsl:attribute>
<!-- 規定値(checked)とするか否かのチェック -->
                <xsl:if test="@既定[.='yes']">
                   <xsl:attribute name="checked">checked</xsl:attribute>
                </xsl:if>
<!-- ラベルの設定 -->
                <label>
                   <xsl:attribute name="for">
                     <xsl:value-of select="$Rname"/>
                   </xsl:attribute>
                   <xsl:value-of select="."/>
                   <xsl:value-of select="$Lp"/>
                   <u><xsl:value-of select="$Rpos"/></u>
                   <xsl:value-of select="$Rp"/>
                </label>
              </input>
           <br />
        </xsl:for-each>
     </fieldset>
    </xsl:template>

</xsl:stylesheet>
リストボックスとラジオボタンを表示するXSLの例 (Select.xsl)

 

「Ask XML Expert」


XML & SOA フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日月間