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

4. XMLでWebページを作ろう

 Webページとひとくちにいってもいろいろあります。ここでは読者の皆さんが実際に応用しやすいように、個人のホームページをイメージしたサンプルをとり上げてみることにしましょう。

 個人のホームページといってもコンテンツ自体は、それこそいろいろな内容があるでしょう。そういったさまざまなコンテンツに対してXML化を行い、情報を抽出する作業は非常に面白いものです。ここでもぜひ実演してみたいのですが、さすがに誌面の都合もあるので、もう少し簡単なものにしましょう。

■ こんなWebページを作ってみる

 ここでサンプルとしてとりあげるのは、フロントページ、いわゆるindex.htmlに相当するページです。フロントページといっても(普通は)色々な内容が書かれています。とはいえ、少なくとも以下のような情報は共通していることが多いでしょう。

  • お知らせ(更新記録など)
  • サイト管理者のメールアドレス
  • コンテンツへのリンク(目次)

 通常ですと、上記の情報をHTMLの「見出し」や「段落」に相当するタグを用いて書き並べていくことになります。さらにデザインを考慮してCSS(Cascading Style Sheet)のスタイルを指定したり、場合によってはtableタグでレイアウトを行ったりします。

 こういった、情報そのものとレイアウトの指定を混在して、区別なく記述することの問題点は今さら繰り返す必要はないかと思います。

 そこで、ここではまず上記の情報を抽出してXML文書として定義し、次にXSLTによりレイアウトを指定する、という順序で作業を進めていきます。こうすることで、レイアウトのことは気にせずに情報を追加、修正したり、逆に情報はそのままでレイアウトを変更したりすることが非常に容易になります。

 手始めに、「お知らせ」の部分をXML文書で作ってみましょう(リスト4)。

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="sample-0.xsl" type="text/xsl"?>
<index>
}

<!-- 以下はニュース -->
<information>

  <news date="20000714" title="オープンしました">
    新規オープンしました
  </news>


  <news date="20000806" title="リンクを追加しました">
    新しいリンクをブックマークのページに追加しました。
  </news>


  <news date="20000810" title="夏休み特集">
    夏休み特集のコンテンツを追加しました。是非みてください!
  </news>

</information>
</index>
リスト4 「お知らせ」の情報をXMLで定義してみる。sample-0.xml(このファイルの漢字コードはUTF-8で定義されていますので、通常のエディタでは漢字が表示されないことがあります。Internet Explorer 5.xでは正常に表示されます)。

 フロントページ全体を表すためのルートタグは<index>にしました。その下に「お知らせ」を表すエリアとして<information>タグを置いています。実際にはさらにその下の<news>タグが、具体的なニュース記事を1つ1つ表していることになります。実際に見ていただければ、ニュース記事がそれぞれ日付、見出し、記事の3つからなっていることが分かるでしょう。

 さて、これをどんなレイアウトで出力しましょうか? いろいろと凝ると楽しいところではあるのですが、サンプルということで、できるだけ簡単なスタイルにとどめ、リスト5に示すようなXHTMLの出力を行うことにします。

<html>
<head>
  <title>お知らせのページ</title>
  <meta content="text/html; charset=utf-8"
    http-equiv="Content-Type">
</head>
<body>
  <center>
    <h1>お知らせのページ</h1>
  </center>
  <hr>
  <h2>最新ニュース</h2>
  <h3>20000714オープンしました</h3>
  <p>
    新規オープンしました
  </p>
  <h3>20000806リンクを追加しました</h3>
  <p>
    新しいリンクをブックマークのページに追加しました。
  </p>
  <h3>20000810夏休み特集</h3>
  <p>
    夏休み特集のコンテンツを追加しました。是非みてください!
  </p>
  <hr>
</body>
</html>
リスト5 「お知らせ」の出力結果(想定)。sample-0.html(このファイルの漢字コードはUTF-8で定義されていますので、通常のエディタでは漢字が表示されないことがあります。Internet Explorer 5.xでは正常に表示されます)。

 ご覧になれば分かるように、ニュースの本文以外に<h1>と<h2>で簡単な見出しを追加し、各記事の見出しは、日付と見出しを組み合わせて<h3>で出力しています。記事は段落<p>で囲っているだけです。

 このような出力を行うためのXSLTが、下記のリスト6になります。

<?xml version="1.0" encoding="UTF-8" ?>

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


<!-- ページ全体の枠組み -->
<xsl:template match="/index">
<html>
  <head>
  <title>お知らせのページ</title>
<meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
  </head>
<body>


  <center><h1>お知らせのページ</h1></center>
  <hr />


  <h2>最新ニュース</h2>
  <xsl:apply-templates select="./information/news" />

  <hr />

</body>
</html>


</xsl:template>

<!-- ニュース -->
<xsl:template match="news">
<h3>
  <xsl:value-of select="@date" />
  <xsl:value-of select="@title" />
</h3>
<p>
  <xsl:value-of select="." />
</p>
</xsl:template>


</xsl:stylesheet>
リスト6 「お知らせ」のXML文書をXHTML化するスタイルシート。sample-0.xsl(このファイルの漢字コードはUTF-8で定義されていますので、通常のエディタでは漢字が正しく表示されないことがあります)。

 先ほどのhello.xslと見比べてください。ルートタグにマッチする<xsl:template>タグが最初に定義されている個所と、その中タグの中でページ全体の大まかな出力が記述されている個所はほとんど同じですね。

 唯一やや複雑になっていると思われる個所が、各ニュースの記事を出力している部分になります。<xsl:apply-templates>というタグを見てください。これは、指定したパターンにマッチするタグを見つけ、その規則を用いて出力を展開せよと指示しているものです。サンプルの<xsl:apply-templates>タグでは、select属性に“./information/news/”という文字列が指定されています。これは、現在のタグの直下にある<information>タグの、さらにまた下の<news>タグを展開することを指示しています。

 <news>タグを実際にどのように展開するのかは、最後の<xsl:template>タグに書かれていますね。ここでは、日付と見出しの属性を<xsl:value-of>で取り出して<h3>で囲んで出力し、その後に記事の内容を<p>タグで囲んで出力しています。以上が今回作成したサンプルの内容になります。

■ BXSでフロントページを見てみる

 さて、これを実際にBXSで見てみましょう。作成したsample-0.xmlとsample-0.xslを、hello.xmlが格納されていたディレクトリ

webapps/demo/xml/

の下に置いてください。そのあとに、Webブラウザで以下のURLをオープンしてみましょう。

http://localhost/demo/xml/sample-0.xml

画面4のような出力が確認できましたか?

画面4 「お知らせ」ページをWebブラウザで確認

 出力が確認できれば、とりあえずサンプルの作成は終了です!

 このサンプルでは「お知らせ」のみをとり上げてみました。少し面白くなってきたぞ、という方は、「お知らせ」以外の以下の情報についてもXML化することに挑戦してみてください。それほど難しくはないはずです。

  • サイト管理者のメールアドレス
  • コンテンツへのリンク(目次)

 今回は、BXSのインストール、および簡単なXML文書の作成例を紹介してみました。次回はもう少し突っ込んで、XSLTを用いた情報の加工や、Webブラウザの種類ごとに出力のレイアウトを変えてみることに挑戦してみます。

「第2回 XSTLによるダイナミックな変換の実際」

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

本日月間