Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Skinning XUL Files by Hand

この記事は Mozilla Japan 翻訳部門または関連グループにより過去に翻訳された文書を移行したものです。 移行元の文書。よって、英語版と内容が異なる場合や、MDN の他の記事との整合性がとれていない場合があります。

スキンとは何か?

XULファイルのスキンとは、その外観や全体的なスタイルのことです。XULでは、スキンは CSS と画像から生成されます。 XULファイルをスキニングするとは、そのファイルのスタイル情報を変更して、全体的な外観を変えることです。もうすぐ XUL ファイルを動的かつ完全にスキニングすることができるようになります ―― ボタンを押したり、メニューからスキンを選択したり、Webからスキンを受け入れたりといった方法によって。 その日が来たら、グローバルスキンファイルで定義されているスキンが、全てのアプリケーション ―― Mozillaブラウザのような ―― に適用されるでしょう。そして、色々なウィンドウやパーツ全ては統一的に見えるようになります。 しかしそれまでは、ファイルをスキニングするのにいくばくかは手でやらなければなりません。この記事は、スキンというものと XULのスキン作成を理解する始めの助けとなり得ます。 この記事は、あなたが少なくとも XUL とそれを記述する Application Object Model についての基礎的な理解があることを仮定しています。 ここの説明をたどっていくにつれて、XULのスキンを作って、対象とするエレメント全てのクラスを指定してそのスキンを適用する過程をたどることになります。 スキンが単一の CSS に存在するとしましょう、名前は drxul.css とします。後に分かりますが、CSS はひとつひとつの要素、要素クラス、擬似クラス、無名クラスのスタイルを定義できるような柔軟性を提供しています。

一方、スキンという術語と対照的に、「クロム(chrome)」はスキンその内容アプリケーションやウィンドウの一部に必要とされる地域化やプラットフォーム固有のものを示します。スキンはインターフェースのスタイルや見え方それだけですが、クロムはスタイルと内容と構造です。クロムはアプリケーションのフロントエンド全てです。

XULの見え方(と動作!)を規定するもののほとんどは、それぞれの XUL エレメントへの CSS です。たとえば CSS-2 では、全てのエレメントにその親エレメント中での絶対位置を指定することができます。また、ボタンの挙動の多くはスタイル群とそれらを動的に交換する JavaScript に基いたイベントモデルによります。 現在の Mozilla のグローバルスキンは、ボタンのいくつかのクラスにこの基本的な挙動を定義しています。ボタンの class 属性がグローバルスキンで定義されたあるクラスにセットされると、そのボタンはグローバルスキンでスタイリングされます。 例えば、ボタンを以下のように定義した場合:

<titledbutton '''class="push"''' value="Push Me" />

次のかなり単純なスタイル定義が適用されます。

titledbutton.push {border: 1px.;}

これらいくつかのボタンクラスや、たくさんの他の要素が定義されているグローバルスキンは、以下のセクションで説明されています。 あなたのエレメントのスタイルに Mozilla のグローバルスキンで既に定義されているクラスを使いたいなら、そのようにして構いません。 しかし、あなたの XUL ファイルに特別の新たなボタンクラスを定義したいかもしれません。その場合はスタイル情報はあなたのカスタムCSSファイル中で全て定義されることになるでしょう。

グローバルスキンを読む

独自のスタイルシートを作り始める前に、グローバルスキン中の基本的なスタイル定義に慣れておくことはとても重要です。カスケーディングスタイルシートは、あっという間に複雑なものになり得ます。ある型の要素や個別の要素、要素クラスなどにスタイルを適用できる能力は、スタイル情報に冗長性や衝突の可能性を作り出します。 これを避けるために、カスケーディングスタイルシート仕様の作成者たちは、先行優位のルールを決めました。 このルールは、あるエレメントにいくつの異なったルールが定義されているのか、どこにスタイル定義が現れるか(CSSファイルの外部か内部かなど)、どこに要素自身が現れるか、さらに他の難解な変量を見ます。 たとえば、あなたのカスタムスタイルシートに特定の ID を持つボタンへのスタイルを作るとすると、グローバルスキン中のボタンに対するより基本的なスタイル情報が、あなたの新しいスタイルの前に適用され、あなたのスタイルは適用されません。 グローバルスキンがそのスキンを定義するやり方と、一般的にどのエレメントを指定しているのかを確実に意識しておいてください。

