実践！ XMLアプリケーションサーバ「BXS」

2. Webブラウザ別のスタイルシートを用意

　表示の加工が終わったところで、次のステップに進んでみることにしましょう。前回も少し書きましたが、XML化によってコンテンツとレイアウトを分離することができます。レイアウトとコンテンツを独立して修正できる利点については、繰り返し述べる必要はないでしょう。

　しかし、XMLによってデータをレイアウトから分離する利点はそれだけではありません。昨今、Webブラウザとひとくちに言ってもさまざまなものがあります。例えば、皆さんお馴染みの Internet Explorer（以下 IE）や Netscape Navigator（以下 NN）以外にも、以下のようなWebブラウザが知られています。

  • Mozilla、K-Meleon
  • Opera
  • Lynx,、w3m

　これらのWebブラウザはそれぞれ独自のHTMLレンダリング処理を行っており、Cascading Sytle Sheet（CSS）のサポート1つとってみても微妙に動作が異なります（Lynxやw3mなどに至ってはテキストベースのWebブラウザですから、そもそも表示の仕方が全く異なります）。IEとNNでの見え方が同じになるようにと、CSSの定義に苦労された方も多いのではないでしょうか。

　また、Webページにアクセスしてくるのは、何もパソコン上のWebブラウザだけではありません。最近では皆さんがお持ちの携帯電話、いわゆるブラウザフォンからもWebページにアクセスすることが可能です。

　これらのさまざまなWebブラウザに対応し、それぞれに適切な表現で情報を提示するためにはさまざまな方法が考えられますが、ここでもやはりXML文書とXSLTスタイルシートの組み合わせが有効です。カンのいい方はもう察しがついているでしょう。Webブラウザごとに最適な表示を行うスタイルシートを1つずつ作成しておき、アクセスしてきたWebブラウザの種類に応じてスタイルシートを切り替えるようにするのです。

　BXSではもちろん、アクセスしてきたWebブラウザの種類を認識して、使用するスタイルシートを切り替える機能があります。ここではその機能を利用し、IEとiモード携帯電話（以下 iモード）で、XSLTによって出力形式を切り替えるサンプルを作成してみることにします。

■iモード用スタイルシートを定義する

　コンテンツは、先ほどのブックマークのサンプルをそのまま流用します。ブックマークの情報をIEとiモードで見やすく表示するために、それぞれのスタイルシートを用意しましょう。先ほど作成したスタイルシートはIE用にそのまま使えそうですから、iモード用のスタイルシートを新たに作成するだけでよさそうです。

　iモード対応のHTML文書を作成する場合ですが、以下のような制限を考慮する必要があるため、スタイルシートを定義する場合は注意しなくてはなりません。

  • スクリーンは8 × 6 行（全角）
  • 文字コードはSHIFT JIS
  • 1ページの容量は推奨2KB

　これ以外にもいくつかiモード対応のHTML文書を作成する上での注意点がありますが、今回のサンプルとの関係が少ないのでここでは触れません。詳しくは「iモード対応HTML Version1.0-2.0 タグ・画面イメージ対応表」を参照してください。

　ここでは、上記の点を考慮して以下のようにスタイルシートを定義します。

  • 見出しのたぐいはできるだけ短い文字列にする
  • 各サイトのコメントは表示しない
  • リンクと見出しを区別するため、リンク前に矢印記号（→）を挿入する
  • 無駄な改行は可能なかぎり入れないようにする

　リスト4（bookmark-2-imode.xsl）が、実際に定義したスタイルシートになります。基本的な構成はリスト3とほとんどど変わっていません。ヘッダのタグは用いず（14、29行目）、カテゴリごとに水平線を入れています（38 行目）。ポイントは、各サイトへのリンクの前に「→」を挿入してアクセントをつけているところです（43 行目）。

<?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="SHIFT_JIS" />

<!-- ページ全体の枠組み -->
<xsl:template match="/bookmark">

<html>
<head><title>My Bookmarks</title></head>
<body>

My Bookmarks<br />
<hr />
<xsl:apply-templates select="./category" />

</body>
</html>

</xsl:template>

<!-- カテゴリ別見出し -->
<xsl:template match="category">

<!-- カテゴリ名称を変数に退避しておく -->
<xsl:variable name="cname"><xsl:value-of select="@id" /></xsl:variable>

<xsl:value-of select="@label" /><br />
<!-- 各 site タグについて -->
<xsl:for-each select="/bookmark/site">
<xsl:sort order="descending" select="@rate" />
<!-- カテゴリ名がマッチするもののみ展開 -->
<xsl:if test="@category=$cname">
<xsl:apply-templates select="." />
</xsl:if>
</xsl:for-each>
<hr />
</xsl:template>

<!-- サイト紹介 -->
<xsl:template match="site">
<xsl:text>→</xsl:text>
<a href="{@url}"><xsl:value-of select="@label" /></a><br />
</xsl:template>

</xsl:stylesheet>
リスト4　iモード用スタイルシートのbookmark-2-imode.xsl

「4. Webブラウザごとに出力を切り替える」

Index
実践！ XMLアプリケーションサーバ「BXS」
第1回 XMLでWebサイトを作ろう
　 1. Baykit XML Serverとは
　 2. インストールしよう
　 3. XMLのサンプルを表示させてみる
　 4. XMLでWebページを作ろう
第2回 XSTLによるダイナミックな変換の実際
　 1. データの内容に基づいた表示の加工
　 2. さらにXSLTスタイルシートを改良
3. Webブラウザ別のスタイルシートを用意
　 4. Webブラウザごとに出力を切り替える


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

注目のテーマ

HTML5＋UX 記事ランキング

本日月間
＠IT