Revision 172703 of Extensions

  • リビジョンの URL スラグ: XUL/PopupGuide/Extensions
  • リビジョンのタイトル: Extensions
  • リビジョンの ID: 172703
  • 作成日:
  • 作成者: Shoot
  • 現行リビジョン いいえ
  • コメント
タグ: 

このリビジョンの内容

{{wiki.template('英語版章題', [ "Adding a New Menu" ])}}

新規メニューの追加

Firefox のメインメニューバーは 'main-menubar' という id を持っています。アプリケーションのメインメニューバーに新しいメニューを追加するには、このメニューバーに対してオーバーレイする必要があります。たとえば、

<menubar id="main-menubar">
  <menu label="Search" insertbefore="tools-menu"/>
</menubar>

このメニューはメインメニューバーのツールメニューの前に追加されます。新しいメニューが正しい位置に追加されるように、{{template.XULAttr("insertbefore")}} 属性を 'tools-menu' に設定しています。

{{wiki.template('英語版章題', [ "Adding a New Menuitem" ])}}

新規メニューアイテムの追加

メニューのどれかに新しいアイテムを追加したい事があるかもしれません。これはアイテムを追加する要素にオーバーレイすることで可能になります。Firefox のメニューの id の一覧は、Firefox Menus を参照して下さい。たとえば、ツールメニューの最後にアイテムを追加するには次のようにします。

<menupopup id="menu_ToolsPopup">
  <menuitem label="Thesaurus"/>
</menupopup>

他の拡張機能が同じメニューの中に独自のアイテムを追加することがあるという事に注意してください。これが原因で、オーバーレイが適用される順番によっては、新しいアイテムがメニューの最後ではなく他の拡張機能が追加したメニューアイテムの前に追加される事があります。オーバーレイが適用される順番を予測する事はできないので、他の拡張機能が存在する場合にはメニューアイテムが特定の位置にあることを当てにするべきではありません。

{{wiki.template('英語版章題', [ "Modifying the Context Menu" ])}}

コンテキストメニューの改変

拡張機能はブラウザ領域に関連付けられたコンテキストメニューを改変することがよくあります。通常は、このメニューは何がコンテキストクリックされたかや、何にフォーカスがあるかによって特定のメニューを表示します。たとえば、リンクに対してコンテキストメニューを開くと、リンクを新しいウィンドウやタブで開くアイテムや、リンクを保存したりブックマークするアイテムが表示されます。拡張機能はコンテキストメニューを改変することで、追加したメニューを常に表示させることも、特定のコンテンツが選択された時にのみ表示させることもできます。

Firefox では、Web ページを表示するブラウザ領域はコンテキストメニューを 1 つだけ持っています。コンテキストメニューのターゲットの種類によって別々のコンテキストメニューを使用するのではなく、ただ 1 つのコンテキストメニューを使って、ターゲットに対して適用できないアイテムは必要に応じて隠されるようになっています。したがって、この単一のメニューにオーバーレイすることで Firefox のコンテキストメニューにアイテムを追加できます。このコンテキストメニューの id は 'contentAreaContextMenu' です。この例では、Firefox のコンテキストメニューの最後に 1 つのアイテムを追加します。

<popup id="contentAreaContextMenu">
  <menuitem id="thumbnail-show" label="View Thumbnail" oncommand="Thumbnails.view();"/>
</popup>

menupopup 要素ではなく popup 要素を使用していることに注意してください。これは Firefox でこの要素が使用されているためです。

上のコードはコンテキストメニューの最後に新しいアイテムを追加します。コンテキストメニューの最後ではなく特定の位置にアイテムを設置したければ、{{template.XULAttr("insertbefore")}} もしくは {{template.XULAttr("insertafter")}} 属性を使って id で指定された他のアイテムの前か後に挿入することができます。たとえば、次のコードは「すべて選択」コマンドのすぐ後にコマンドを挿入します。

<popup id="contentAreaContextMenu">
  <menuitem label="Select Links" oncommand="Thumbnails.selectAllLinks();"
            insertafter="context-selectall"/>
</popup>

Firefox Context Menu で Firefox のコンテキストメニューにあるアイテムの id の一覧を参照して下さい。

{{wiki.template('英語版章題', [ "Showing and Hiding Context Menu Items" ])}}

コンテキストメニューアイテムの表示非表示

追加したメニューアイテムをコンテキストによって表示したり隠したりするには、popupshowing イベントをリッスンするイベントハンドラを使用します。たとえば、画像がコンテキストクリックされた場合、追加したメニューアイテムが実行する操作が画像に対して適用できないものならば、それを非表示にしたいと思うかもしれません。

