XMLの解読は、人間にとって簡単なことではありません。XMLはすべてテキストであるとはいえ、各部の見かけ上の配置は、必ずしも各部の概念上の構造とそれほだ一致しているとは限りません。さらに、タグに埋もれたコンテンツを探し出さなければならいので、XMLにざっと目を通すのは骨の折れる作業です。もちろん、XMLは主に人間が直接見るための形式として意図されたわけではありません。通常、XMLソースは、人間の目に触れる前に他の何らかのものに変換されます。一般文章のXML文書の場合、通常、ターゲットはHTMLページや、(Formatting Object [FO] タグを介して) PDFファイル、あるいは印刷されたページだったりします。このように人間が読める形式に変換するために、XSLTがしばしば利用されます。データ中心のXML文書の場合、通常、ターゲットはDBMSのデータ・フォーマットや、XMLファイル読み取りアプリケーションがメモリー内に保持するなんらかの形式のものであったりします。
しかしdeveloperWorksの読者のほとんどは開発者です。エンド・ユーザーの便宜を図るために、たくさんのものを見なければならないのが我々の宿命です。表面には現れないフォーマット変換の道筋に何か障害があれば、さまざまな中間形式 (XMLなど) をつぶさに調べるのが我々の任務です。我々は開発過程でしばしば、分散アプリケーションの特定段階でどんなものが入出力されるかをシミュレートするサンプルXMLやテスト用XML文書を開発する責任を負います (しかも、現実の生成プログラムや顧客がまだ存在しないのに)。
他のさまざまな形式と比較して、XMLは生のまま扱うのが比較的簡単です。XML文書は、バイナリー形式のように、テキスト・エディターやテキスト・ビューアーで開くなどとんでもないという訳ではありません。それでも、XMLタグは目で見てわかりづらいものです (とくに、XML作成者が容易に読めるようにタブや改行文字などを入れなかった場合には)。生のXML文書をそのまま読む機会が非常に多い開発者は、私が以前にご紹介したいくつかのXMLエディターをご検討ください (参考文献を参照)。一方、XMLソース・ファイルをさほど頻繁に見る必要がない場合、またはXMLソース・ファイルを多数の人間が見る必要がある場合には、XMLエディターはコストがかかりすぎます (ライセンス購入費用はもちろん、学習カーブの点でも)。
ほとんどの開発者のマシンには、素晴らしいXMLビューアー ... 少なくとも、まずまずの性能のXMLビューアーがすでにインストールされています。最近のバージョンのInternet ExplorerおよびMozilla/Netscapeは、HTMLに加えてXML文書も表示するよう努力を払っています。OperaやKonquorerなど他のブラウザーもまた、CSS2を実装しています (Opera 5+ の機能は完璧で、Konqueror 2.2もまずまずの機能です)。一般的に言って、MozillaおよびNetscape 6は、CSS2スタイルシートの指定する形態でXML文書を優秀かつ正確に表示します。(少なくともバージョン6の) Internet Explorerの機能もかなり優秀ですが、display: inline 属性を無視するようです。このため、IE6は一般文章のXML文書の表示にはやや適しません (それでも、データ中心のXML文書の表示には適しています)。一方、IE6の利点はCSS2スタイルシートのないXML文書を階層ツリーで表示できることであり、サブツリーを折り畳むこともできます。
私自身は、通常、(同じdeveloperWorksのBenoît Marchal氏が提供した「XMetal規則」をいくつか適用して) XMetalを使用しています。または、「スマートASCII」と私が呼ぶ形式でソースを書き、developerWorksのXML記事原稿形式にテキストを変換する (私自身が作成した) txt2dw.pyツールを使用して、それをXMLに変換します。今回のヒントの記事を書く際には、練習のために、テキスト・エディター (およびMozilla 0.9.5) だけを使用することにしました。この練習のおかげで、WebブラウザーとCSS2を使った方式のあらゆる詳細を理解することができました。
では、私の取った方法を説明しましょう。以前のヒントをテンプレートとして利用し、適切なXMLの派生言語でいくらかの文章を書きました。それから、作業用の空のCSS2ファイルdW.cssを作成し、スタイルシート宣言として以下の行を私のXMLに追加しました。
<?xml-stylesheet href="dW.css" type="text/css"?> |
この時点で、上記のスタイルシート宣言だけでは、Mozillaは文書構造を何もわかりやすく表示しません。次に必要な作業は、XML文書を見やすくするためにCSS2スタイルシートを作成することです。XML文書の冒頭から順を追ってゆくのが簡単です。たとえば、developerWorks記事用の文書article.dtdの最初には、記事名を表す<seriestitle> などがあります。強調のために、これらを大きいフォント、太字、中央揃えにします。実際には、それらの前に、文書全体に適用されるデフォルトがいくつか設定されます (これらのデフォルトは、必要に応じて各コンテキストごとにオーバーライドできます)。リスト1は、サンプルCSS2ファイルの最初の数行です。
リスト1. 最初のスタイルシート・コンテンツ
$DOCUMENT {
font-family: "Times New Roman";
font-size: 12pt;
margin-top: 5px;
margin-left: 10px;
}
* {
display: block;
background-color: white;
padding: 2px;
}
seriestitle {
font-weight: bold;
font-size: 18pt;
text-align: center;
} |
この後、私は次に出現するそれぞれの要素ごとに作業を進めました (ここでは<papertitle>)。ブロック・レベルの要素をいくつか追加した後、すべてのインライン要素をそのように表示するのが便利だろうと考えました。そのために、DTDをざっと見て、関係のある要素を把握しました。こうしてリスト2の数行を組み込みました。
リスト2. インライン要素の処理
/* Inline Typographic Elements */
|
ブロック・レベルの要素をもう少し追加すれば、最終的にXML文書を見映えよく表示できます。都合の良いことに、今回必要だった作業は、同じXMLの派生言語で書かれた文書を今後表示するたびごとに役立つでしょう。最新のWebブラウザーを使用する限り、(developerWorks作成プロセスの一環として現在行われているように) XMLソースを最初にHTML形式やPDF形式に変換しなくても、それと同等の見やすい外観を得ることができます。
XML派生言語文書に対応するCSS2スタイルシートを開発する手順は、単純です。もちろん、さまざまなタグに取り組む必要があるでしょう。よりデータ中心の文書の場合、定義の中でdisplay: table 属性を何らかの形で使用なければならないでしょう。余分の作業を少し行ってCSS2スタイルシートをセットアップするだけで、XML文書はずっと見やすくなります。
私が取り組んだこの文書がどのように表示されるか、図1を見てください。これに対応するソースは参考文献のリンクから入手できますが、読者のブラウザーのバージョンやプラットフォームによって表示の仕方が多少異なるかもしれません (ブラウザーの表示にご不満であれば、アップグレードしてください)。
図1. この文書をCSS2に基づいて表示した図 (Mozillaを使用)
-
XMLの論考 第6回では、多数のカスタムXMLエディターを紹介しました (その多くはCSS2をサポートします)。
- 今ご覧になっている記事のもとになったリソースの1つが、このヒントのXMLファイルです。このヒントを書く際に私が使用 (および修正) したCSS2スタイルシートもご覧ください。
- CSSの特性について学べる優れたオンライン・リソースが、Miloslav Nic氏によるCSS2 Tutorial でご覧いただけます。とくに、CSSの特性の目次 (Index of CSS properties) が役立ちます。
