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.xmlとtest.xsl。
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.xmlとtest.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等の学習に役立つ書籍を紹介します。