function init()
{
  var contextMenu = document.getElementById("contentAreaContextMenu");
  if (contextMenu)
    contextMenu.addEventListener("popupshowing", ThumbnailsShowHideItems, false);
}

function ThumbnailsShowHideItems(event)
{
  var show = document.getElementById("thumbnail-show");
  show.hidden = (document.popupNode.localName != "IMG");
}

ユーザがポップアップを開く前に popupshowing イベントハンドラを取り付けるため、関数 init は load イベントハンドラで呼び出すようにします。この例では、ポップアップが表示されようとする時に関数 ThumbnailsShowHideItems が呼ばれます。この関数は 'thumbnail-show' という id を持つ拡張機能が追加したメニューアイテムを取得し、コンテキストメニューのターゲットが画像でなければそれを隠します。document の popupNode プロパティはコンテキストメニューのターゲットを保持します。

コンテキストメニュー上のアイテムの表示非表示に関する詳細は、コンテキストによるメニューアイテムの表示非表示を参照して下さい。

{{wiki.template('英語版章題', [ "Determining what Element was Context Clicked" ])}}

どの要素がコンテキストクリックされたか判別する

どの要素がコンテキストメニューのターゲットか、つまりコンテキストクリックされた要素を判別する方法に関する一般的な情報はコンテキストとして何がクリックされたか判定するを参照して下さい。

Firefox は独自の popupshowing イベントリスナを使ってコンテキストメニューのアイテムを調整しています。これによりメニューは異なる種類のターゲットに対して異なるコマンドを持つことができます。ポップアップが開かれている間、グローバル変数 gContextMenu に Firefox のコンテキストメニュー固有の機能をすべて扱うオブジェクトが格納されます。具体的に言うと、このオブジェクトはコンテキストメニューのターゲットの種類を示すプロパティの集合によって初期化されます。たとえば、リンクがコンテキストクリックされると 'onLink' プロパティが true に設定されます。

手動で処理しようとすると大量のコードが必要となるような様々な特殊で複雑なケースを Firefox のコードがあらかじめ処理しているので、自分でターゲットの種類を判別するよりもこれらのプロパティを使用したほうがいいでしょう。次の表は最もよく使われるチェック可能なプロパティの一覧です。

targetコンテキストクリックされた要素。キーボードでコンテキストメニューを開いた場合は、フォーカスのある要素。
onTextInputターゲットがプレーンまたはパスワードタイプの input、textarea、または編集可能な領域ならば true。テキストの編集に関するコマンドを有効または無効にするのに使用できる。
onImageターゲットが画像なら true。
hasBGImage祖先要素が背景画像を持っていれば true。
onMathMLターゲットが MathML 要素なら true。
onLinkターゲットがリンクなら true。
onMailtoLinkターゲットが E メールアドレスのリンク (mailto:) なら true。
linkURLコンテキストクリックされたリンクの URL。
inFrameフレーム内でコンテキストクリックされたなら true。
isTextSelectedテキストが選択されていれば true。
isContentSelectedテキストを含む何らかのものが選択されていれば true。

次の例では、ターゲットが画像かリンクでなければメニューアイテムは非表示になります。

function ThumbnailsShowHideItems(event)
{
  var show = document.getElementById("thumbnail-show");
  show.hidden = !(gContextMenu.onImage || gContextMenu.onLink);
}
{{ wiki.languages( { "en": "en/XUL/PopupGuide/Extensions" } ) }}

このリビジョンのソースコード

<p>
{{wiki.template('英語版章題', [ "Adding a New Menu" ])}}
</p>
<h4 name=".E6.96.B0.E8.A6.8F.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0">新規メニューの追加</h4>
<p>Firefox のメインメニューバーは 'main-menubar' という id を持っています。アプリケーションのメインメニューバーに新しいメニューを追加するには、このメニューバーに対してオーバーレイする必要があります。たとえば、
</p>
<pre>&lt;menubar id="main-menubar"&gt;
  &lt;menu label="Search" insertbefore="tools-menu"/&gt;
