From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../orphaned/creating_toolbar_buttons/index.html | 169 +++++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 files/ja/orphaned/creating_toolbar_buttons/index.html (limited to 'files/ja/orphaned/creating_toolbar_buttons/index.html') diff --git a/files/ja/orphaned/creating_toolbar_buttons/index.html b/files/ja/orphaned/creating_toolbar_buttons/index.html new file mode 100644 index 0000000000..01d73d198e --- /dev/null +++ b/files/ja/orphaned/creating_toolbar_buttons/index.html @@ -0,0 +1,169 @@ +--- +title: Creating toolbar buttons +slug: Creating_toolbar_buttons +tags: + - Add-ons + - Extensions +--- +

 

+

この記事ではツールキットアプリケーション（Firefox、Thunderbird、Nvu など）に オーバレイ を使用してツールバーボタンを追加する方法を説明します。XUL と CSS の基礎知識を備えた 拡張機能 の開発者が対象です。

+

また、Firefox の拡張機能の作り方の基礎に通じており、Hello World 拡張機能 を動作させられることも前提です。別のチュートリアルも 利用可能 です。そちらは全体の過程を最初から見ていく形式です。

+

オーバレイの作成

+

はじめに、機能を強化させたいツールバーを含む文書への オーバレイ を作成する必要があります。オーバレイの説明はこのチュートリアルでは扱いません。XUL チュートリアル をご覧ください。

+

文書をオーバレイするには、その文書の URI を知らなければなりません。よくオーバレイされる文書の URI は このページの最後 にあります。

+
+ 注意： + + chrome://messenger/content/mailWindowOverlay.xul + にオーバレイする人がいます。これによって mailWindowOverlay.xul が適用されるすべてのウィンドウ（たとえばメインウィンドウやメッセージ表示ウィンドウ）にボタンが現れます。確認してください。
+

ツールバーボタンの追加

+

ツールキットアプリケーションのツールバーはカスタマイズ可能です。そのため、拡張機能の練習として、直接ツールバーにボタンを追加するのではなく、ツールバーボタンをツールバーパレットに追加するというものがよくあります。直接追加することも可能ですが、非推奨であり、実装も面倒です。

+

ツールバーパレットにボタンを追加するのはとても簡単です。このようにこのコードをオーバレイに追加するだけです：

+
<toolbarpalette id="BrowserToolbarPalette">
+  <toolbarbutton id="myextension-button" class="toolbarbutton-1"
+    label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
+    oncommand="MyExtension.onToolbarButtonCommand(event);"/>
+</toolbarpalette>
+
+

注意：

+ +
onclick: function(event) {
+  switch(event.button) {
+    case 0:
+      // Left click
+      break;
+    case 1:
+      // Middle click
+      break;
+    case 2:
+      // Right click
+      break;
+  }
+}
+
+

さらにボタンを追加するには、<toolbarbutton> 要素を <toolbarpalette> 要素の内側にさらに追加してください。<toolbarbutton> 以外の要素は <toolbaritem> 内に内包するようにしてください。

+

ボタンの装飾

+

ツールバーボタンのほとんどはアイコンが付いています。ボタンに画像を付けるには Mozilla のスキン機能を使用します。これについてよく知らないのであれば、Jonah Bishop によるすばらしいツールバーチュートリアルのスキンの使用に関するセクション を読んでおくことをお勧めします。その記事ではボタンを作るだけというよりもむしろツールバー全体を作ることを扱っていますが、私たちがここで使うテクニックの説明としてはすばらしいものです。

+

アイコンのサイズ

+

ツールバーボタンは大小 2 種類のサイズを持ちえます。つまり、ツールバーボタンにそれぞれ 2 つのアイコンを持たせる必要があるということです。さまざまなアプリケーションでの大小両方のアイコンの寸法は以下の表のとおりです（他のアプリケーションについての情報もご自由に追加してください【訳註：英語版に追加すべき】）：

+ + + + + + + + + + + + + + + + + + +
アプリケーション（テーマ名）大きいアイコンのサイズ小さいアイコンのサイズ
Firefox 1.0 (Winstripe)24x2416x16
Thunderbird 1.0 (Qute)24x2416x16
+

スタイルシート

+

ツールバーボタンに画像を指定するために、以下の CSS ルールを使用してください：

+
/*  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");
+}
+
+

スタイルシートの適用

+

作成したスタイルシートをオーバレイファイルと Customize Toolbar ウィンドウの両方に適用するのを忘れないでください。オーバレイファイルに適用するには、この処理命令 (PI) をオーバレイファイルの頭に付けてください：

+
<?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?>
+
+

Customize Toolbar ウィンドウ (<tt>chrome://global/content/customizeToolbar.xul</tt>) に適用するには、以下のような <tt>skin/contents.rdf</tt> を使用することのがよいでしょう：

+
<?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>
+
+

Firefox/Thunderbird 1.5 向けの拡張機能では代わりに以下のような chrome.manifest を使用すべきです：

+
skin	myextension	classic/1.0	chrome/skin/
+style	chrome://global/content/customizeToolbar.xul	chrome://myextension/skin/toolbar-button.css
+
+

よくある間違い

+

これは拡張機能作者がよく起こす間違いとその症状、そしてその解決策のリストです。

+

問題点： ツールバー上や Customize Toolbars ウィンドウ内に自分のアイコンではなく、デフォルトのボタン全体が表示される。

+

原因： スタイルシートが正しく記述されていないか、またはスタイルシートが適用されていない。

+

解決法： スタイルシートに誤りがないか、<tt>contents.rdf</tt>（または <tt>chrome.manifest</tt>）に誤りがないかを確認し、確実に <tt>customizeToolbar.xul</tt> に スタイルシートを適用する。

+

よくオーバレイされるツールバーを持つウィンドウのリスト

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
URLアプリケーションと影響のあるウィンドウパレット id
chrome://browser/content/browser.xulFirefox - メインウィンドウBrowserToolbarPalette
chrome://messenger/content/messenger.xulThunderbird - メインウィンドウMailToolbarPalette
chrome://messenger/content/messenger...gercompose.xulThunderbird - 編集ウィンドウMsgComposeToolbarPalette
chrome://messenger/content/addressbo...ddressbook.xulThunderbird - アドレス帳AddressBookToolbarPalette
chrome://editor/content/editor.xulNvu - メインウィンドウNvuToolbarPalette
chrome://calendar/content/calendar.xulSunbird - メインウィンドウcalendarToolbarPalette
+

詳細情報

+ -- cgit v1.2.3-54-g00ecf