0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@thinking-weed

XML学習備忘録06_XSLT変換によるXMLのブラウザ表示に関する備忘録

0
Last updated at Posted at 2026-08-10

そもそもXSLTとは

Extensible Stylesheet Language Transformations の略。もともとXSLの機能の１つとして策定作業が進められていた。

XML文書の変換処理ルールをXMLの文法に則して（＝整形式で）記述したもの。変換の際、各種の組み込み機能（関数、繰り返し処理、分岐処理、ソートなど）も使える。

変換には、「XMLに対してこのXSLTを適用してください」と指示するXSLTプロセッサが必要とされる。

XSLTプロセッサの例

・Webブラウザ（XMLとXSLTを読み込んで表示できるもの）
・Excel VBAのMSXML（transformNode や XSLTemplate など）
・JavaのXSLTライブラリ
・.NETの XslCompiledTransform
・コマンドラインツール（例: xsltproc）

なお、Webブラウザを使ってXSLTを適用したい場合、 表示したいXMLのXML宣言の下に次のような文言を書く必要がある。

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

<?xml-stylesheet type="text/xsl" href="～"?>のsample.xml（XML文書本体）から見た 「～.xslt」（適用したいXSLT）の相対パスを一般的には書く

∴ 上の場合、sample.xmlは下記のようにsample.xsltと同階層にあるという想定

sample.xml
sample.xslt　

現在、急速に広まった 「ローカルファイルも信頼しない」 というゼロトラスト（主な参考資料④参照）に近い方針を使用PCが取っている場合、WebブラウザをXSLTプロセッサとして使う場合は少なくとも注意が必要（下記の実際に表示してみるのWebブラウザ編を参照）

実際に表示してみる

Webブラウザ編

用意したのは下のようにローカルのデスクトップのフォルダに用意したsample.xml、sample.xslt　（※筆者の学習用私用PCはRYZENのWindows11）

xml_sample_screenshot.jpg

ここから普通にsample.xmlをポチポチすれば表示されると思っていたのですが・・(^^;)
（上記画像のアイコンはChromeになっていたのですが、Edgeでやってみても同様でした）

sample.xmlをただポチポチしてみた結果の動画・・何も写らねえ(^^;)

xml_sample_browser.jpg

少し調べて見た感じ、近年変更されたブラウザのセキリティ制限により、そのままだとXSLTが現在は読み込まれないことによるらしい。

2010年頃　
file://～ を同一オリジンとみなさない方針になり、XML→XSLTの読み込みが失敗するケースが発生。

2015～2020年頃
Site Isolation、CORS、ローカルリソース保護などのセキュリティ強化に伴い、file:// に対する制限がさらに増加

▽このへんで

file://sample.xml
        ↓
file://sample1.xslt

というローカルファイル同士の参照は、Chrome/Edgeではセキュリティ上ブロックされるようになったらしい・・

ブラウザのセキリティ制限を掻い潜ってXSLTを読み込ませてブラウザ表示するには

主に以下のような手立てがあるらしい。

（１）ローカルサーバーを使う（PC内に簡易なWebサーバーを立てる）
（２）コマンドラインなどからローカルファイルのアクセス制限を一時的に無効にする
（３）IEモード（IE専用の古いWebシステムや社内サイトをEdge内で安全に表示できる機能）を使う
（４）XML+XSLTのファイルをどうにかしてHTMLに変換する

例えば実際（４）の方法を考案された方が既に以下の記事内でGithubを通して変換用スクリプトを公開されていた。

ただ、Githubのようなオーブンソースからのダウンロードがセキリティ（というかコンプライアンス）上難しいことも多いと思うので、他の極めて再現性が高いであろう方法として（最悪でもVSCodeぐらいは許可が下りている前提のもと）VSCodeの拡張機能Live Serverを使って（１）の簡易なWebサーバーを立てる方法を今回の自分の学習でも採用していくこととした。

Live Serverを使ってXMLを表示してみた様子

(1)拡張機能Live serverを入れる

スライド1.PNG

(2)Live Serverを起動して、ローカルWebサーバー上でsample.xmlを開く

対象のXML、XSLTを含むフォルダをVSCodeで開く
※Live Server拡張機能は、ワークスペースの最上位フォルダをルートとしてWebサーバーを起動する

スライド2.PNG

赤枠の「Go Live」を押すと、以下の画面が勝手に立ち上がるので、対象のXMLをクリックする

スライド3.PNG

結果、ブラウザの内部で対象のXMLがXMLT変換され、その結果がブラウザを通して表示される

※簡易サーバーを終了させるには、サーバー起動時に押した所にある「Port:5500」を押す。