&lt;/menubar&gt;
</pre>
<p>このメニューはメインメニューバーのツールメニューの前に追加されます。新しいメニューが正しい位置に追加されるように、{{template.XULAttr("insertbefore")}} 属性を 'tools-menu' に設定しています。
</p><p>{{wiki.template('英語版章題', [ "Adding a New Menuitem" ])}}
</p>
<h4 name=".E6.96.B0.E8.A6.8F.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.BF.BD.E5.8A.A0">新規メニューアイテムの追加</h4>
<p>メニューのどれかに新しいアイテムを追加したい事があるかもしれません。これはアイテムを追加する要素にオーバーレイすることで可能になります。Firefox のメニューの id の一覧は、<a href="ja/FirefoxOverlayPoints/Menus">Firefox Menus</a> を参照して下さい。たとえば、ツールメニューの最後にアイテムを追加するには次のようにします。
</p>
<pre>&lt;menupopup id="menu_ToolsPopup"&gt;
  &lt;menuitem label="Thesaurus"/&gt;
&lt;/menupopup&gt;
</pre>
<p>他の拡張機能が同じメニューの中に独自のアイテムを追加することがあるという事に注意してください。これが原因で、オーバーレイが適用される順番によっては、新しいアイテムがメニューの最後ではなく他の拡張機能が追加したメニューアイテムの前に追加される事があります。オーバーレイが適用される順番を予測する事はできないので、他の拡張機能が存在する場合にはメニューアイテムが特定の位置にあることを当てにするべきではありません。
</p><p>{{wiki.template('英語版章題', [ "Modifying the Context Menu" ])}}
</p>
<h4 name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E6.94.B9.E5.A4.89">コンテキストメニューの改変</h4>
<p>拡張機能はブラウザ領域に関連付けられたコンテキストメニューを改変することがよくあります。通常は、このメニューは何がコンテキストクリックされたかや、何にフォーカスがあるかによって特定のメニューを表示します。たとえば、リンクに対してコンテキストメニューを開くと、リンクを新しいウィンドウやタブで開くアイテムや、リンクを保存したりブックマークするアイテムが表示されます。拡張機能はコンテキストメニューを改変することで、追加したメニューを常に表示させることも、特定のコンテンツが選択された時にのみ表示させることもできます。
</p><p>Firefox では、Web ページを表示するブラウザ領域はコンテキストメニューを 1 つだけ持っています。コンテキストメニューのターゲットの種類によって別々のコンテキストメニューを使用するのではなく、ただ 1 つのコンテキストメニューを使って、ターゲットに対して適用できないアイテムは必要に応じて隠されるようになっています。したがって、この単一のメニューにオーバーレイすることで Firefox のコンテキストメニューにアイテムを追加できます。このコンテキストメニューの id は 'contentAreaContextMenu' です。この例では、Firefox のコンテキストメニューの最後に 1 つのアイテムを追加します。
</p>
<pre>&lt;popup id="contentAreaContextMenu"&gt;
  &lt;menuitem id="thumbnail-show" label="View Thumbnail" oncommand="Thumbnails.view();"/&gt;
&lt;/popup&gt;
</pre>
<p>menupopup 要素ではなく popup 要素を使用していることに注意してください。これは Firefox でこの要素が使用されているためです。
</p><p>上のコードはコンテキストメニューの最後に新しいアイテムを追加します。コンテキストメニューの最後ではなく特定の位置にアイテムを設置したければ、{{template.XULAttr("insertbefore")}} もしくは {{template.XULAttr("insertafter")}} 属性を使って id で指定された他のアイテムの前か後に挿入することができます。たとえば、次のコードは「すべて選択」コマンドのすぐ後にコマンドを挿入します。
</p>
<pre>&lt;popup id="contentAreaContextMenu"&gt;
  &lt;menuitem label="Select Links" oncommand="Thumbnails.selectAllLinks();"
            insertafter="context-selectall"/&gt;
&lt;/popup&gt;
</pre>
<p><a href="ja/FirefoxOverlayPoints/Menus#Firefox_Context_Menu">Firefox Context Menu</a> で Firefox のコンテキストメニューにあるアイテムの id の一覧を参照して下さい。
</p><p>{{wiki.template('英語版章題', [ "Showing and Hiding Context Menu Items" ])}}
</p>
<h5 name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.A1.A8.E7.A4.BA.E9.9D.9E.E8.A1.A8.E7.A4.BA">コンテキストメニューアイテムの表示非表示</h5>
<p>追加したメニューアイテムをコンテキストによって表示したり隠したりするには、popupshowing イベントをリッスンするイベントハンドラを使用します。たとえば、画像がコンテキストクリックされた場合、追加したメニューアイテムが実行する操作が画像に対して適用できないものならば、それを非表示にしたいと思うかもしれません。
</p>
<pre>function init()
{
  var contextMenu = document.getElementById("contentAreaContextMenu");
  if (contextMenu)
    contextMenu.addEventListener("popupshowing", ThumbnailsShowHideItems, false);
}

