webページとしてxmlを利用する(2) xhtmlとして

前回はwebページとしてのxmlの可能性について考えて見ました．が，検討の結果，中々xmlだけでは使い勝手が悪いことも判ったことでしょう．では，xmlの利便性を活かすにはどうすればよいでしょうか？
そこで本記事は前回の続きとしてxhtmlの活用法について考えて見ることとします．
なお，本記事の内容は以前公開したsvg reportsを作った際に判ったことのまとめにもなっています．

再考・xmlとしての利点

htmlとxmlとを比較した時，どのような点が異なるでしょうか？例えば次のような点が挙げられると思います．

• 文法が単純である．
  htmlは要素ごとに文法が異なるなど，非常にややこしいところがあります．
  例）script要素，object要素，br要素等．
• 全てhtmlの要素として扱われる．
  ※一部svgやmathmlとして扱われるものもあります．
  xmlでは自作の要素を自由に挿入することができます．
• 構文チェックが行われる．
  htmlでは構文に問題があっても，htmlパーサー（webブラウザ）側で自動的にdom構造に修復してしまいます．

かいつまんで言うと，htmlの記述が簡単に行えるようにコンピューター側で勝手に処理を行なっているのです．これはメリットとも言えるのですが，html5では大幅に要素の数が増えたためかえって問題を複雑化している感があります．

その点xmlは厳密な記述が必要となる一方で，文法そのものは単純であり，記述そのものは簡単です．しかも構文チェックが為されるので，バグが混入しにくくなっています．

ですが，これよりももっとxmlをxmlらしくしている点があるのです．

xslによるxmlの再構築

xmlには前述したcssの他にxslと呼ばれるスタイルシート言語を適用することができます．cssが見た目のみを制御するのに対し，xslではxmlの見た目のみならず，xml文書としての構造をも加工することが出来る等（これをxsltと呼びます）非常に汎用性が高いのが特徴です．

例えば，次のような事が可能となります．

• xml文書を(x)html文書に変換して構造を見やすくする．
• 外部のxml文書を読み込んでメインのxml文書に挿入することが出来る．
• レンダリングエンジンの種類を判別することが出来る．

htmlでは通常スクリプトを介さなければ実現出来なかったことを，xml+xslではスタイルシートを適用するだけで実現することが出来るのです．

xml+html=xhtml

それではhtmlの仕組みを生かしつつもxmlのもつメリットを活かすことは出来ないのでしょうか？
そこでxhtmlの出番です．

xhtmlはhtmlの文書構造をxmlベースで再定義したものです．html4が主流だった頃はhtmlとxhtmlとは異なる仕様として扱われていましたが，html5ではこれらが統一され，機能的には全く同じものとなっています．（文法の選択程度の違いしか無い）

つまり，xhtmlを用いればhtml5の機能のみならずxslを始めとしたxmlの仕組みも利用することが可能となるのです．

xhtmlにおけるxslの活かし方

それではxhtmlにおいてxmlの仕組みを活かす使い方とはどのようなものでしょうか？筆者が最も重要視しているのはxslのdocument関数を使った文書のマージです．例えば次のような使い方が考えられます．

• UIを部品化する．
  select要素やdatalist要素，ヘッダー部品等は別途専用のxmlに記述しておき，xslでメインの文書に挿入することができます．
• ファイル参照を一括管理する．
  scriptファイルやcssファイル等の複数のxhtml文書で共有している部分を別のxmlにまとめることが出来ます．

いずれも中規模〜大規模なwebサイトを構成する場合に，重要となる部分と言えるでしょう．

また，どちらもサーバー側でマージしてwebブラウザに返すことで対処できますが，xslを使った方法ではクライアント側のリソースを利用したり，サーバー側のアプリケーション機能が必要無いなどのメリットがあります．（もちろん，参照するファイルの数が増える分，httpリクエストの処理が増えます）

xslの作用順

このようにxslの利用価値について理解したところで，xhtmlに対しxslはどのように（どのタイミングで）作用するのでしょうか？
htmlには文書の本体のみならず，スクリプトファイルやスタイルシートファイル等，様々なファイルが相互的に動作しています．ですからこれらとxslとの実行順について考える必要があるのです．

筆者が調べてみた限り概ね次の順に行われるようです．

1. xhtml文書が読み込まれる．
   xslが定められているので，script要素等の実行は一旦中断される．
2. xslが適用され，xhtml文書が再構築される．
   複数のxslが指定されている場合は順次適用していく．
3. 再構築されたxhtmlの内容に従い，script要素が実行される．
4. イベントが発生する．

従って，スクリプトを記述する場合はその最終的な処理結果のみを考えればよく，xslを意識する必要はありません．

註：firefoxの場合

但し，firefoxでは若干異なり，同じスクリプトが2回実行されてしまいます．

1. xhtml文書が読み込まれる．
   その際にscript要素が実行されてしまう．
2. xslが適用され，xhtml文書が再構築される．
   複数のxslが指定されている場合は順次適用していく．
3. 再構築されたxhtmlの内容に従い，script要素がもう一度実行される．
4. イベントが発生する．

これは中々悩ましい問題で，例えばwindow.addEventListenerメソッドでイベントを登録する際に問題となります．初回のscript要素の処理が残存してしまうので，イベントの登録が重複することで，処理が2回行われてしまうのです．また，ライブラリの登録についても問題となるでしょう．

この問題は次の何れかの方法を使うことで回避できます．

• window.onloadプロパティに関数を登録する．
  初回の登録内容を破棄してしまう．
• 処理の有無を判定し，2度めの処理をスキップする．
• xslファイル側にscript要素を定義し，メインのxhtmlファイルにマージする．

firefoxでの注意点

実はこの他にもfirefoxにはxsl絡みに問題があり，思い通りに動作しないケースがあります．

• メインとなるxhtml文書にselect要素が含まれているとブラウザがクラッシュします．
  →xslからselect要素を挿入するようにします．
• xslでdocument関数を利用する場合，メインとなるxhtml文書よりも上の階層を参照した場合にブラウザがクラッシュします．

意外なことにfirefoxはxslにおいて非常に不安定です．クロスブラウザでの動作検証を行う場合は重点的に行いたいところです．

このようにxhtmlをベースとしたwebページ開発はそれほど一般的でなかったせいか，動作検証が十分に行われていない印象があります．その為，関連する情報に乏しくなかなか手を出しにくいところです．しかし，複雑化の一途を辿るhtml5技術を制御するための手段として，xhtmlやxslは有る意味枯れた技術ではあるものの，様々な可能性を秘めているものとしてもう少し注目が集まっても良い気がします．

まとめ

• webページをxmlベースで作るのであればxhtmlを選択する．
• xslによるxmlのマージ機能は規模の大きめなwebサイトの開発・運用にメリットがある．
• firefoxはxslに弱い．