aboutsummaryrefslogtreecommitdiff
path: root/files/ja/archive/add-ons/using_the_stylesheet_service/index.html
blob: 9a3f80adcfded604ccfa7becdabe3ca41eaf227d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
---
title: Using the Stylesheet Service
slug: Archive/Add-ons/Using_the_Stylesheet_Service
tags:
  - Add-ons
  - Extensions
translation_of: Archive/Add-ons/Using_the_Stylesheet_Service
---
<p>
</p>
<h3 id=".E3.81.AF.E3.81.98.E3.82.81.E3.81.AB" name=".E3.81.AF.E3.81.98.E3.82.81.E3.81.AB"> はじめに </h3>
<p><a href="ja/Firefox_1.5">Firefox 1.5</a> では、<code>userContent.css</code> ファイルや <code>userChrome.css</code> ファイルを使うことなくユーザスタイルシートや UA スタイルシートを <a href="ja/Extension">拡張機能</a> で扱えるようにする API が追加されました。この API は <a href="https://dxr.mozilla.org/mozilla-central/source/layout/base/nsIStyleSheetService.idl" rel="custom">nsIStyleSheetService.idl</a> で定義されています。
</p><p>そのようなスタイルシートの追加や除去はページが次にロードされるときに効果を現します。登録されたスタイルシートは再起動時には登録が解除されます。
</p><p>このサービスを使用して追加されたスタイルシートは、chrome 文書にも content 文書にも適用されます。XUL 文書にスタイルシートを適用したい場合は、正しい名前空間を宣言するのを忘れないでください。
</p><p>この文書での例はすべて <a href="ja/XPCOM">XPCOM</a> を使った <a href="ja/JavaScript">JavaScript</a> で示します。
</p>
<h3 id="API_.E3.81.AE.E4.BD.BF.E7.94.A8" name="API_.E3.81.AE.E4.BD.BF.E7.94.A8"> API の使用 </h3>
<p>以下の例の <code>"<a class=" external" rel="freelink">chrome://myext/content/myext.css</a>"</code> という文字列はただの例です。それをロードしたい CSS ファイルの URL に置換してください。
</p><p><code>USER_SHEET</code><code>AGENT_SHEET</code> に置き換えることもできます。これは CSS カスケードにおいてシートをどこに配置したいかによります。詳しくは <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order">CSS の仕様</a> をご覧ください。
</p>
<h4 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E8.BF.BD.E5.8A.A0"> スタイルシートの追加 </h4>
<p>スタイルシートサービスを使用するには、サービスへの参照を取得し、URI を作成し、その URI をスタイルシートサービスの <code>loadAndRegisterSheet</code> メソッドに渡してください。
</p>
<pre class="eval">var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("<a class=" external" rel="freelink">chrome://myext/content/myext.css</a>", null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
</pre>
<div class="note"><b>注意:</b><code>loadAndRegisterSheet</code> は同期してスタイルシートをロードするため、ローカル URI を使ったこのメソッドしか呼び出すべきではありません。</div>
<h4 id=".E3.82.B7.E3.83.BC.E3.83.88.E3.81.8C.E3.83.AD.E3.83.BC.E3.83.89.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E3.81.A9.E3.81.86.E3.81.8B.E3.81.AE.E5.88.A4.E5.AE.9A" name=".E3.82.B7.E3.83.BC.E3.83.88.E3.81.8C.E3.83.AD.E3.83.BC.E3.83.89.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E3.81.A9.E3.81.86.E3.81.8B.E3.81.AE.E5.88.A4.E5.AE.9A"> シートがロードされたかどうかの判定 </h4>
<p>拡張機能を作成し、<code>onload</code> ハンドラ内でスタイルシートを追加する場合は、シートがすでに追加されているかどうかを確かめるべきです。それを確かめないと、ウィンドウがロードされるたびにシートを追加してしまうことになります。
</p>
<pre class="eval">var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("<a class=" external" rel="freelink">chrome://myext/content/myext.css</a>", null, null);
if(!sss.sheetRegistered(uri, sss.USER_SHEET))
  sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
</pre>
<h4 id=".E4.BB.A5.E5.89.8D.E3.81.AB.E7.99.BB.E9.8C.B2.E3.81.95.E3.82.8C.E3.81.9F.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E9.99.A4.E5.8E.BB" name=".E4.BB.A5.E5.89.8D.E3.81.AB.E7.99.BB.E9.8C.B2.E3.81.95.E3.82.8C.E3.81.9F.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E9.99.A4.E5.8E.BB"> 以前に登録されたスタイルシートの除去 </h4>
<p>以前に登録したスタイルシートを除去したい場合、単純に <code>unregisterSheet</code> メソッドを使用してください。
</p>
<pre class="eval">var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var u = ios.newURI("<a class=" external" rel="freelink">chrome://myext/content/myext.css</a>", null, null);
if(sss.sheetRegistered(u, sss.USER_SHEET))
  sss.unregisterSheet(u, sss.USER_SHEET);
</pre>
<h3 id=".E5.BE.8C.E6.96.B9.E4.BA.92.E6.8F.9B.E6.80.A7" name=".E5.BE.8C.E6.96.B9.E4.BA.92.E6.8F.9B.E6.80.A7"> 後方互換性 </h3>
<p>Firefox 1.0 (Gecko 1.7) 系のブラウザをサポートする必要がある場合、その新しいスタイルシートサービスが利用できるかどうかを確かめる必要があります。<code>Components.classes</code> オブジェクトにそのコントラクト ID があるかどうかを探すことで確かめることができます。たとえば:
</p>
<pre class="eval">if("@mozilla.org/content/style-sheet-service;1" in Components.classes)
{
  // 新しいスタイルシート API が利用可能
}
else
{
  // 利用不可
}
</pre>