長篇 Adventure Game「時の封土」制作にあたって

本文書は、「時の封土」制作にあたっての「技術的な側面」を述べております。実際のゲーム紹介にあたっては、下記のリンクを御覧くださいませ。

リニューアル版「時の封土」配布ページ

制作(というよりは改変)を手掛けた理由

XML や XHTML, そして DOM といった技術は、 Flash や DHTML などといった「見栄えがする技術」と比べ、一般の人達にとって、非常に地味で分かりにくい側面を持ちます。直截目に見えないことも理由の一つでしょうが、「堅苦しい」「理解し難い」などといった先入観も少なからず存在するからとも言えます。

また、 XML や XML DOM といった技術は、主にデータベース管理などで用いられており、一般の人達にとっては「敷居が高い」と思われているかも知れません。

そこで、今回の企劃の目的を、以下のように掲げることにしました。

そのような「地味な技術」で、どこまで「一般人にとって魅力のある」作品を作り上げることが出来るかを摸索する。
主だった Web ブラウザで、 XML/XHTML, XML DOM の実装状況を確かめる。

制作で拘った点

出来るだけ仕様に沿った記述を心がける。実装に不具合があったり未実装だったりする場合、やむを得ず独自拡張を使用する場合もあるが、 DHTML の技術には安易に流されないようにする。
極力 XML の仕様に準じる。文書もデータも XML/XHTML 文書 (text/html としてではなく) とし、DOM によりアクセスする。
文書、データ、スタイル、スクリプトは、それぞれ分離させる。とりわけ、 XHTML 文書にイベント情報やスタイル情報を紛れ込ませることは極力避ける。これにより、システムの構造を単純化させ、メンテナンス性を高めることが出来る。
出来るだけ多くの環境で動かせるようにする(とは言え、まともに XML をサポートしている WinIE と Mozilla のみではあるが)。

DOM/ECMAScript の使用にあたって

本ゲームのシステムを作り上げていく中で使用した XML/XHTML, DOM の各種仕様と、MSIE/Mozilla の各種実装状況の違いに関して、簡潔に紹介したいと思います。

読み込み

シナリオデータの記述に XML を採用。読み込みは XML DOM で行います。

MSIE では、 new ActiveXObject(Microsoft.XML.DOM) を宣言。その後、 document.load() で読み込みます。
Mozilla/Netscape では、 document.implementation.createDocument() を宣言し、document.load() を使います。

各種イベント

キーボード及びマウスイベントを埋め込む際には、 DOM で着目する要素にアクセスし、イベントを埋め込みます。(以下、アクセスする要素を element 表します。)

MSIE では、要素に直截イベントを記述。例えば、 element.onmouseover=... とします。
Mozilla/Netscape では、 DOM2 のメソッド element.addEventListener() を用います。

キーボードイベント

MSIE では、 event.keyCode で、キーの UCS コードを読み込みます。
Mozilla/Netscape では、 E.which が使えます(E はイベントオブジェクト)。 DOM3 で議論されている E.keyVal などは、まだ使用出来ないようです。

マウスイベント

MSIE では、独自仕様の event.srcElement で、 Mozilla/Netscape では、 DOM2 の E.target で、それぞれ当該要素を拾い出します。
ただし、拾い出した要素の場所を知る手段が DOM には存在しないので、やむを得ず、属性値や中身のテキストによって判断することにしました。

XML/XHTML と DOM/CSS の相性

MSIE の場合

基本的には DOM 1 + 独自拡張のサポートなので、それを考慮する必要があります。

getElementsByTagName() を使う場合、タグの名前には接頭辞も必要になります。ただし html: 接頭辞を有する要素は「常に XHTML の要素」と見倣されるので、接頭辞は不要です。
xml-stylesheet 処理命令によって「直截表示」されている要素へのアクセスには、基本的に HTML DOM が適用されます。また、Microsoft.XML.DOM で作られた文書へのアクセスには、 XML DOM が適用されます(詳細は後述)。
例えば、前者の文書では getElementById() が使えるのに対し、後者の文書では使用できないといった違いがあります。
また、前者の文書で createElement() によって要素を作成した場合、その要素は必ず XHTML の要素となり、 html: 接頭辞が自動的に附加されます。 CSS でスタイルを指定する場合は、セレクタを html\:xxx としなければなりません。

Mozilla/Netscape の場合

DOM 2 までほぼサポートされております。全ての文書に XML DOM が適用されます(ただし例外あり)。

XHTML の要素を作成するためには、 createElementNS("http://www.w3.org/1999/xhtml","xxx") としなければなりません。
当該要素へのスタイル指定は、xxx.style (HTML DOM) で指定出来ます。ただし、名前空間が http://www.w3.org/1999/xhtml と宣言されている要素に限ります。それ以外の要素への「局所的な指定」は、どうやら不可能みたいです (DOM 2 では getOverrideStyle がこれに相当するのですが、残念ながら未実装のようです)。
CSS のセレクタには、接頭辞は不要です。 html\:xxx と指定しても無視されます。ただし、例えば html|xxx のようには出来ます(html 接頭辞には、 @namespace で名前空間を設定しなければなりません)。