Top > Development > HTMLをXMLに分解

HTMLをXMLに分解

前に戻る次に進む
HTMLファイルをXMLファイルとXSLファイルに分割しましょう
Last updated 2004/4/28

ここでは,まずHTMLから必要な部分だけ抜き出して,XMLとXSLTを作ります。 この2つができればIE上で表示を確認できるようになります。

文書構造を考える

各ページごとに共通する構造を一カ所にまとめてしまい,文言やURLなどのデータだけを切り出すのが,今回XML化する目的です。 たとえば,ページのヘッダ,フッタ,サイドメニューなどがこれですね。 こうしたデータをXSLT内に押し込んでやり,各ページで固有の文書データだけをXMLファイルにしてしまいます。 サンプルとして,ここのサイトのソースでも見てみましょう。 これは2003年度版,tausoft.netに移行する前のInformation,「作者について」のソースです。 チョットじゃまくさいんで,説明に不要な部分は一部削ってあります。 作者名がTAUになってたりして懐かしい:-)

abouttau.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <title>-Information- 作者について</title>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css"> 
  <link rel=stylesheet type="text/css" href="../yellow.css" title="YellowStyle"> 
</head>

<body style="background: #ffffff;">
  <div style="text-align: right;">
    <a href="../" target=_top>Top</a>&gt;
    <a href="../info.htm" target=_parent>Information</a>&gt;
      作者について
  </div>

  <h1>作者について</h1>

  <div class=topmenu>
    <a href="aboutsite.htm"><img src="../image/prev.gif" width=81 height=16 alt="前に戻る"></a>
    <a href="aboutfile.htm"><img src="../image/next.gif" width=55 height=16 alt="次に進む"></a>
  </div>

  <h2>TAUの紹介</h2>
  <p>TAUはオンラインソフト作者団体です。
主にゲーム制作をしていますが,気まぐれでMIDIやらICONやら,好き勝手に作っています。</p>

?中略?

  <div class=footmenu>
    <a href="aboutsite.htm"><img src="../image/prev.gif" width=81 height=16 alt="前に戻る"></a>
    <a href="aboutfile.htm"><img src="../image/next.gif" width=55 height=16 alt="次に進む"></a>
  </div>

  <address>
    Mail to:<a href="mailto:u-no@abox6.so-net.ne.jp">u-no@abox6.so-net.ne.jp</a><br>
    Copyright &copy; 2000-2002 TAU. All rights reserved.
  </address>
</body>
</html>

なんか青色太字になってますねぇ。 ここをくくり出したいんですが,そは後で触れるとして,その前にXMLとHTMLでの表記の違いに関することから。 まず,HTMLでは,IMGタグといったら,<IMG>と書いていましたが,XMLでは<img/>と書くことになっています。 注意しなければならないのは2つ,小文字で書かなければならないことと,閉じタグがないタグは,閉じ括弧>の前に/を入れなければならないことです。 <hr/>なんかも同じ要領。 次に,属性も今まではwidth=100などの様に書いてもよかったのですが,XMLでは必ず""で囲わなくてはなりません。 つまり,width="100"みたいに。 この場合も属性は小文字で書くみたいですね。 ちょっと微妙なことなんですが,©を書きたいとき,HTMLだと&copy;でよかったんですが,XMLだと&copy;は使えないみたいです。 XMLでは&lt;と&gt;と&amp;しかつかえないみたい。 しょうがないので,UTF-8あたりで直接©と書きましょう。 ここまでの修正を加えると,XMLの文法に沿った形になり,これをXHTMLと余分だとか何とか。 ブラウザでちゃんと表示できることを確認してください。

さて,準備が整ったので,いよいよ本格的にXML化。 まずは,HTMLファイルをよく見てみましょう。 ここら辺は感覚的なものですが,サイドメニューやヘッダ,フッタに当たる部分など,全ページで共通する部分を青色で書いてあります。 これを一つのタグで表しましょう。 <page></page>というタグを導入し,この中に本文を書くわけ。 HEADタグ内の,たとえばTITLEなどはページごとに異なりますが,これくらいのちょこっとしたところはpageタグの属性にしてしまうとして,今はそのまま。 下のようにweb.xslファイルとabouttau.xmlファイルに分割しました。 もう一度ブラウザで見て確認しましょう。

web.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="SJIS" />

<xsl:template match="/">

<html lang="ja">
<head>
  <title>-Information- 作者について</title>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="../yellow.css" title="YellowStyle" />
</head>

<body>
  <div style="text-align: right;">
    <a href="../" target="_top">Top</a>&gt;
    <a href="../info.htm" target="_parent">Information</a>&gt;
    作者について
  </div>

  <h1>作者について</h1>

  <div class="topmenu">
    <a href="aboutsite.htm"><img src="../image/prev.gif" width="81" height="16" alt="前に戻る" /></a>
    <a href="aboutfile.htm"><img src="../image/next.gif" width="55" height="16" alt="次に進む" /></a>
  </div>

  <xsl:apply-templates select="/page" />

  <div class="footmenu">
    <a href="aboutsite.htm"><img src="../image/prev.gif" width="81" height="16" alt="前に戻る" /></a>
    <a href="aboutfile.htm"><img src="../image/next.gif" width="55" height="16" alt="次に進む" /></a>
  </div>

  <address>
    Mail to:<a href="mailto:u-no@abox6.so-net.ne.jp">u-no@abox6.so-net.ne.jp</a><br />
    Copyright © 2000-2002 TAU. All rights reserved.
  </address>
</body>
</html>

</xsl:template>

<xsl:template match="h1|h2|h3|p|a|li|strong|dl|ul|ol|div|br|table|blockquote|pre">
  <xsl:copy-of select="." />
</xsl:template>

</xsl:stylesheet>

abouttau.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="web.xsl"?>

<page>
  <h2>TAUの紹介</h2>
  <p>TAUはオンラインソフト作者団体です。
主にゲーム制作をしていますが,気まぐれでMIDIやらICONやら,好き勝手に作っています。</p>

?中略?

</page>

ぶっちゃけ,XSLTとかあんまり詳しくないのであんまりうまくないかも。 とりあえず表示されてるからいいや。 <xsl:copy-of select="." />すると,そのタグはそのまま表示してくれるようなので,h1やh2やpといったHTMLのタグに対してはこれをおこなうとうまくいきます。 IEは,指定したXSLTから自動的にHTMLに変換して表示してくれるので,プレビューに便利です。

前に戻る次に進む
Mail to:u-no@tausoft.net
Copyright © 2000-2005 tausoft. All rights reserved.