本文へジャンプ

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名(非表示設定にしていない限り)とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

  • 閉じる [x]

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


送信されたすべての情報は安全です。

  • 閉じる [x]

ヒント: CSS2を使ってXML文書を表示する

XSLTよりも「低コスト」な方法

David Mertz, Ph.D (mertz@gnosis.cx), Author, Gnosis Software, Inc.
Photo of David Mertz
David Mertz氏は多くの分野で活躍しています。ソフトウェア開発や、それについて著述もしています。その他、学術政策理念について分野を問わず、関係する雑誌に記事も書いています。かなり以前には、超限集合論、ロジック、モデル理論などを研究していました。その後、労働組合組織者として活動していました。そして、David Mertz氏自身は人生の半ばにもまだ達していないと思っているので、これから何かほかの仕事をするかもしれません。

概要: カスタム・エディターやカスタム・ビューアーを使わない場合、XMLデータの解読はかなり困難です。XMLを手軽に表示するには、カスケード・スタイルシート (CSS2) をXMLに付加し、最新のWebブラウザーを使ってXMLを表示する方法があります (通常はIEで十分ですが、Mozillaはとくに優れています)。developerWorksコラムニストDavid Mertz氏が、今回のヒントの記事で、この代替的な方法について解説します。

日付:  2001年 12月 01日
レベル:  初級 この記事の原文:  英語
アクティビティー: 2892 ビュー
お気軽にご意見・ご感想をお寄せください: 


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エディターはコストがかかりすぎます (ライセンス購入費用はもちろん、学習カーブの点でも)。

今あるWebブラウザーを活用する

ほとんどの開発者のマシンには、素晴らしい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 */
                
a, i, b, sub, sup, p>code { display: inline; background-color: inherit; } a { color: blue; text-decoration: underline; } i { font-style: italic; } b { font-weight: bold; } b[class="red"] { color: red; } b[class="blue"] { color: blue; } b[class="green"]{ color: green; } sub { vertical-align: sub } sup { vertical-align: super } sub,sup { font-size: small }

ブロック・レベルの要素をもう少し追加すれば、最終的にXML文書を見映えよく表示できます。都合の良いことに、今回必要だった作業は、同じXMLの派生言語で書かれた文書を今後表示するたびごとに役立つでしょう。最新のWebブラウザーを使用する限り、(developerWorks作成プロセスの一環として現在行われているように) XMLソースを最初にHTML形式やPDF形式に変換しなくても、それと同等の見やすい外観を得ることができます。


表示例

XML派生言語文書に対応するCSS2スタイルシートを開発する手順は、単純です。もちろん、さまざまなタグに取り組む必要があるでしょう。よりデータ中心の文書の場合、定義の中でdisplay: table 属性を何らかの形で使用なければならないでしょう。余分の作業を少し行ってCSS2スタイルシートをセットアップするだけで、XML文書はずっと見やすくなります。

私が取り組んだこの文書がどのように表示されるか、図1を見てください。これに対応するソースは参考文献のリンクから入手できますが、読者のブラウザーのバージョンやプラットフォームによって表示の仕方が多少異なるかもしれません (ブラウザーの表示にご不満であれば、アップグレードしてください)。


図1. この文書をCSS2に基づいて表示した図 (Mozillaを使用)
図1. この文書をCSS2に基づいて表示した図 (Mozillaを使用)

参考文献

  • XMLの論考 第6回では、多数のカスタムXMLエディターを紹介しました (その多くはCSS2をサポートします)。

  • 今ご覧になっている記事のもとになったリソースの1つが、このヒントのXMLファイルです。このヒントを書く際に私が使用 (および修正) したCSS2スタイルシートもご覧ください。

  • CSSの特性について学べる優れたオンライン・リソースが、Miloslav Nic氏によるCSS2 Tutorial でご覧いただけます。とくに、CSSの特性の目次 (Index of CSS properties) が役立ちます。

著者について

Photo of David Mertz

David Mertz氏は多くの分野で活躍しています。ソフトウェア開発や、それについて著述もしています。その他、学術政策理念について分野を問わず、関係する雑誌に記事も書いています。かなり以前には、超限集合論、ロジック、モデル理論などを研究していました。その後、労働組合組織者として活動していました。そして、David Mertz氏自身は人生の半ばにもまだ達していないと思っているので、これから何かほかの仕事をするかもしれません。

不正使用の報告のヘルプ

不正使用の報告

ありがとうございます。 このエントリーは、モデレーターの注目フラグが設定されました。


不正使用の報告のヘルプ

不正使用の報告

不正使用の報告の送信に失敗しました。


developerWorks: サイン・イン


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。 プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。 お客様の姓名(非表示設定にしていない限り)とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

表示名をお選びください

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

(半角英数字で3文字以上31文字以下にする必要があります)


「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


この記事を評価する

コメント

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML
ArticleID=242482
ArticleTitle=ヒント: CSS2を使ってXML文書を表示する
publish-date=12012001
author1-email=mertz@gnosis.cx
author1-email-cc=dwxed@us.ibm.com

タグ

Help
このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。

スライダーバーを使用することで、より多く(少なく)タグを表示します。

人気のタグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するトップのタグを表示します。

マイ・タグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するお客様ご自身のタグを表示します。

このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。人気のタグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するトップのタグを表示します。マイ・タグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するお客様ご自身のタグを表示します。