]>
An English version of this page is also available.
Firefox 3 Hacks好評発売中。本書の1/3を占めてしまっている第3章でFUELやらPlacesデータベースのテーブル定義やらJavaScriptコードモジュールやらを解説しています。Software Design 2007年4月号第2特集の再録の拡張機能開発チュートリアルと併せてどうぞ。
Windowsのエクスプローラのフォルダツリーのように、Firefoxのタブをツリー状に表示します。リンクなどから開かれたタブは自動的にツリーになります。タブのグループ関係が視覚的に分かるので、大量のタブを開きがちな人にお勧めです。
この拡張機能は、タブブラウザ拡張の機能をFirefox 2向けに再実装する試みの一環として開発しています。
トラブルに出くわした場合、まずよくある質問をご覧下さい。それでも解決方法が見つからない場合の障害報告は掲示板かメールで。最新版のチェック用にRSSもあります。
以下の言語パックを内蔵しています。
動画によるデモがありますので、まずはこちらをどうぞ。
ツリー表示の例。リンクなどからタブが開かれる時は、元のタブの子として開かれます。
タブバーは上下左右好きな位置に置けます。上下に置く場合は横長のツリーとなります。また、縦置きされたタブバーは自動的に隠すことができます。
タブの親子関係の変更や移動をドラッグ&ドロップで行えます。操作感としてはAdobe IllustratorやPhotoshopのレイヤツリーあたりに似ています。
Mac OS Xのデフォルトのテーマに合わせた組み込みのテーマ「Metal」も含んでいます。
マルチプルタブハンドラと同時に利用できます。タブのクローズボックスが一直線上に並ぶので、マルチプルタブハンドラ単体で使う場合に比べて、クローズボックスのドラッグで複数タブをまとめて閉じる操作をより簡単に行えるようになります。
情報化タブとも同時に利用できます。マルチプルタブハンドラと合わせて導入するとTBEのタブモードに近い感じになります。ツリー型タブでは新しいタブの追加操作を常時監視しており、タブを開く前に「これから新しい子タブを開く」ということをサービスに通知しておくことで、その次のタイミングで開かれたタブを指定されたタブの子として登録することで、タブのツリーを形成します。以下のメソッドを使用することで、自作のアドオンやスクリプトなどから開くタブをツリーの中に組み込むことができます。
なお、Webページ内のスクリプトなどから開かれるタブはすべて自動的にツリーの中に組み込まれます。子のタブを明示的に開くためのWebページ作者向けのAPIはありません。
TreeStyleTabService.readyToOpenChildTab(in DOMNode/DOMWindow aParent, in boolean aMultiple)true、タブを1つだけ開きたい場合はfalseを指定する。TreeStyleTabService.readyToOpenNewTabGroup(in DOMNode aTabBrowser)tabbrowser.loadTabs()で開かれたタブのグループは自動的に、最初のタブを親とした一つのサブツリーとして開かれる。
TreeStyleTabService.stopToOpenChildTab(in DOMNode/DOMWindow aParent)readyToOpenChildTab()を実行した後にタブを開かずに操作を取りやめる場合や、複数の子タブを開き終わって操作を完了した後に、これを実行する。
TreeStyleTabService.checkToOpenChildTab(in DOMNode/DOMWindow aParent)readyToOpenChildTab()が実行されたかどうか)を調べる。
true、そうでない場合はfalse。実際の利用例は以下の要領です。
// 現在のタブの子タブを一つだけ開く例
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab);
gBrowser.addTab('http://www.example.jp/');
// 現在のタブの子として複数のタブを開く例
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab, true);
gBrowser.addTab('http://www.example.jp/');
gBrowser.addTab('http://www.example.com/');
gBrowser.addTab('http://www.google.co.jp/');
if ('TreeStyleTabService' in window)
TreeStyleTabService.stopToOpenChildTab(gBrowser.selectedTab);
// 新しい「タブのグループ」を開く
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenNewTabGroup(gBrowser);
gBrowser.loadTabs([
'http://www.google.co.jp/',
'http://www.google.com/',
'http://www.google.co.jp/'
]);
// 操作をキャンセルする例
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab, true);
if (!confirm('本当に開いてもOK?')) {
if ('TreeStyleTabService' in window)
TreeStyleTabService.stopToOpenChildTab(gBrowser.selectedTab);
return;
}
gBrowser.addTab('http://www.example.jp/');
現在のタブに関連した情報を新しいタブで開くような機能について、このコードを入れておくと、ツリー型タブを利用している場合にユーザがより幸せになれるかもしれません。
gBrowser.treeStyleTab.collapseExpandSubtree(in DOMNode aParentTab, in Boolean aCollapsed)そのタブが子孫のタブを持っている場合に、サブツリーを開閉する。ユーザ設定でツリーの折り畳みが禁止されている場合は何もしない。
trueでサブツリーを折り畳み、falseで展開する。TreeStyleTabService.canCollapseSubtree(in DOMNode aTabBrowser)任意のtabbrowserについて、ツリーを折り畳める状態かどうかを調べる。
true、そうでなければfalse。TreeStyleTabService.isSubtreeCollapsed(in DOMNode aParentTab)任意のタブについて、ツリーが折り畳まれているかどうかを調べる。
true。それ以外の場合はfalse。TreeStyleTabService.isCollapsed(in DOMNode aChildTab)任意の子タブについて、折り畳まれているかどうか(そのタブが属しているツリーが折り畳まれているかどうか)を調べる。
true。それ以外の場合はfalse。gBrowser.treeStyleTab.attachTabTo(in DOMNode aChildTab, in DOMNode aParentTab)任意のタブを他のタブの子として登録する。子タブになったタブ(およびそのサブツリー)は、ユーザの設定に従って自動的に移動される。
gBrowser.treeStyleTab.partTab(in DOMNode aChildTab)任意の子タブ(およびそのサブツリー)を、親タブのサブツリーから切り離す。ツリーから切り離されたタブはそのままの位置に留まるので、必要に応じて任意でタブバーの最後の位置に移動するなどすること。
gBrowser.treeStyleTab.partAllChildren(in DOMNode aParentTab)任意のタブのすべての子タブをそのタブのツリーから切り離す。ツリーから切り離されたタブはそのままの位置に留まるので、必要に応じて任意でタブバーの最後の位置に移動するなどすること。
TreeStyleTabService.promoteTab(in DOMNode aTab)任意のタブをツリー内の1つ上の階層に移動する。そのタブに親タブが無い場合は何もしない。
TreeStyleTabService.promoteCurrentTab()現在のタブをツリー内の1つ上の階層に移動する。現在のタブに親タブが無い場合は何もしない。
TreeStyleTabService.demoteTab(in DOMNode aTab)任意のタブをツリー内の1つ下の階層に移動する。そのタブの兄弟にあたるタブが無い場合は何もしない。
TreeStyleTabService.demoteCurrentTab()現在のタブをツリー内の1つ下の階層に移動する。現在の兄弟にあたるタブが無い場合は何もしない。
TreeStyleTabService.hasChildTabs(in DOMNode aTab)タブが子を持っているかどうかを調べる。
TreeStyleTabService.getChildTabs(in DOMNode aTab)直接の子であるタブの配列を得る。
TreeStyleTabService.getFirstChildTab(in DOMNode aTab)最初の直接の子タブを得る。
nullTreeStyleTabService.getLastChildTab(in DOMNode aTab)最後の直接の子タブを得る。
nullTreeStyleTabService.getDescendantTabs(in DOMNode aTab)すべての子孫タブの配列を得る。
TreeStyleTabService.getLastDescendantTab(in DOMNode aTab)子孫の中で最後のタブを得る。
nullTreeStyleTabService.getParentTab(in DOMNode aTab)親のタブを得る。
nullTreeStyleTabService.getRootTab(in DOMNode aTab)最上位の親タブ(親を持たないタブ)を得る。
nullTreeStyleTabService.rootTabs最上位の親タブ(親を持たないタブ)の配列を得る。
TreeStyleTabService.getNextSiblingTab(in DOMNode aTab)同じ階層にある1つ次のタブを得る。
nullTreeStyleTabService.getPreviousSiblingTab(in DOMNode aTab)同じ階層にある1つ前のタブを得る。
nullGUIとしては機能を提供していませんが、バージョン0.7.2009041401以降では、指定の幅にウィンドウをリサイズするためのAPIが存在します。
TreeStyleTabService.setTabbarWidth(in Number aWidth, [in Boolena aForceExpanded])タブバーの幅を、第1引数で指定された幅に調整する。「自動でタブバーを畳む」状態の時は、畳まれた状態のタブバーの幅が変化する。この状態の時でも常に展開状態のタブバーの幅を変えたい場合は、第2引数にtrueを渡す。
このメソッドはタブバーを左または右に表示している場合にのみ機能する。
TreeStyleTabService.setContentWidth(in Number aWidth, [in Boolena aKeepWindowSize])内容領域の幅を、第1引数で指定された幅に調整する。通常のウィンドウ表示で、画面上に十分な余裕がある場合は、内容領域が指定幅になるようにウィンドウ自体を広げる。画面の幅が足りない場合、またはフルスクリーン表示の場合は、タブバーを縮める。第2引数にtrueを渡すと、ウィンドウのサイズを変えずに常にタブバーの幅だけを変化させる。
TreeStyleTabService.currentTabbarPositionTreeStyleTabService.currentTabbarPosition = String aPositionアクセスするとタブバーの現在の表示位置を"top", "bottom", "left", "right"のいずれかの文字列で返す。また、"top", "bottom", "left", "right"のいずれかの文字列を代入すると、タブバーをその位置に移動する。
TreeStyleTabService.currentTabbarPositionの実装により、TreeStyleTabService.changeTabbarPosition(in String aPosition)は廃止されました。後方互換のために一応利用できますが、使用は推奨しません。
現在のタブを閉じた場合、ツリー型タブはツリーの構造に応じて適切なタブへフォーカスを移します。他のアドオンでタブのフォーカスを独自に制御する(現在のタブを閉じたら前に見ていたタブにフォーカスを移すなど)場合、ツリー型タブのこの挙動を抑止する必要があります。
// void TreeStyleTabService.registerTabFocusAllowance(in Function aAllowanceChecker)
TreeStyleTabService.registerTabFocusAllowance(function(aTabBrowser) {
return Prefs.getCharPref('myextension.focus.mode') != 'default';
});
このようにTreeStyleTabService.registerTabFocusAllowance()を使用して登録した関数がfalseを返す場合、ツリー型タブは独自のフォーカス制御を行わなくなります。このようにした上でTabCloseイベントを捕捉するなどして、現在のタブを閉じた後にどのタブにフォーカスを移すかを他のアドオンで任意に制御することができます。
TreeStyleTabService.treeViewEnabledTreeStyleTabService.treeViewEnabled = Boolean aEnabledアクセスすると、現在ツリー表示が有効かどうかを真偽値で返す。falseを代入するとツリーの折り畳みとインデントが解除され、すべてのタブがフラットな状態で表示されるようになる。trueを代入するとツリーの折り畳みとインデントが再度適用される。初期値は常にtrue。
複数のタブをまとめてブックマークする際に、ツリー構造をブックマークに保存させることができます。手順は以下の要領です。
var tabs = MyAddon.getTargetTabs();
if ('TreeStyleTabBookmarksService' in window)
TreeStyleTabBookmarksService.beginAddBookmarksFromTabs(tabs);
MyAddon.createBookmarksFromTabs(tabs);
// ブックマークの作成をキャンセルしたとしても、必ずこれは実行して下さい。
if ('TreeStyleTabBookmarksService' in window)
TreeStyleTabBookmarksService.endAddBookmarksFromTabs();
TreeStyleTabBookmarksService.beginAddBookmarksFromTabs(in Array aTabs)これから作成されるブックマークにタブのツリー構造を保存する事を宣言する。
TreeStyleTabBookmarksService.endAddBookmarksFromTabs()タブからのブックマーク作成の終了を宣言する。
ツリー型タブは以下のカスタムイベントを場合に応じて発行します。これらのイベントはDOM2 Eventの仕組みを用いて捕捉できます。
TreeStyleTabCollapsedStateChangeサブツリーの折り畳みの状態が変化した時に発行される。
originalTargetcollapsedtrueの場合はツリーが折り畳まれ、falseの場合はツリーが展開されたことを示す。TreeStyleTabAutoHideStateChangeタブバーが自動開閉された時に発行される。
originalTargetshowntrueの場合はタブバーが表示されたことを、falseの場合はタブバーが隠されたことを示す。statetreestyletab-tabbar-autohide-state属性の値と同じ物("expanded", "shrunken", "hidden"のいずれか)がセットされる。TreeStyleTabTabbarPositionChangingタブバーの位置が変更される直前に発行される。
originalTargetoldPosition"top", "bottom", "left", "right"のいずれか。newPosition"top", "bottom", "left", "right"のいずれか。TreeStyleTabTabbarPositionChangedタブバーの位置が変更された後に発行される。
originalTargetoldPosition"top", "bottom", "left", "right"のいずれか。newPosition"top", "bottom", "left", "right"のいずれか。extensions.treestyletab.autoExpandSubtreeOnCollapsedChildFocused:折り畳まれたツリーの中のタブにフォーカスした時に、ツリーを自動的に展開するかどうかextensions.treestyletab.autoCollapseExpandSubtreeOnSelect.whileFocusMovingByShortcut:Ctrl-Tabによるタブの切り替え中にツリーを展開するかどうか.tabs-newtab-button { visibility: collapse !important; } で代用可能なので)gBrowser.treeStyleTab.partAllChildren(aTab)TreeStyleTabService.currentTabbarPositionTreeStyleTabService.treeViewEnabledTreeStyleTabService.promoteTab(aTab)TreeStyleTabService.promoteCurrentTab()TreeStyleTabService.demoteTab(aTab)TreeStyleTabService.demoteCurrentTab()treestyletab-tabbar-autohide-state属性の値として現在のタブバーの状態を保持するようにしたextensions.treestyletab.tabbar.fixed.insensitiveAreaで変更可能)extensions.treestyletab.autoCollapseExpandSubTreeOnSelect.whileFocusMovingByShortcutをtrueに設定する)TreeStyleTabService.setTabbarWidth()とTreeStyleTabService.setContentWidth()を追加false に設定してください)trueにすると旧版の挙動に戻ります)falseに値を変更する)tabbrowser.loadTabs()のための新しいAPIを追加