blob: 7d8723fc5db19c10e944f6dba3be14d98fe234f3 (
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: Creating toolbar buttons
slug: orphaned/Creating_toolbar_buttons
tags:
- Add-ons
- Extensions
original_slug: Creating_toolbar_buttons
---
<p> </p>
<p>この記事ではツールキットアプリケーション（Firefox、Thunderbird、Nvu など）に <a href="ja/XUL_Overlays">オーバレイ</a> を使用してツールバーボタンを追加する方法を説明します。<a href="ja/XUL">XUL</a> と <a href="ja/CSS">CSS</a> の基礎知識を備えた <a href="ja/Extension">拡張機能</a> の開発者が対象です。</p>
<p>また、Firefox の拡張機能の作り方の基礎に通じており、<a href="ja/Building_an_Extension">Hello World 拡張機能</a> を動作させられることも前提です。別のチュートリアルも <a href="ja/Custom_Toolbar_Button">利用可能</a> です。そちらは全体の過程を最初から見ていく形式です。</p>
<h3 id=".E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.AE.E4.BD.9C.E6.88.90">オーバレイの作成</h3>
<p>はじめに、機能を強化させたいツールバーを含む文書への <a href="ja/XUL_Overlays">オーバレイ</a> を作成する必要があります。オーバレイの説明はこのチュートリアルでは扱いません。<a href="ja/XUL_Tutorial/Cross_Package_Overlays">XUL チュートリアル</a> をご覧ください。</p>
<p>文書をオーバレイするには、その文書の URI を知らなければなりません。よくオーバレイされる文書の URI は <a href="#.E3.82.88.E3.81.8F.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.95.E3.82.8C.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E6.8C.81.E3.81.A4.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E3.83.AA.E3.82.B9.E3.83.88">このページの最後</a> にあります。</p>
<div class="note">
注意：
<i>
<a class="external" rel="freelink">chrome://messenger/content/mailWindowOverlay.xul</a></i>
にオーバレイする人がいます。これによって mailWindowOverlay.xul が適用されるすべてのウィンドウ（たとえばメインウィンドウやメッセージ表示ウィンドウ）にボタンが現れます。確認してください。</div>
<h3 id=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E8.BF.BD.E5.8A.A0">ツールバーボタンの追加</h3>
<p>ツールキットアプリケーションのツールバーはカスタマイズ可能です。そのため、拡張機能の練習として、直接ツールバーにボタンを追加するのではなく、ツールバーボタンをツールバーパレットに追加するというものがよくあります。直接追加することも可能ですが、非推奨であり、実装も面倒です。</p>
<p>ツールバーパレットにボタンを追加するのはとても簡単です。このようにこのコードをオーバレイに追加するだけです：</p>
<pre><toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="myextension-button" class="toolbarbutton-1"
label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
oncommand="MyExtension.onToolbarButtonCommand(event);"/>
</toolbarpalette>
</pre>
<p>注意：</p>
<ul>
<li>パレットの <code>id</code>（この例では <code>BrowserToolbarPalette</code>）はボタンを追加したいツールバーのあるウィンドウによって異なります。<a href="#.E3.82.88.E3.81.8F.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.95.E3.82.8C.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E6.8C.81.E3.81.A4.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E3.83.AA.E3.82.B9.E3.83.88">下</a> のよく使われるパレットの ID のリストを参照してください。</li>
<li><code>class="toolbarbutton-1"</code> によって、「アイコンと文字」モードで正常にツールバーボタンが表示されるようになります。さらにパッディングも調整されます。</li>
<li><code>oncommand</code> 属性で、ボタンがクリックされたときに実行されるコマンドを指定してください。ミドルクリックを扱いたい場合は <code>onclick</code> ハンドラを追加し、その中で <code>event.button</code> を確認してください。</li>
</ul>
<pre>onclick: function(event) {
switch(event.button) {
case 0:
// Left click
break;
case 1:
// Middle click
break;
case 2:
// Right click
break;
}
}
</pre>
<p>さらにボタンを追加するには、<code><toolbarbutton></code> 要素を <code><toolbarpalette></code> 要素の内側にさらに追加してください。<code><toolbarbutton></code> 以外の要素は <code><toolbaritem></code> 内に内包するようにしてください。</p>
<h3 id=".E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E8.A3.85.E9.A3.BE" name=".E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E8.A3.85.E9.A3.BE">ボタンの装飾</h3>
<p>ツールバーボタンのほとんどはアイコンが付いています。ボタンに画像を付けるには Mozilla のスキン機能を使用します。これについてよく知らないのであれば、<a class="external" href="http://www.borngeek.com/firefox/toolbar-tutorial/ch_5.html">Jonah Bishop によるすばらしいツールバーチュートリアルのスキンの使用に関するセクション</a> を読んでおくことをお勧めします。その記事ではボタンを作るだけというよりもむしろツールバー全体を作ることを扱っていますが、私たちがここで使うテクニックの説明としてはすばらしいものです。</p>
<h4 id=".E3.82.A2.E3.82.A4.E3.82.B3.E3.83.B3.E3.81.AE.E3.82.B5.E3.82.A4.E3.82.BA" name=".E3.82.A2.E3.82.A4.E3.82.B3.E3.83.B3.E3.81.AE.E3.82.B5.E3.82.A4.E3.82.BA">アイコンのサイズ</h4>
<p>ツールバーボタンは大小 2 種類のサイズを持ちえます。つまり、ツールバーボタンにそれぞれ 2 つのアイコンを持たせる必要があるということです。さまざまなアプリケーションでの大小両方のアイコンの寸法は以下の表のとおりです（他のアプリケーションについての情報もご自由に追加してください【訳註：英語版に追加すべき】）：</p>
<table>
<tbody>
<tr>
<th>アプリケーション（テーマ名）</th>
<th>大きいアイコンのサイズ</th>
<th>小さいアイコンのサイズ</th>
</tr>
<tr>
<td>Firefox 1.0 (Winstripe)</td>
<td>24x24</td>
<td>16x16</td>
</tr>
<tr>
<td>Thunderbird 1.0 (Qute)</td>
<td>24x24</td>
<td>16x16</td>
</tr>
</tbody>
</table>
<h4 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88">スタイルシート</h4>
<p>ツールバーボタンに画像を指定するために、以下の CSS ルールを使用してください：</p>
<pre>/* skin/toolbar-button.css */
#myextension-button {
list-style-image: url("chrome://myextension/skin/btn_large.png");
}
toolbar[iconsize="small"] #myextension-button {
list-style-image: url("chrome://myextension/skin/btn_small.png");
}
</pre>
<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.E9.81.A9.E7.94.A8" 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.E9.81.A9.E7.94.A8">スタイルシートの適用</h4>
<p>作成したスタイルシートをオーバレイファイルと Customize Toolbar ウィンドウの両方に適用するのを忘れないでください。オーバレイファイルに適用するには、この処理命令 (PI) をオーバレイファイルの頭に付けてください：</p>
<pre class="eval"><?xml-stylesheet href="<a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a>" type="text/css"?>
</pre>
<p>Customize Toolbar ウィンドウ (<tt><a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a></tt>) に適用するには、以下のような <tt>skin/contents.rdf</tt> を使用することのがよいでしょう：</p>
<pre><?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<Seq about="urn:mozilla:skin:root">
<li resource="urn:mozilla:skin:classic/1.0"/>
</Seq>
<Description about="urn:mozilla:skin:classic/1.0">
<chrome:packages>
<Seq about="urn:mozilla:skin:classic/1.0:packages">
<li resource="urn:mozilla:skin:classic/1.0:myextension"/>
</Seq>
</chrome:packages>
</Description>
<Seq about="urn:mozilla:stylesheets">
<li resource="chrome://global/content/customizeToolbar.xul"/>
</Seq>
<Seq about="chrome://global/content/customizeToolbar.xul">
<li>chrome://myextension/skin/toolbar-button.css</li>
</Seq>
</RDF>
</pre>
<p>Firefox/Thunderbird 1.5 向けの拡張機能では代わりに以下のような <a href="ja/Chrome.manifest">chrome.manifest</a> を使用すべきです：</p>
<pre class="eval">skin myextension classic/1.0 chrome/skin/
style <a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a> <a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a>
</pre>
<h3 id=".E3.82.88.E3.81.8F.E3.81.82.E3.82.8B.E9.96.93.E9.81.95.E3.81.84" name=".E3.82.88.E3.81.8F.E3.81.82.E3.82.8B.E9.96.93.E9.81.95.E3.81.84">よくある間違い</h3>
<p>これは拡張機能作者がよく起こす間違いとその症状、そしてその解決策のリストです。</p>
<p><b>問題点：</b> ツールバー上や Customize Toolbars ウィンドウ内に自分のアイコンではなく、デフォルトのボタン全体が表示される。</p>
<p><b>原因：</b> スタイルシートが正しく記述されていないか、またはスタイルシートが適用されていない。</p>
<p><b>解決法：</b> スタイルシートに誤りがないか、<tt>contents.rdf</tt>（または <tt>chrome.manifest</tt>）に誤りがないかを確認し、確実に <tt>customizeToolbar.xul</tt> に <a href="#.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.81.A9.E7.94.A8">スタイルシートを適用する</a>。</p>
<h3 id=".E3.82.88.E3.81.8F.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.95.E3.82.8C.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E6.8C.81.E3.81.A4.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E3.83.AA.E3.82.B9.E3.83.88" name=".E3.82.88.E3.81.8F.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.95.E3.82.8C.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E6.8C.81.E3.81.A4.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E3.83.AA.E3.82.B9.E3.83.88">よくオーバレイされるツールバーを持つウィンドウのリスト</h3>
<table class="fullwidth-table">
<tbody>
<tr>
<th>URL</th>
<th>アプリケーションと影響のあるウィンドウ</th>
<th>パレット id</th>
</tr>
<tr>
<td><small><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></small></td>
<td>Firefox - メインウィンドウ</td>
<td>BrowserToolbarPalette</td>
</tr>
<tr>
<td><small><a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></small></td>
<td>Thunderbird - メインウィンドウ</td>
<td>MailToolbarPalette</td>
</tr>
<tr>
<td><small><a class="external" rel="freelink">chrome://messenger/content/messenger...gercompose.xul</a></small></td>
<td>Thunderbird - 編集ウィンドウ</td>
<td>MsgComposeToolbarPalette</td>
</tr>
<tr>
<td><small><a class="external" rel="freelink">chrome://messenger/content/addressbo...ddressbook.xul</a></small></td>
<td>Thunderbird - アドレス帳</td>
<td>AddressBookToolbarPalette</td>
</tr>
<tr>
<td><small><a class="external" rel="freelink">chrome://editor/content/editor.xul</a></small></td>
<td>Nvu - メインウィンドウ</td>
<td>NvuToolbarPalette</td>
</tr>
<tr>
<td><small><a class="external" rel="freelink">chrome://calendar/content/calendar.xul</a></small></td>
<td>Sunbird - メインウィンドウ</td>
<td>calendarToolbarPalette</td>
</tr>
</tbody>
</table>
<h3 id=".E8.A9.B3.E7.B4.B0.E6.83.85.E5.A0.B1" name=".E8.A9.B3.E7.B4.B0.E6.83.85.E5.A0.B1">詳細情報</h3>
<ul>
<li>XulPlanet.com リファレンス: <a class="external" href="http://xulplanet.com/references/elemref/ref_toolbarbutton.html"><code><toolbarbutton></code></a>、<a class="external" href="http://xulplanet.com/references/elemref/ref_toolbaritem.html"><code><toolbaritem></code></a></li>
<li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=220220">ツールバーボタンのラベルの位置を調整する方法</a></li>
<li>拡張機能のインストール直後に（パレットにではなく）ツールバーにアイテムを追加することに関する <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=189667">フォーラムのスレッド</a>。この方法は非推奨であることに注意。</li>
<li>MDC 上には SeaMonkey のさまざまなウィンドウにボタンを追加することについての <a href="ja/Custom_Toolbar_Button/SeaMonkey">別のページ</a> があります。ChatZilla へのオーバレイについての便利な情報が載っています。</li>
</ul>
|