Live Serverの役割は「ローカルのフォルダをHTTPサーバーとして公開すること」 であり、ここではLive Serverによって XMLとXSLTがHTTP経由で取得されるようになったことで（先述のブラウザによるセキリティ制限が回避され）、ブラウザがXSLT変換を実行して、その結果を表示している
⇒変換結果をHTMLやxhtmlとして保存するには、別途VBAのMSXML等による変換が必要

XSLT変換概要①

上記の例で用いたsample.xsltはsample.xmlをどういう規則でHTMLに変換していたか

少し調べた感じ、結論として初学者に一番分かりにくいのは xsl:apply-templatesの処理の流れと感じた。（後はこいつ以外は英文法的に覚えるだけ）

sample.xml

sample.xml
<?xml version="1.0" encoding="Shift_JIS"?>
<!-- 👆XML宣言 -->

<?xml-stylesheet type="text/xsl" href="sample.xslt"?>
<!-- 👆Webブラウザ（JavaScript）に搭載されているXSLTProcessorが-->
<!--   sample.xmlにsample.xsltを適用するようにするための宣言   -->

<sample>
    <example>hogehoge</example>
    <example>fugafuga</example>
</sample>

sample.xslt

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

<!-- 👆XML宣言（XSLTもXMLの亜種） -->

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- 👆このファイル全体がxsl（スタイルシート）の一種であることの宣言 -->

    <xsl:output method="html" />
    <!-- 👆変換結果の出力方法をhtmlに指定-->
    
    <xsl:template match="/">
    <!-- 👆「内容がxsl:apply-templates要素の処理結果となるhtml要素を生成する」という処理を行う-->
    <!--match="/"の「/」は変換規則の適用先sample.xmlのルートノード（＝適用先sample.xml全体）を指す-->
        <html>
            <body>
                <xsl:apply-templates/>
                <!--👆「順次」現在ノードの子ノードについて、適切なテンプレートを探して実行-->
                <!--下記の注意を参照 -->
            </body>
        </html>
    </xsl:template>
    
    <xsl:template match="example">
    <!-- match="example"の「example」は変換規則の適用先sample.xmlの全てのexample要素ノードを指す -->
        <h2>サンプル</h2>
        <xsl:value-of select="."/>
    </xsl:template>

</xsl:stylesheet>

\<xsl:output method="html" /> を省略すると、既定では method="xml" になるため、HTMLに見えるXMLが出力されてしまう

xsl:apply-templatesの処理の流れ

組み込みテンプレート xsl:apply-templates/ は
「現在ノードの子ノードに対して、適用できるテンプレートをselectテキストノードの直前の階層まで再帰的に『探して』順次実行する」 命令のため、ここでは以下の流れを辿っている

①現在のノードを「/」として、<xsl:apply-templates/>が動く
        ▽
②「/」の子ノードの「sample」要素ノードに適用されるテンプレートが探される（・・がない）
        ▽　👈（※注意　次のノードにスキップされる）
③「sample」の子ノードの「example」要素ノードに適用されるテンプレートが探される
        ▽
④ match属性が「example」になっているテンプレートが各example要素に対して適用される
        ▽
⑤ 「example」以下はテキストノードになるため、ここで打ち止め

結果ここでは、加えて xsl:template要素、xsl:value-of要素のルールに従って次のようなHTMLの材料が生成される（これが <html><body><\body></html>に挟まれて出力される）

    <h2>サンプル</h2>
    hogehoge
    <h2>サンプル</h2>
    fugafuga

ここではルートノード「/」以下が次のような木構造になっていたことに注意

sample
├─ example  "hogehoge"
└─ example  "fugafuga"

とDOMに分解されていることによる

xsl:template要素の使い方

<xsl:template match="パターン（変換規則の適用先となるXMLのノードの指定、XPathで記述）">
    テンプレート
</xsl:template>

match属性で指定されたノードに対して中身のテンプレート内容を適用する

xsl:value-of要素の使い方

<xsl:value-of select="この要素が適用される各ノードを起点とするXPath式で記述">

XPath式で指定されたノードの （子要素である）テキストノードにこの要素がそれぞれ置き換えられる

主な参考資料

①XMLマスター教科書 ベーシックV2　　森田 浩美・中原 敬子 (著)

Amazonリンク

https://www.amazon.co.jp/XML%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%99%E3%83%BC%E3%82%B7%E3%83%83%E3%82%AFV2-%E6%A3%AE%E7%94%B0-%E6%B5%A9%E7%BE%8E/dp/4798109096

②W3Cの各文書（下記のリンク先の検索フォームで対象を検索）

③MDN（Mozilla Foundationが運営する、Web開発者向けの無料かつ包括的な技術ドキュメントサイト）のXMLガイド

④NTTドコモビジネス　ゼロトラストとは？意味・定義 | 用語集

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?