リストボックスやラジオボタンの出し方

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

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

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

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

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

            <?xml-stylesheet type="text/xsl" href="Select.xsl"?>

            <選択肢>

                  <項目>項目１</項目>

                  <項目>項目２</項目>

                  <項目 既定="yes">項目３</項目>

                  <項目>項目４</項目>

                  <項目>項目５</項目>

            </選択肢>

選択肢が格納された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>項目１</option>

              <option>項目２</option>

              <option selected="selected">項目３</option>

              <option>項目４</option>

              <option>項目５</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 フォーラム新着記事

QAフレームワーク：仕様ガイドラインが勧告に昇格 （2005/10/21）
　データベースの急速なXML対応に後押しされてか、9月に入って「XQuery」や「XPath」に関係したドラフトが一気に11本も更新された
XML勧告を記述するXMLspecとは何か （2005/10/12）
　「XML 1.0勧告」はXMLspec DTDで記述され、XSLTによって生成されている。これはXMLが本当に役立っている具体的な証である
文字符号化方式にまつわるジレンマ （2005/9/13）
　文字符号化方式（UTF-8、シフトJISなど）を自動検出するには、ニワトリと卵の関係にあるジレンマを解消する仕組みが必要となる
XMLキー管理仕様（XKMS 2.0）が勧告に昇格 （2005/8/16）
　セキュリティ関連のXML仕様に進展あり。また、日本発の新しいXMLソフトウェアアーキテクチャ「xfy technology」の詳細も紹介する

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日月間

＠IT

注目のテーマ

HTML5＋UX 記事ランキング

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】