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