function ThumbnailsShowHideItems(event)
{
  var show = document.getElementById("thumbnail-show");
  show.hidden = (document.popupNode.localName != "IMG");
}
</pre>
<p>ユーザがポップアップを開く前に popupshowing イベントハンドラを取り付けるため、関数 init は load イベントハンドラで呼び出すようにします。この例では、ポップアップが表示されようとする時に関数 ThumbnailsShowHideItems が呼ばれます。この関数は 'thumbnail-show' という id を持つ拡張機能が追加したメニューアイテムを取得し、コンテキストメニューのターゲットが画像でなければそれを隠します。document の <a href="ja/DOM/document.popupNode">popupNode</a> プロパティはコンテキストメニューのターゲットを保持します。
</p><p>コンテキストメニュー上のアイテムの表示非表示に関する詳細は、<a href="ja/XUL/PopupGuide/ContextMenus#Hiding_and_Showing_Menu_Items_based_on_Context">コンテキストによるメニューアイテムの表示非表示</a>を参照して下さい。
</p><p>{{wiki.template('英語版章題', [ "Determining what Element was Context Clicked" ])}}
</p>
<h5 name=".E3.81.A9.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.8C.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AF.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E5.88.A4.E5.88.A5.E3.81.99.E3.82.8B">どの要素がコンテキストクリックされたか判別する</h5>
<p>どの要素がコンテキストメニューのターゲットか、つまりコンテキストクリックされた要素を判別する方法に関する一般的な情報は<a href="ja/XUL/PopupGuide/ContextMenus#Determining_what_was_Context_Clicked">コンテキストとして何がクリックされたか判定する</a>を参照して下さい。
</p><p>Firefox は独自の popupshowing イベントリスナを使ってコンテキストメニューのアイテムを調整しています。これによりメニューは異なる種類のターゲットに対して異なるコマンドを持つことができます。ポップアップが開かれている間、グローバル変数 gContextMenu に Firefox のコンテキストメニュー固有の機能をすべて扱うオブジェクトが格納されます。具体的に言うと、このオブジェクトはコンテキストメニューのターゲットの種類を示すプロパティの集合によって初期化されます。たとえば、リンクがコンテキストクリックされると 'onLink' プロパティが true に設定されます。
</p><p>手動で処理しようとすると大量のコードが必要となるような様々な特殊で複雑なケースを Firefox のコードがあらかじめ処理しているので、自分でターゲットの種類を判別するよりもこれらのプロパティを使用したほうがいいでしょう。次の表は最もよく使われるチェック可能なプロパティの一覧です。
</p>
<table border="1">
<tbody><tr><td>target</td><td>コンテキストクリックされた要素。キーボードでコンテキストメニューを開いた場合は、フォーカスのある要素。
</td></tr><tr><td>onTextInput</td><td>ターゲットがプレーンまたはパスワードタイプの input、textarea、または編集可能な領域ならば true。テキストの編集に関するコマンドを有効または無効にするのに使用できる。
</td></tr><tr><td>onImage</td><td>ターゲットが画像なら true。
</td></tr><tr><td>hasBGImage</td><td>祖先要素が背景画像を持っていれば true。
</td></tr><tr><td>onMathML</td><td>ターゲットが MathML 要素なら true。
</td></tr><tr><td>onLink</td><td>ターゲットがリンクなら true。
</td></tr><tr><td>onMailtoLink</td><td>ターゲットが E メールアドレスのリンク (mailto:) なら true。
</td></tr><tr><td>linkURL</td><td>コンテキストクリックされたリンクの URL。
</td></tr><tr><td>inFrame</td><td>フレーム内でコンテキストクリックされたなら true。
</td></tr><tr><td>isTextSelected</td><td>テキストが選択されていれば true。
</td></tr><tr><td>isContentSelected</td><td>テキストを含む何らかのものが選択されていれば true。
</td></tr></tbody></table>
<p>次の例では、ターゲットが画像かリンクでなければメニューアイテムは非表示になります。
</p>
<pre>function ThumbnailsShowHideItems(event)
{
  var show = document.getElementById("thumbnail-show");
  show.hidden = !(gContextMenu.onImage || gContextMenu.onLink);
}
</pre>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/XUL/PopupGuide/Extensions" } ) }}
このリビジョンへ戻す