タイトル画像
サイトタイトル画像

XML を覚えよう

XML を覚えよう

XML とは「 Extensible Markup Language 」の略で、日本語では「拡張可能なマーク付け言語」と言います。

HTML では「構造化」を表現するタグには次のようなものしか存在しません。

  • 見出しを表すタグ: h1, h2, h3, h4, h5, h6
  • 段落を表すタグ: p, div

上記以外は、レイアウトや文字のスタイルなどに関係するものばかりです。そのため、「構造化テキスト」の表現に XML を使うのが主流となり始めました。XML を応用すると次のようなサイトが可能です。

項目 内容
構造化ドキュメントとしての応用 見せ方についての情報はできるだけ無くし、論理的な構造・内容・属性を表現することができる
携帯電話への情報配信 もとの情報をXMLで作っておいて、どの携帯からアクセスしたかを判断して、それにあった形に変換して携帯に送ることができる
WEB サービス WEB サービスを動的に利用して、複合的なサービスができる

XML & XSL を書いてみよう

次のようにメモ帳に記述し、名前を「index.xml」として保存しましょう。
index.xml

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet href="test.xsl" type="text/xsl"?>
<ドキュメント>
<タイトル>XMLの練習</タイトル>

<概要>初めての XML に挑戦!!</概要>

</ドキュメント>

上記が表示したいXML文書です。 しかし、このままでは必要な情報が記述されておらず、ブラウザは理解できません。

このため、次のようなHTML文書に変換してブラウザに理解してもらう必要があります。その役割をするのが「XSL」です。
表示したいHTML文書

<html>
<title>XMLの練習</title>
<body>
<h1>XMLの練習</h1>

<p>初めての XML に挑戦!!</p>

</body>
</html>

XSL とは「 Extensible Stylesheet Language 」の略で、日本語では「拡張可能スタイルシート言語」と言います。

以上のように、XML文書では、HTML4.0+CSSと同様、XML+XSLとして、文章の内容とレイアウトは分離して管理できます。

XSLを書いてみましょう。次の例を「test.xsl」として保存しましょう。
test.xsl

<?xml version="1.0" encoding="shift_jis" ?>
<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <xsl:apply-templates/>
  </xsl:template>

  <xsl:template match="ドキュメント">
    <html><xsl:apply-templates/></html>
  </xsl:template>

  <xsl:template match="タイトル">
    <title><xsl:value-of select="."/></title>
    <h1><xsl:value-of select="."/></h1>
  </xsl:template>

  <xsl:template match="概要">
    <p><xsl:value-of select="."/></p>
  </xsl:template>
</xsl:stylesheet>

ブラウザへ表示すると次のようになります。
実際のindex.xmltest.xsl

xml

XSLTのスタイルシートについて

まず、XSLTの冒頭には、XML宣言を付けます。

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

続いて、xsl:stylesheet 要素で、XSLTのバージョンとXSLTの名前空間の使用宣言します。

この要素は、<xsl:stylesheet>~</xsl:stylesheet>のようにして全体を囲みます。

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

その後は、ルートノードのマッピングを行っています。

これは、xsl:template要素で表されるテンプレートルールという、変換するためのひな型を使って指定します。

XML & CSS で書いてみよう

なお、Opera などでは、上記では正しく表示されません。
Operaなどで正しく表示したい場合は、XML+CSSとして、文章の内容とレイアウトを管理してみましょう。

ただし、今度は Internet Explorer で表示されません。実際のindex.xmltest.css

index.xml

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet href="test.css" type="text/css"?>
<ドキュメント>
<タイトル>XMLの練習</タイトル>

<概要>初めての XML に挑戦!!</概要>

</ドキュメント>

test.css

@charset "shift_jis";

ドキュメント{
  display:block;
  color:black;
  background-color:white;
}

タイトル{
  display:block;
  padding-top:15px;
  padding-bottom:15px;
  font-weight:bold;
  font-size: xx-large;
}

概要{
 display:block;
 font-size:medium;
}

ブラウザ依存確認

DTD (Document Type Definition) は、XMLのスキーマ言語の一種である。XML 1.0の仕様書の中で規定されているため、XMLにおけるもっともベーシックなスキーマ言語と言える。

DTDは、XMLの構文に従っていないため、独自の構文を覚える必要がある。また、DTDは適切に名前空間に対応していない。

XML スキーマ定義言語 (XSD) を使用すると、XML ドキュメントのための構造やデータ型を定義できます。

XMLデータ構造の定義 名前空間の定義 CSSを用いて表示する Webブラウザ内部でHTMLへ変換して表示する Webブラウザ内部でXHTMLへ変換して表示する
(なし) (なし) index.xml test.css index.xml test.xsl index.xml test.xsl test.css
DTD (なし) もとの情報 もとの情報 もとの情報
XSD (なし) もとの情報 もとの情報 もとの情報
XSD (あり) もとの情報 もとの情報 もとの情報
スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2002/08/13)