webページとしてxmlを利用する(1) 直接xmlで

webを構築している技術としてhtmlと並んで重要なxmlですが，直接目にする機会はそれほどありません．せいぜいajaxやwebサービス等のあくまで裏方としての利用に留まっているのではないでしょうか．しかしwebブラウザはこのxmlを処理するための仕組みを沢山備えており，それらを無視するのはあまりに勿体無いと思います．
そこで本記事では生のxmlをwebブラウザで表示する目的で利用する事を考えてみます．

xmlとは

xmlは様々なデータをテキスト形式で表現するための仕様で，htmlとは同じsgmlを親とする兄弟にあたります．

その一方でhtmlが主に文書を表す規格であるのに対し，xmlではより広範な用途で用いる事を想定していて，文法（要素名や属性名等）を利用者側で自由に定義出来ることとなっています．

その為，xmlをメタ言語，つまり「言語を作るための言語」と呼ぶこともあり，実際，グラフィックを定めるsvgはこのxmlをベースとしていますし，htmlをxml形式に再定義したxhtmlといったものもあります．

<?xml version="1.0"?>
<docs>
 <page>text1</page>
 <page>text2</page>
</docs>

xmlをwebブラウザで表示する

さて，このようにxmlはhtmlと近しい技術なのですが，htmlと同様にwebブラウザで表示させることができます．

しかしxmlをwebブラウザで表示すると，htmlと異なり文書構造がツリー上に表示されてしまいます．なぜこのような結果となるのかというと，xmlそのものにはどのように表示させるべきかと言った情報（スタイル） が定められていないからです．htmlではデフォルトのスタイルが定められているため，（見栄えはしないものの）ある程度文書として理解できる書式で表示されるのです．

xmlにスタイルを指定する

それではxmlにスタイルを指定することは出来るのでしょうか？
実は有ります．その方法としては主に次の方法が挙げられます．

1. xml-stylesheet処理命令を指定する
   xml宣言の直後に参照するスタイルシートファイル（css/xsl）を指定します．
2. xhtmlのstyle要素を挿入する
   名前空間として「http://www.w3.org/1999/xhtml」を指定する．
3. xhtml・svg・mathmlの何れかの要素を挿入する

※仕様化されてます

Unstyled XML documents

http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#unstyled-xml-documents

1番の方法は最もスタンダードな方法です．また2番の方法は一般的でないものの，xmlに直接cssを記述する方法として有効です．
cssの中でhtmlの場合と同様のセレクタを記述し，スタイルを指定する事ができます．

<?xml version="1.0"?>
<docs>
 <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
  page{
   display:block;
   width:100px;height:100px;
   background-color:red;
   border:1px solid pink;
  }
 ]]></style>
 <page>text1</page>
 <page>text2</page>
</docs>

意外な動作を採るものがこの3番です．要するに自作のxmlであっても，何らかの目的でxhtmlやsvgを挿入していた場合，webブラウザが勝手にグラフィックとして解釈するのです．

なお，スタイルが指定されたxml文書では（独自の） 要素全てがhtmlにおけるフローコンテンツとして解釈されます．従ってcssではそれに準じたスタイルを記述することになります．つまり，borderやdisplayプロパティ等を指定することができます．また，::before，::after擬似要素を挿入することすら可能です。

スタイル指定の制限

このように， xmlにはhtmlと同等のスタイル指定が出来るのですが，一点注意すべき点があります．htmlではdiv要素などに直接sytle属性にcssを記述することが出来ました．が，同様のことを自作の要素で行なっても何も起こりません．なぜこのような動作となるのでしょうか？

これはwebブラウザ内部でどのようにdomが構築されているかを考えると納得できます．

webブラウザではxmlソースを読み込み，domに展開する時に要素の名称だけでなく，その要素が所属している名前空間を重要視します．その際，xhtmlに属する要素の場合はHTMLElementオブジェクトに，svgに属する要素の場合はSVGElementオブジェクトに変換し，それ以外は単なるElement（ブラウザによってはXMLElement）オブジェクトとして解釈します．

この時Elementオブジェクトにはstyle属性に対する扱いが定められていません．従って自作の要素に対するstyle属性は無視されるのです．

つまりxmlに対するスタイルの指定はstyle要素及びcssファイルのみ有効なのです．

xmlへのスクリプトの挿入

先ほどの例ではxmlにxhtmlのstyle要素を挿入することでスタイル付けすることができました．それではscript要素ではどうでしょうか？

実際に試してみるとxmlにxhtmlのscript要素を挿入した場合もスクリプトが動作します．この時注意すべき点としてはwindow.documentが参照しているオブジェクトが単なるDocument（もしくはXMLDocument）オブジェクトになる事が挙げられます．その為，HTMLDocumentを想定したライブラリは正しく動作しない可能性があります．

<?xml version="1.0"?>
<docs>
 <script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
  window.onload = function(){
   alert(document);
   document.querySelector("page:nth-of-type(2)").textContent = "テキスト";
  };
 ]]></script>
 <page>text1</page>
 <page>text2</page>
</docs>

また，要素の検索等はHTMLDocument等と同様に扱えますが，HTMLElementのもつstyle属性等は一切存在しないため，要素の操作は全てgetAttribute,setAttributeメソッドで行う必要があります．

xmlをwebページに利用する際の注意点

このようにある程度の制限はあるものの，スタイルシートが使えてスクリプトも実行出来るのであれば，無理にhtmlを採用する必要は無いように見えます．html5が定めるスキーマに囚われずとも適切な構成をとれる筈です．

が，実際に試してみると思わぬ不具合に悩まされることでしょう．
例えば，htmlではurl文字列に指定したハッシュ値（#）によりスクロールバーの位置が変化しますが，xmlをベースとした場合は必ずしもこのとおりとなりません．

これはhtmlとしての機能がHTMLElementオブジェクトで実装されており，より抽象的なElement要素では未定義であることに由来します．その為xmlをwebページに応用した場合はブラウザによってその解釈が分かれてしまっているのです．
※FileReaderやXMLHttpRequestオブジェクトなどの文書形式に依存しない仕組みは利用可能です．

このことから，xmlにおけるスクリプティングでは文書内容の操作くらいしか役に立ちません．
※もちろんxhtmlの要素を使えば良いのですが，それはもうxhtmlを使った構成と言えるでしょう．

まとめ

• xml文書にcssやjavascriptを仕込むことは制限があるものの原理的には可能である．
• xml文書をwebページに流用した場合，htmlとしての仕組みは使えない．
• 以上のことから，xml文書をhtmlの代わりとして利用するのは用途が限られる．

このようにxmlを直接webページとして利用するにはハードルが高い事がわかります．それではxmlの良さを生かしつつwebページを作ることは出来ないのでしょうか？

実はできます．xhtmlを利用するのです．続きます．