XSLTを使ってXMLからHTMLを生成する(2020年版)

大学の課題でタイトルのようなことをやったんですが、ちょっと罠があったのでメモを残しておきます。
2020年5月26日執筆時点ではこの記事の通りにやれば動くと思いますが、将来的にどうなるかわかりません。

最近のブラウザではセキュリティ上の理由で、デフォルトのままではXSLTは動作しないようになっています。
ブラウザからローカルのファイルが自由に読み込めてしまってはダメなので当然といえば当然ですね。

「Chromeでは動作しませんが単にFirefoxを使えば大丈夫です」のような記事が見つかるかもしれませんがそれも昔の話で、ブラウザの設定を変更する必要があります。

まずはXMLを準備します。

food.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="report.xsl"?>
<food>
  <vegetable>
    <name>きゅうり</name>
    <taste>おいしい</taste>
  </vegetable>
  <vegetable>
    <name>ピーマン</name>
    <taste>苦くておいしい</taste>
  </vegetable>
  <vegetable>
    <name>アボカド</name>
    <taste>とてもおいしい</taste>
  </vegetable>
  <fruit>
    <name>バナナ</name>
    <taste>おいしい</taste>
  </fruit>
  <fruit>
    <name>メロン</name>
    <taste>おいしい</taste>
  </fruit>
</food>

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

この行がポイントです。href属性にxslファイルを指定しましょう。

続いてxslファイルを用意します。

report.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>
      <body>
        <h1>食べ物データ(主観)</h1>

        <h2>野菜</h2>

        <ul>
          <xsl:for-each select="/food/vegetable">
            <li>
              <xsl:value-of select="name" />は<xsl:value-of select="taste" />
            </li>
          </xsl:for-each>
        </ul>

        <h2>果物</h2>

        <ul>
          <xsl:for-each select="/food/fruit">
            <li>
              <xsl:value-of select="name" />は<xsl:value-of select="taste" />
            </li>
          </xsl:for-each>
        </ul>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>