グローバルスキンの目的は、アプリケーション全体の外見や、動的に変更されるクロムを作ることなので、本当にそうしたいのでなければ、カスタムCSSファイル中にグローバルスキンに反するスタイル情報を作るべきではありません。 もしあなたの XUL ファイルが Mozilla のような、スキン可能なより大きなアプリケーションの一部となるのでしたら、アプリケーションが動的に再スキニングされた時には XULファイルでグローバルな変更を拾いあげてほしいでしょう。 あなたの XUL ファイルが外観を一貫し、全体でスキンが壊れないように保つために(画像のように、あなたのスタイルがグローバルスキンの一部に依存している場合)、グローバルスキンとあなたのカスタムCSSファイルを一緒にロードするか、以下のような指示でグローバルスキンをあなたのスタイルシートにインポートするかして、グローバルスキンでスタイルルールを使います。

@import url(chrome://global/skin/)

グローバルスキン、XUL、そして Mozilla に友好的なスキンの作り方についてのガイドラインとしては、Writing Skinnable XUL and CSS のドキュメントを参照のこと。

スタイルシートの構文

グローバルスキンに親しむために、Mozillaアプリケーションの bin/chrome/global/skin ディレクトリ中にある global.css というテキストファイルを開いてください。カスケーディングスタイルシートでは、スタイル定義は以下のような基本的な形式を持ちます:

element {
	style attribute1: value;
	style attribute2: value;
	style attribute3: value;
}

たとえば、次の定義 ―― グローバルスキンの多くのメニューのスタイル定義との重大な衝突は無いものとします ―― は全ての XUL メニューが 1ピクセルのボーダー、light blue の背景色、10ポイントフォントで表示されるようにします:

menu {
	border: 1px;
	background-color: lightblue;
	font-size: 10pt.;
}

これら基本的な要素スタイルルールに加えて、CSS はまたスタイル情報の適用において要素クラスと要素ID を提供します。以下の表に、これら 2つの共通なスタイル定義の型の基本的な形式を示します:

Class ID
element.class { attribute: value;} element#id { attribute: value;}
menu.baseline { 
	border: 0px;
	font-size: 9pt;
}
menu#edit { color: red;}

Other Style Subgroups

文脈上の下位のもの ―― <p>要素や <div>要素中のイタリック体テキストのような、他の要素中にある要素 ―― は CSS ではグループ化できます。 しかし、XUL のスタイリングのためにはこれは極めて役に立たない方法で、Mozilla開発コミュニティで顰蹙を買っています(詳しくは、もう一度Writing Skinnable XUL and CSS のスキニングガイドラインを参照してください)。 CSS2 もまたスタイルに要素をグループにするいくつかの新たな方法を提供します。これらは Mozilla でよく出てくるのでここで簡単にまとめておきますが、詳しくは他の記事に周します:

擬似クラス 親子
element:pseudo-class { attribute: value;} parent > child { attribute: value;}
button:hover{border: 1px;}
menu#file > menuitem { }
擬似クラスは要素の状態を反映します: たとえばマウスがボタンの上を動いたときには、hoverイベントが発火して、適切な擬似クラススタイルシートルールが適用されます。 親子関係は、前述の文脈サブグループよりも軽いものです。これは要素の全ての部分木から下位要素を探します。

最後に、Mozilla はいくつか特別の拡張を CSS 仕様に加えています。これは XUL がブラウザ中でスキニングされるような方法を、さらにコントロールできるようにするためです。これらの拡張はやがて別の記事、[xulnote_moz-ext.html Mozilla's CSS Extensions] に述べられます。

実際のグローバルスキンファイル: いくつかのコメントの後に、<window>とダイアログオブジェクトの基本的なスタイル情報が始まります。 それらの後に、グローバルスキンは全ての基本的な XULウィジェットのスタイルを定義します: box, toolbar, いくつかの button クラスなど。 これらのルールにあるほとんどのスタイル属性はボーダー、フォント情報、カラー、マージンに関係するものであることに注意してください。 一般的に、これらはアプリケーションのグローバルスキン中でのみ定義されるべきスタイルタイプです。というのも、これらはアプリケーションに一定の全体的外観を与えるようなスタイルだからです。多くのエレメント、特にボタンは、次のようなスタイル文で付随される画像を持ちます:

titledbutton.button32 {
	background-repeat: no-repeat;
	background-position: 50% 0px;
	background-color: transparent;
	color: #CCFFFF;
	min-width: 36px;
	min-height: 36px;
  border: 1px solid transparent;
	padding: 0px;
	margin-left: 1px;
	margin-bottom: 1px;
	margin-top: 6px;
	margin-right: 6px;
	font-size: smaller;
	background-image:url("chrome://global/skin/button32-bg.gif");
}

どのひとつのボタンクラスにも、いくつかの擬似クラスと属性セレクタスタイルが定義されているだろうことに注意してください(この後者のものについては、[xulnote_moz-ext.html CSS and Mozilla] で述べようと思います)。あなたの XUL 中にボタンをあるクラスで定義した場合、そのボタンの様々な状態へのスタイル定義の全てを利用します。この理由により、グローバルスキン中に現れるボタンクラスを使い、必要なときにのみ新たなクラスを作ることはかなり効果的になり得ます。

グローバルスキンをブラウズして、何があるかに慣れ親しんでください。次のいくつかの節では、このスタイル情報をカスタムスタイルシートにインポートして、あなたのXULの新たなスタイルルールで拡張することになります。

XUL中でスタイルシートをロードする

XULファイルをスキニングしましょう、カスタムスキンは [xulnote_sample1.txt xulnote_sample1.xul] です。この XUL ファイルで作業するために、ローカルに sample1.xul と名前を変えて保存してください。

インラインでスタイルを適用するのは XUL でも完全に正しい動作ですし、いくつかの稀なケースでは良い考えです。しかし、一般的に XUL スキンは実際の XUL 構造と分けるようにするべきです。機能と形式とのこの独立は、XUL のすばらしい利点であり、見落とすべきではありません。

CSSファイルは拡張子が .css である通常のテキストファイルです。 この CSS ファイルは XUL ファイルのかなり上の方にある処理指示で適用されます。 XULファイルがXULパッケージかクロムに入っていれば、スタイルシートの処理指示はパッケージの階層を反映します。後にこの特別な URL の型を議論します。 スタイルシートが外部にあり、同じディレクトリに置かれている現在の例のように、XULファイルがスタンドアロンであれば、ファイル先頭の処理指示は次のようになります:

<?xml-stylesheet href="sample.css" type="text/css"?>

XULファイルは実際にはいくつのスタイルシート処理指示でも持てます: それぞれのスタイルシートは XUL がロードするものです。 しかし一般的には、あなたの新たなスタイルルールを作るスタイルシートへグローバルスキンを import してから、新たなスタイルシートをロードして、グローバルスキンとあなた自身のスタイルシート中にあるスタイルの全てを得るのがより望ましい形式です。

新しいスタイルシートを作る

XULファイルとは異なり、CSSファイルはどんな特有の構造も、先頭の前文情報も必要としません。CSS は階層構造にあるエレメントにスタイルを定義することができますが、グローバルスキンで見たように、それ自身が階層的であるということではありません。 その代わりに、CSSファイルは通常は単に、レンダリングエンジンによりそれぞれの要素やクラスに適用されるスタイル定義のリストです。

ここにとても短い(しかし完全な!)、XULファイルで参照・利用されるだろうカスケーディングスタイルシートがあります:

toolbar.nav-bar {
	background-image: url("chrome://navigator/skin/navbar-bg.gif");
	padding: 0px;
	padding-bottom: 2px;
}

box#navbar {
	background-color: lightblue;
}

A:link { 
	color: #FA8072; 
}

このスタイルシートは、上で述べてある 3つの異ったスタイル定義の型を見せています。それぞれの型は異なったエレメントのグループ化をしています。 最初の定義では、"."クラスセレクタを利用して "nav-bar" というクラスの全ての XUL ツールバーのスタイル情報を定義しています。同様にセレクタとして使用されますが、ユニークでなければならない ID とは異なり、class 属性は、選びたい XUL エレメントの集まりに、指定したスタイル情報を使用することができます。 次のように定義されたツールバーエレメントは:

<toolbar '''class="nav-bar"''' id="nav3">
  <titledbutton value="click me" />
  <titledbutton value="don't click me" /> 
  ...
</toolbar>

上の CSSの例にある toolbar.nav-bar セレクタの後のブロックにある CSS プロパティでスタイリングされます。 同様に、次の要素は ID セレクタを用いて単独の XUL 要素にスタイル情報を適用します。id属性は XUL 中でユニークでなければなりませんので、"navbar" という ID の XUL box だけが、そのブロック中のスタイル情報をとりあげます。

3番目のセレクタのタイプである擬似クラスは、HTMLドキュメント中に普通に見られるハイパーリンクのインラインスタイル定義中に見るであろうもののひとつです。 擬似クラスは ":"セレクタで、あるエレメントに結び付けらています(そうでないこともあります: 擬似クラスで表される状態のどのエレメントにもスタイルを適用するように定義することもできます)。この 3番目のスタイル定義タイプでは、"A"要素が link として活きているときのみ、そのブロック中にあるスタイル定義をとりあげます。 最後のタイプは、CSS2 での新らしいものです。

XULスキンを作り始めるために:

  1. XULファイルの先頭にスタイルシート処理指示を加える。
    <?xml-stylesheet href="sample.css" type="text/css"?>
  2. sample.cssという名の新しいファイルを作る。
  3. そのファイルに次の行を加える:
    @import url(chrome://global/skin/)
    
    box#bbox { background-color: lightgrey; } 
    
    titledbutton#rd {background-color: red; color: white;}
    
  4. これを XUL ファイルと同じディレクトリに保存する。

作業している XUL ファイルをリロードすると、XULファイルのナビゲーションエリアに作った box要素は次のように現れます:

スタイルシート無し

グローバルスキンだけ

グローバルスキンをインポートした sample.css

スキンで覆われたブラウザはそのままで全て見ることはできません ―― この基本的なスキンは、色情報をオーバーライドしていますので、skinning guidelines に少し違反していることに注意した方がいいでしょう。しかし、XUL構造と CSS のスタイルルールの組み合わせにどんな可能性があるか感覚をつかむことができます。

Thinking Skins

XUL や他の Mozillaクロスプラットフォームツールの細目に立ち入りすぎてしまい、これらの技術の目的やインパクトの景色を失うことが時にはあります。XUL と CSS の結合はかなりの柔軟性を提供するので、おそろしいと思われることもあるでしょう。

XULとそのスキンを分離する目的 ―― そしてグローバルスキンと、あなたの作るものも含めて全てのカスタムスタイルとの分離の目的 ―― は、Mozillaブラウザのようなアプリケーションの動的なスキニングを可能にすることです。 この記事であなたが手で行なったことは、chrome registryという機構によって、動的にかつより完璧に行われるようになります。chrome registry は Windows registry のような、ユーザーのソフトウェアと環境についての情報が必要なときに記録されアクセスされるデータベースです。 ソフトウェアコンポーネント、ユーザー、そして Mozillaブラウザからアクセスされる Webページでさえもが、この chrome registry を更新し、グローバルスキンを変更することができます。 さらに、位置指定(positioning)のような新たな CSS2 convention が到来すれば、XULファイル中の基本構造の表現や動作の変更は劇的なものになるでしょう。

この情報全てをテキストで ―― 分布された自然状態と、単一のクロムとして定義される必要があるテキストの単なるかたまりに追加されるテキストで ―― 作成する構文は、ときにはprogress普及を遅くするように思えます。【訳注: ?】 しかし、XUL を利用する利点は、標準の C++ ツールキットを使う利点よりもかなり上回っているので、XULのオーサリングは別の開発のカテゴリで正しく考えられるべきです。 XULは、あるエヴァンジェリストが表現したように、インターフェース設計とアプリケーション開発の「民主化」を意味します。このことについては最後のアーティクルで詳しく話すつもりです。

手短かにいえば、XUL は誰もが C++/MFC/Visual IDE/テンプレートツールキットのユーザーが作るのと同じくらいに複雑で魅力的なインターフェースを作るツールを提供します。さらに、XUL はそれをあるやり方で行うので、それらのインターフェースはどのプラットフォームでも利用できます。 あなたは第四世代プログラミング言語(4GL)の vagueries について知る必要はありませんし、他のものを犠牲にして特定のプラットフォームやそのネイティブウィジェットの機構について熟知する必要もありません。

XUL技術は相互運用可能であり、一貫していて、クロスプラットフォームで、freeで、そしてすぐに利用できるようになります。 このようなインターフェースの製作物が民主化されているだけでなく、言い替えるならば、これらのインターフェースの消費と配布も同等に民主的です。 真に民主的なあらゆるもののように、それらを動作させるには少しばかり騒ぎたてなければなりません。しかしひとたび事態を収めれば、XULファイルとスキンを作るのは、HTML で基礎的な Webページを作るのと同じくらい易しいことに気付くでしょう。

Original Document Information

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Deq, Mgjbot
 最終更新者: Deq,