XMLサーバ／Cocoon自由自在！　第3回　XML文書をiモードとPalmに対応させる

XMLサーバ／Cocoon自由自在！
第3回　XML文書をiモードとPalmに対応させる

注文リストをiモード用とPalm用に変換してみる

　それではもう少し複雑な例として、前回の注文リストを取り上げたいと思います（リスト8）。

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

            <order> 

            

              <item>

                <product>

                  <code>X-200-001</code>

                  <name>万能耳掻き</name>

                  <price currency="YEN">300</price>

                </product>

                <quantity>1000</quantity>

              </item> 

            

              <item>

                <product>

                  <code>X-201-002</code>

                  <name>鍼灸サンダル</name>

                  <price currency="YEN">1200</price>

                </product>

                <quantity>500</quantity>

              </item>

            

              <item>

                <product>

                  <code>X-200-005</code>

                  <name>爪切りセット</name>

                  <price currency="YEN">1200</price>

                </product>

                <quantity>2000</quantity>

              </item> 

            

            </order>

リスト8　order.xml

　先ほどCocoonでXiinoをサポートするようにcocoon.propertiesを編集したわけですから、今回はXiino用とiモード用に出力を用意してみることにしましょう。

■Palm用に変換された注文リスト

　まず、Xiinoの出力ですが、こちらはリスト9のようになります。

<html> 

            

              <head>

                <title>注文票</title>

                <meta http-equiv="Content-Type" 
            content="text/html; charset=Shift_JIS">

              </head> 

            

              <body>

                <h1>注文票（Xiino）</h1>

                <table border="1">

                  <tr>

                    <th>商品コード</th>

                    <th>商品名</th>

                    <th>単価</th>

                    <th>数量</th>

                  </tr>

                  <tr>

                    <td>X-200-001</td>

                    <td>万能耳掻き</td>

                    <td align="right">300</td>

                    <td align="right">1000</td>

                  </tr>

                  <tr>

                    <td>X-201-002</td>

                    <td>鍼灸サンダル</td>

                    <td align="right">1200</td>

                    <td align="right">500</td>

                  </tr>

                  <tr>

                    <td>X-200-005</td>

                    <td>爪切りセット</td>

                    <td align="right">1200</td>

                    <td align="right">2000</td>

                  </tr>

                </table>

              </body> 

            

            </html>

リスト9　Xiino用の出力

　見てお分かりになるように、前回作成したスタイルシートの出力とほぼ同じ形になっています。

■iモード用に変換された注文リスト

　一方、iモード用の出力ですが、こちらはリスト10のようになります。

<html> 

              <head>

                <title>注文票</title>

                <meta http-equiv="Content-Type" 
            content="text/html; charset=Shift_JIS">

              </head> 

            

              <body>

                注文票<br>

                <hr>

                X-200-001 - 1000<br>

                X-201-002 - 500<br>

                X-200-005 - 2000<br>

              </body> 

            

            </html>

リスト10　iモード用の出力

　注意していただきたいのは、表示する情報の内容がXiinoと比べて少なくなっている点です。Xiino用の出力では、商品コード、商品名、単価および個数をすべて出力していました。iモード用の画面は、これらの情報をすべて表示するには少し狭すぎますから、商品コードおよび個数という、最低限の情報だけ出力しているのです。

　この例を見ても分かるように、元は同じ情報でもまるっきり同じように出力する必要はありません。出力を切り替えるとは、カラーやレイアウトといったデザインの要素だけが対象ではないのです。アクセスしてくるデバイスおよびその用途に応じて情報の編集の仕方も考慮してやる必要があります。

　スタイルシートはそれぞれ、リスト11およびリスト12のようになります。

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

            

            <xsl:stylesheet

            xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

            version="1.0"> 

            

            …… 

            

                <body>

                  <h1>注文票（Xiino）</h1>

                  <table border="1">

                    <tr>

                      <th>商品コード</th>

                      <th>商品名</th>

                      <th>単価</th>

                      <th>数量</th>

                    </tr>

                      <xsl:for-each 
            select="/order/item">

                        <tr>

                          <td>

                            <xsl:value-of 
            select="product/code" />

                          </td>

                          <td>

                            <xsl:value-of 
            select="product/name" />

                           
            </td>

                          <td 
            align="right">

                             
            <xsl:value-of select="product/price" />

                           
            </td>

                          <td 
            align="right">

                            <xsl:value-of 
            select="quantity" />

                           
            </td>

                        </tr>

                      </xsl:for-each>

                    </table>

                  </body> 

            

                </html>

              </xsl:template> 

            

            </xsl:stylesheet>

リスト11　Xiino用のスタイルシート（order-xiino.xsl）

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

            <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
            version="1.0"> 

            …… 

                  <body>

                    注文票<br />

                    <hr />

                    <xsl:for-each select="/order/item">

                      <xsl:value-of 
            select="product/code" />

                      <xsl:text> 
            - </xsl:text>

                      <xsl:value-of 
            select="quantity" /> <br />

                    </xsl:for-each>

                   </body> 

                

            </html>

              </xsl:template>

            

            </xsl:stylesheet>

リスト12　iモード用のスタイルシート（order-imode.xsl）

　スタイルシートの内容については説明の必要はないでしょう。利用しているXSLTのタグは前回と同じく、<xsl:for-each>および<xsl:value-of>だけです。

　ポイントは下記のようにプロセッシングインストラクションによる、スタイルシートの指定です（リスト13）。

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

            <?xml-stylesheet type="text/xsl" href="order-xiino.xsl" 
            media="xiino" ?>

            <?xml-stylesheet type="text/xsl" href="order-imode.xsl" 
            media="imode" ?>

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

            <?cocoon-process type="xslt"?>

<order>

リスト13　スタイルシートの指定を追加

　Xiinoおよびiモード用のスタイルシートが指定されていることに加え、media属性の指定がないスタイルシート指定もあることに注意してください。

　media属性の指定がないスタイルシートは、ほかに適用できるスタイルシートがない場合に用いられます。すなわち、デフォルトのスタイルシート指定ということになります。ここでは、前回作成したスタイルシートを指定してあります。

　それでは出力イメージを確認してみましょう。

画面3　Xiinoで注文データを出力

画面4　iモードで注文データを出力

　ご覧になって分かるように、めでたくスタイルシートの切り替えが行われています。

■次回はPDF出力に挑戦！

　今回は、Cocoonを使ってスタイルシートの切り替えに挑戦してみました。サーバサイドでスタイルシートを適用するからこそ可能なワザです。前回のサンプルでは少し物足りなかった方にも少しは満足してもらえたのではないでしょうか。次回はさらに、PDF出力に挑戦してみたいと思います。

　お楽しみに！

Index
XMLサーバ／Cocoon自由自在！第3回 XML文書をiモードとPalmに対応させる
	スタイルシートの切り替えに挑戦
	スタイルシート切り替えの仕組みは？
	注文リストをiモード用とPalm用に変換してみる

「XMLサーバ／Cocoon自由自在！」

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 記事ランキング

転職／派遣情報を探す

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

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