Firefox 2.0 の Places(ブックマークや履歴をSQLiteで管理してます。) の導入は見送られましたが、Bon Echo Alpha 3 (2006-06-17)からサーチプラグインのデータも SQLite で管理されるようになり Firefox のデータ管理を SQLite に任せる方向で動いているようなのでメモ。
続きを読むXULエレメントの表示例
XULPlanet.comではXULエレメントについて解説はしてくれているのですが、具体的な表示例がありません。
ってことでXUL Periodic Tableというのを見つけたのでご紹介。
いくつかのXULエレメントについて、いくつか属性を設定したものを表示してくれます。(属性をいくつか設定してくれているところがポイント高いです。)
mozilla-japanにもいくつか例を表示してくれているのがあった気がしますが、属性ごとに表示されてはいなかった気がします。(違ってたらすいません。)
また XUL で書かれたページで、Top に表示されているタブから”表示例”や”ソース”を切り替えて表示可能です。
拡張を作成し始めた方には、ソースもすぐに見れるのでいいかもしれません。
XBLって何?
拡張を作成し始めると XBL という言語を目にすると思います。
Firefox本体のソースを見ると、GUIのほとんどがこれで記述されています。
Mozilla 開発者資料では
拡張可能なバインディング言語 - 他のドキュメントのエレメントへ付属させることが可能なバインディングを記述するためのマークアップ言語
とあるのですが、わかりやすい説明がなかったのでちょっと書いてみる。続きを読む
Firefoxのメモリリーク解析ツール:leak-gauge
えむもじらさんで紹介されていた。メモリリークを解析してくれるツールleak-gaugeを使ってみました。
ナイトリービルドやトランクビルドにはメモリー状態を記録してくれる機能があるそうで、当然このツールはリリースビルドでは使用できません。
とりあえず必要なものは、leak-gauge(JavaScriptバージョン)これを適当なフォルダーに保存してください。こちらの使い方をご紹介します。
この他にPerlのバージョンもあるのですが、こちらは使用してません。
VAR=value NSPR_LOG_MODULES=DOMLeak:5,DocumentLeak:5,nsDocShellLeak:5 NSPR_LOG_FILE=nspr.log
とりあえず使用する際(Windowsの場合)
上記のような環境設定を設定しなければなりません。そこで下記のようなバッチファイルを作成しFirefox1.6a2を起動
set VAR=value set NSPR_LOG_MODULES=DOMLeak:5,DocumentLeak:5,nsDocShellLeak:5 set NSPR_LOG_FILE=nspr.log SET MOZ_NO_REMOTE=1 cd "d:\Program Files\Firefox 1.6"(トランクを置いてあるフォルダです。) start /wait firefox.exe -p trunk (トランク用のプロファイルです。)
これでFirefoxを動作させて終了すると、バッチファイルを置いたフォルダーにnspr.logというファイルが作成されます。
そして普通にFirefoxを起動(これはリリースビルドでもかまいません)、先ほど保存したleak-gaugeをファイルから開いてください。
(ブックマークにでも登録しておけば簡単に開くことが出来ます。)
下のほうにリンクenter the filenameがあるのでそこをクリックしさっきのnspr.logを放り込んでください。どこでメモリーリークが起きてるかを知らせてくれます。
といっても原因までは分かりません。原因がどこにあるかは特定の動作をさせて絞り込んでいく必要があるみたいです。
自分が作ってる拡張ぐらいはチェックしとこう・・・。
拡張のインストールスクリプト
Firefoxなどの拡張を日本語化し、配布する場合
クリックしてインストールできると便利です。今日はそのための簡単なスクリプトをご紹介します。
(このサイトでも実際に使用してます。)
インストールスクリプト
function install (aEvent) { if (/([^\/]+\.xpi)$/.test(aEvent.target.href)){ eval("InstallTrigger.install({ '" + RegExp.$1 + "' : aEvent.target.href })"); } return false; }
上記のような関数を登録しましょう。
意味は、ファイルのパスが例えば”ttp://aaa/bbb/ccc.xpi”の場合、/*.xpiにマッチしたものが、RegExp.$1に保持されインストールする際表示されます。
(InstallTrigger.install(・・・を文字列として扱い、RegExp.$1で拡張名を登録しevalするところがミソです。)
Webページには
私のページはXHTML 1.0 Transitionalなので、以下のようにWebページでは書いてます。
<a href="ttp://aaa/bbb/ccc.xpi" onclick="return install(event);" onkeypress="return install(event);">ccc.xpi</a>
これでリンクをクリックすると自動的に拡張をインストールすることが可能になります。
Firefoxの拡張はWebページを作成する知識があれば、簡単に作ることが出来ます。
(特殊な知識も必要なこともありますが、基本的には似たようなものです。)
とりあえず拡張の日本語化などから挑戦してはいかが?
BabelZillaへの登録
BabelZillaというのは、拡張の翻訳を行っているところです。
SearchWPなどの拡張機能の作者の方にBabelZillaを使ってみないかと言われたので登録してみました。
今日は登録する際、どこからユーザー登録すればいいのか分かりにくかったので、書いときます。
なにが分かりにくかったのかというと左に示してますがBabelZillaのTOPページに”LOGIN FORM”がありその下に”Register”と言うのがあるのですが、ユーザー名とパスワードの入力を求められ、入力しても再び動作の繰り返しとなるだけで、ここからは登録できません。
(紛らわしいので削除して欲しいです。)
ではどこから登録すればいいのか?右の画像を見てもらえばわかるのですが、BabelZilla フォーラムのTOPページの上のほうに”Welcome Guest”の右に”Register”があるので、こちらから登録することになります。
使用した感想ですが、Webページ上で入力するだけでいいので作業自体は簡単ですが、ちょっとページが重いです。それに翻訳作業は私の場合、拡張を動作させながらその動作も考えた上で行っているので、結局自分で翻訳部分をいれなおした拡張を再構築しなければならないということでちょっと微妙な感じです。
作者の方とあまりメールでやり取りしなくてすむということが唯一の利点?
お試し開発ツール
今日はFire Bugと言う拡張について、書いている途中でこちらMozilla Firefox Thunderbird の拡張あれこれでも紹介されていることに気付きました。
Mozilla Firefox Thunderbird の拡張あれこれでも紹介されているように、JavaScriptのエラーコンソールとDOMインスペクターを合わせたような拡張です。
まず使い方ですが、一般的には”Pick Element”というボタンをぽちっと押します。その上でWebページ上にマウスのカーソルを移動してみてください。
青い点線の枠でHTML要素などが囲まれて表示されたのではないかと思います。つまりDOMインスペクターのように各要素について調べることが出来ます。DOMインスペクターと違い青い点線の枠で選択可能な要素が表示されるので、DOMインスペクターよりも使い勝手がいいと思います。
また選択した要素についての情報が表示されるのですが、この情報が結構いい感じです。何がいい感じかというと、どんなオブジェクトかそのプロパティやメソッドまたその要素の親要素、子要素についての情報も表示されます。
あと使用しないときはこの拡張を終了する前に、”Options”から”Disable Console”をチェックしておくことをお勧めします。でないといちいちステータスバーにエラーが表示されるので。
再び使用するには、”ツール”から”Command Line”から使えます。先ほどの”Disable Console”にチェックしていた場合、このチェックを外してから使用してください。
起動して最初に表示されたエラーがこの拡張のエラーなのでまだまだ開発途上ですが、WebページのJavaScriptについて調べたり、デバックしたりするには便利なのではないでしょうか。今後の開発に期待します。
本体の機能を流用するためのメモ
拡張開発やスクリプトを実行できる拡張で使えるかもしれない・・・。
All-in-One Tuika Gesturesにも使用してます。
- サイドバーの開閉
- これはDOMインスペクターからも見えますが・・・。
toggleSidebar('サイドバーのID');
- ツールバーの開閉
- DOMインスペクターからはgoToggleToolbar()というのが見えますが、これでは開閉できできないので。
var toolbar = document.getElementById("ツールバーのID"); toolbar.collapsed = !toolbar.collapsed; document.persist("ツールバーのID", "collapsed");
- 本体のコマンドの実行
- これはDOMインスペクターで”cmd_copy”ってな感じで見えるやつを実行します。
var controller = document.commandDispatcher.getControllerForCommand("コマンド"); controller.doCommand("コマンド");
拡張開発のためのメモ
Execute JSというFirefox拡張を使ってみた。
とりあえず完全に開発者向けの拡張です。(簡単に危険なコードを呼び出し、実行してしまう可能性があるので、JavaScriptについて知識がなければ導入しないことをお勧めします。)
最初に脅すようなことを書きましたが、開発者にとってはなかなか優れた拡張だと思います。
- 優れている点
- ”Target object”にて対象を選択すればそのオブジェクトのプロパティ、メソッドを検索することで参照することができます。
検索したメソッドはそのソースが表示され、それを変更し(元のメソッドと重複するので、メソッドの名前も変更しなければなりませんが。)テストすることができます。
”Target object”に関連付けられているので、拡張の開発、Webページのスクリプトの開発に便利ではないかと思います。 - ちょっと不便な点
- プロパティはオブジェクトを指定しなければ参照できません、またメソッドは検索しなければ参照できません。オブジェクト、プロパティ、メソッドを一覧表示してくれるようになれば、もっと便利かなと思いました。
Stylishで管理
こちら朝顔日記 - Stylish いいよで紹介されていたFirefox拡張Stylishとっても便利です。
何をしてくれる拡張化というと、表示ページの表示の仕方をカスタマイズするためのuserContent.cssと、Firefox本体の見た目をカスタマイズするuserChrome.cssの作成をもっと手軽に、その変更の反映を即座に可能にしてくれます。
また変更毎にタイトルを付けることができるので、何を変更しているのか分かるようにタイトルを設定しておけば、管理も大変簡単になります。
今日は私が現在使用しているものをご紹介。
- Stop&Reload(先日紹介しましたが)
- ストップボタンとリロードボタンを一つにしてくれます。
ポイントはリロードボタンをストップボタンの右に置くことです。(そうしないと一つにはなりません。)#stop-button:not([disabled=true]) + #reload-button, #stop-button[disabled=true]{display:none !important;}
- Bookmarks Panel(検索バーいらね)
- サイドバーに表示されるブックマークパネルの検索バーを非表示にします。
#bookmarksPanel > hbox {display:none !important;}
- Bookmarks Toolbar(ブックマークを折り返して全部表示)
- 通常はブックマークが多くなると右端の矢印の下に表示されるようになるのですが、全部表示してくれるようになります。
Toggle Buttonを使うとブックマークツールバーをナビゲーションツールバーに置いたボタンからバシバシ開閉できます。#bookmarks-ptf {display:block} #bookmarks-ptf toolbarseparator {display:inline}
またこちらのACCESS RのCSSリファレンスにてCSSの書き方についての基礎的な事柄の説明があります。
ご自身で作成される際参考になると思います。
ストップ&リロード(userChrome.css)
これでほんとに打ち止めw
今までストップボタンとリロードボタンを一つに(機能が有効な方を表示)するのにFirefoxの拡張機能Stop-or-Reload Buttonを使用してたのですが、Another 朝顔日記 - Stop/Reloadにてこれを拡張なしに実現しちゃう方法を紹介してくださってます。(いつも役立つ情報ありがとうございますです。)
なるほどびっくりw
このようにuserChrome.cssに以下の様に書いてください。
#stop-button:not([disabled=true]) + #reload-button,
#stop-button[disabled=true]{display:none !important;}
ポイントはリロードボタンをストップボタンの右に置くことです。(そうしないと一つにはなりません。)
あらびっくりwこれで一つに表示できます。
では今度こそほんとにまた来年w