More than 5 years have passed since last update.

XMLをXSLTを使ってHTML文書にする

Last updated at 2016-12-08Posted at 2016-07-09

XMLを使うと、パソコンにわかりやすい文書データファイルが作ることができます。
それを、人間にわかり易い文章にするにはHTMLにするとわかりやすいです。
それにはXSLT(XSL Transformations)XML変換言語を使います。
ちなみにブラウザはInternet Explorerが良いです。

#XSLを使うと？

人間にもPCにもわかりやすい文書ができます。したがって、とても効率のよい文書が作れるわけです。
XMLを使うことによってデータファイルを視覚化することができ、データ交換にも役立ちます。

#作り方
XMLサンプルファイルをSampleFile.xmlとし、XSLTファイルをStyleDesign.xslとします。

SampleFile.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<?xml-stylesheet type="text/xsl" href="StyleDesign.xsl"?>
<page>
  <class>
    <students>
      <no>1</no> 
      <name>山田太郎</name> 
      <age>13</age> 
      <tel>000-0000-0004</tel> 
    </students>
    <students>
      <no>50</no> 
      <name>井上智也</name> 
      <age>54</age> 
      <tel>555-2555-5555</tel> 
    </students>
    <students>
      <no>1401</no> 
      <name>塩田よし子</name> 
      <age>32</age>
      <tel>555-7878-4444</tel>
    </students>
  </class>
</page>

StyleDesign.xsl

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

<xsl:template match="/">
  <html>
  <head>
  <title>XMLとXSLT</title>
  </head>
  <body>
    <p style="text-align: center">とにかく表示してみよう</p>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

このように書くと↓のようになります。

#コードの説明

1行目が「このテキストはXMLですよ。」という意味です。
2行目は「このXMLテキストを表示するのに使用するXSLTファイルはこれですよ。」という意味です。

##SampleFile.xml
1行目: <?xml version="1.0" encoding="UTF-8"?>←エンコードはUTF-8
2行目: <?xml-stylesheet type="text/xsl" href="StyleDesign.xsl"?>←このXSLTを使いますという宣言
3行目以降: 

##StyleDesign.xsl
1行目:<?xml version="1.0" encoding="UTF-8"?>←XML宣言
2行目:<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">←スタイルシート宣言
3行目～:

template match="要素">

・・・ここに、もとの要素をどのように変換するかを書きます・・・
</xsl:template>```
↑スタイルシートの基本は、３行目以降から書かれている<xsl:template>要素です。この<xsl:template>要素で、もとのXMLドキュメントのどの要素をどのようなものに変換するかを示します。<xsl:template>の開始タグのmatch属性で、変換前のXMLドキュメントのどの要素を変換するかを指定します。実際には、色々な指定をするために<xsl:template>タグで囲まれた指定がたくさん必要になります。
そして要素(Element)とMatchを使ってHTMLにしていきます。

#XPathについて
詳しくは[XPathまとめ](http://qiita.com/merrill/items/aa612e6e865c1701f43b)というQiitaの記事が参考になります。
このXPathを使ってXMLが成り立っているのです。
#まとめ
この方法を使っていけばどんどんいい文書が作れると思います。CSSなども使えるので試してみてくださいね。
参考サイト:[楽しいXML](http://www6.airnet.ne.jp/manyo/xml/)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up