Posts Tagged ‘Firefox’
縦置きタブバーとサイドバーを統合する拡張機能「Unified Sidebar」
firebugの縦置きタブバー(要アドオン)とサイバーを統合するUnified Sidebarというアドオンがリリースされました。
- Latest topics > 縦置きタブバーの下にサイドバーを統合するUnified Sidebarをリリースしたよ – outsider reflex
- http://piro.sakura.ne.jp/latest/blosxom/mozilla/extension/unifiedsidebar/2010-02-05_released.htm
対応してる縦置きタブバーの拡張は下の3種類みたいですが、知らせれば他のも対応してくれるかもしれないとのことです。
- ツリー型タブ
- VertTabbar
- Tab Kit
実際に統合するとしたような感じになります。
画面の大きさと一度に開くタブの数によっては結構いい感じに扱えます。
少しでも画面を広くするため、Hide Captionを使ってタイトルバーを非表示にして、userChrome.cssでサイドバーのタイトル部分を非表示にしています。
/* サイドバーのタイトル部分非表示*/
#sidebar-box > sidebarheader{
display: none !important;
}
- Unified Sidebar
- https://addons.mozilla.org/ja/firefox/addon/72200/
- Hide Caption
- https://addons.mozilla.org/ja/firefox/addon/9256
- タブバーを縦置きにする – Griever
- http://d.hatena.ne.jp/Griever/20090705/1246788480
Greasemonkey使ってないスクリプトを削除するメモ
Greasemonkeyで使ってないスクリプトを削除したい。
gm_scriptsディレクトリにあるconfig.xmlを編集
^(?!.*enabled="true").*$
を空に置換して有効になっているものだけを取り出す
^\n
も空に置換して空の改行をなくす
^.*?filename="(.*?)".*?basedir="(.*?)".*?$ を下のように置換して使っているファイルのパスを出す。 \2/\1
なんかゴミが残ったりするので上の正規表現が適当なせい。
ここまでの手順で、使っているスクリプトの.jsまでのファイルパスが抽出できる。
で、こっからどうやってそれらのファイルだけを取り出せばいいのかがよくわからない。
こんな感じででる。(なんかいろいろおかしい)
./googlenotebookcustomizer.user.js pastedscripinstaller3.user.js. simplestylegoogle_mania.user.js hb_display_comment/hb_display_comment.user.js .....
リストに載っているものを移動するときに(その方法すら浮かんでない)Requireしたものが含まれないとそんな問題もある。
Javascript向けIDE「Spket IDE」の導入
Spket IDEをインストールしてみるメモ。
Spket IDEはJavaScriptのコーディングやXMLなど向けのIDEでAptanaと同様にEclipseのプラグインとしても動作します。
また、Firefox Extension Projectを作成できたりアドオン作成向け機能もある。
今回は単体で動作するスタンドアロンとしてインストールする。
Spket IDEとは何かを詳しく知りたい人は下を読んでみるといいかも。
- [Think IT] 第1回:Spket IDEとは何か? (1/3)
- http://www.thinkit.co.jp/free/article/0709/1/1/
- Spketを使う | OpenLaszlo JP
- http://www.openlaszlo.jp/?q=node/13
- ExtJSの開発はSpket IDEがイイ感じ。Eclipseのプラグインでも動く。 – 蜘蛛の糸をつむぐには…
- http://djodjo.jp/archives/149
- Firefoxアドオン(拡張機能)の作り方
- http://masahal.web.fc2.com/addon_lecture/
- Eclipse plugin Spket IDE を試してみる – hogehoge
- http://d.hatena.ne.jp/teramako/20070409/p1
インストール
上のサイトにインストール手順も書いてあるので重複するけど簡単な流れ
- Downloads からSpket IDEをダウンロード
- jarファイルなので、
java -jar spket-1.6.8.jar みたいな感じでjarファイルを実行してインストーラーを起動 - インストーラーでIDEを選びインストール場所とかを決めてインストール
- 起動するとWorkspaceを聞かれるので適当に決めて動くか確認。
基本的にはEclipseなので、あんまり問題ないと思います。
日本語化
こちらもEclipseと同じやり方が通用するので簡単な流れ
- Pleiades (今回は安定版)をダウンロード
- 中身のfeatures、pluginsをSpket IDEに上書き
- 起動して日本語になってなければ、Spket IDEフォルダのspket.iniの最後に以下を書き加える
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=default.splash
- 変な動作するなら-cleanオプションを付けて見るといいかも。
設定
まず最初に設定から文字コードをUTF-8にしておく
メニューより、Windows > Preferences… を選択し、 General > Workspace > Text file encoding において Other をチェックし、 「UTF-8」 を選択する。
感想
- Aptanaに比べるとかなり軽い
- コード補完にXPCOMもでてくるのが少しウザイ(拡張機能開発には便利そう)
- JSDocに対応している
- アウトラインがわかりやすい
Firebugのコンソールを外部エディタで編集できるようにするuserChome.js
FirebugのコンソールタブにあるコマンドラインはちょっとしたJavascriptの動作を確認する際に便利ですが、普段使ってるエディタのように補完やハイライトされないので、少し複雑になると分かりづらくなりますね。
そこで、内容の編集自体はエディタで行いその内容をコマンドラインに反映させるuserChome.jsを作成しました。
使い方
- ダウンロードしたスクリプトに60行目くらいにエディタのパスを設定する場所があるのでパスを入れる
- Firebugのコンソールタブで大きい方のコマンドラインを開く
- 右下にEditorというボタンがあるので押す
- エディタで内容を編集→保存
- Firefoxにフォーカスを戻すと自動的に反映
下に動作の動画を置いておくので、下を見ればどのように動いてるか分かると思います。
alice0775のスクリプトが元になってるので、Windows以外でも動くとは思います。
ラップする必要があったらしい。
- userChrome.jsの話題9 テキストエリアを外部エディタで編集する – alice0775のファイル置き場 – Yahoo!ジオシティーズ
- http://space.geocities.yahoo.co.jp/gl/alice0775/view/20070223/1172156543
- gist: 235044 – Firebugに外部エディタ起動ボタンを追加するuserChrome.js- GitHub
- http://gist.github.com/235044
メモ
Firebug.chrome.$("fbLargeCommandLine").addEventListener('focus', function(){
Application.console.log("tewt")
}, true);
とかChrome権限でやるとコマンドラインにフォーカスしたときに動作するaddevenetlinerができる。
今回使ってないけど。
LDR all-in-one Hatena extensionを修正
- Fastladder まわり ( はてなまわり機能追加 ) – KBDAHOLIC – やぬすさんとこ
- http://d.hatena.ne.jp/janus_wel/20090111/1231678843
LDR all-in-one Hatena extension.user.jsが動かなくなっていたため、勝手に修正しました。
はてなスター周りはばっさりカットしてしまった。
なので、基本的な機能ははてなブックマーク数とコメント表示をするGreasemonkeyというもの。
修正点
- Greasemonkeyではwindow.evalが使えない、eval.call(window, src) – はてなダイアリー – 無料で簡単。広告のないシンプルなブログをはじめよう!
- http://d.hatena.ne.jp/brazil/20060821/1156164845
JSONをパースするために使われていた上のテクニック部分がエラーを吐いて動いてなかったので、ネイティブJSONを使ってみました。(Firefox3.5~だったかな。)
sabdbox周りの変更が原因らしいです。
- gist: 233723 – GitHub
- http://gist.github.com/233723
Firefox Developers Conference 2009 アウトラインメモ
Firefox Developers Conference 2009に参加して適当にメモを取っていたので一応公開。
とても読みづらく、まとまっていません。 またトークセッションなど力尽きているところもあるので真剣に読んではいけない。
FirebugのDOMタブが壊れた(競合)
最近になってFirebugのDOMタブで要素をクリックしてもその下の要素が展開されなくなったので、何かのアドオンと競合してるのかを調べてみたら、FxIFというEXIFを見るためのアドオンが原因だと分かった。
FxIFを外すか、過去のバージョンにするかで回避できた。
もう一つ、こっちは競合というわけではないけど、ニコニコ動画がリニューアルしてからマイリストにアクセスするとFirefoxが固まってフリーズするようになってしまった。
こちらの原因はIt’s All Text!というテキストエリアをエディタで編集するアドオンを外す事で解消された。
多分Javascriptで動的に表示させるようになったのが要因になって、変な動作をするようになったのかな。
TwitpicのAltが文字化けしているのを修正するGreasemonkey
TwitPicは便利なTwitter向け写真投稿サイトですが、写真のaltに日本語があるとaltの内容が文字化けしてしまいます。
fix twitpic altはその文字化けしたaltを修正するGreasemonkeyです。
インストールすれば、画像にマウスオーバーしたとき文字化けが修正された文字列が表示されます。(Firefox標準だとポップアップはしなかったかも)
今見ているサイトをTwitterに投稿する「Post Now browsing to Twitter」
Post Now browsing to Twitterは今見ているサイトをTwitterに投稿するGreasemonkeyです。
「easy I’m reading now」などすでに同じようなGreasemonkeyがありますが、Post Now browsing to Twitterは
スクリプトをエディタでいじらなくても設定ができるのと、便利なオプションがあるのが特徴です。
インストールして、ステータスバーのGreasemonkeyアイコンを右クリック →
ユーザースクリプトコマンド→Post Now browsing to Twitter Settingから設定ができます。
設定は以下を参考にしてください
- Pre text: 接頭辞に付ける文字列
接頭辞はTwitterにポストする際にコメントを付けなかったときに使われる文字列のことです。 - Use selection: 文字列を選択しているときにそれを「」で囲って引用するか?
引用した文字列はコメントと合わせてポストすることができます。
FirefoxではCtrlを押しながら選択することで、複数の選択範囲を持つことができます。
その場合も各選択範囲を「」で囲いポストできます。 - Short URL: 使用する短縮URLサービス
http://is.gd/ or http://tinyurl.com/ or http://tweetburner.com/ のどれかを使って短縮してから
ポストできるためより多くの文字列をTwitterにポストできます。 - ShortcutKey: ポストするために使うショートカット
- Twitter: 空白のままでも使用できますが、アカウント名とパスワードを入力しておくと、
初回のログインプロンプトがスルーできます。
ただし、セキュリティ的な保証はないので、自己責任でお願いします。
枠内で使いたいショートカットキーを押すと自動で入力されます。
デフォルトはCS+Return(Ctrl+Shift+Enter)
設定はリロードしてから反映されます。
細かい仕様
- 設定で決めたショートカットを押すと、プロンプトが現れるので、コメントを入力したい場合はコメントを入れて、
入れなかった場合は設定で決めた接頭辞が入ったものがTwitterにポストされます。 - コメント+引用+タイトル+URLの合計が140文字以上になったとき、
140文字に収まるようにタイトルの一部を…と省略します。
(残すものの優先順はURL > コメント > 引用 > タイトル となっています。)
- Post Now browsing to Twitter for Greasemonkey
- http://userscripts.org/scripts/show/46441
- azu (azu_re) on Twitter
- https://twitter.com/azu_re
Firebug コマンドラインのフォントを変更とDOM Inspectorの使い方
Firebugのコンソール部分のフォントが見づらいので、変更しようとFirebugのコマンドラインが見難いのでフォントを変えてみた – cloned.logを参考にやったが、
色だけしか変わらなかったので、少し調べてみた。
ChromeフォルダにあるuserChrome.cssに以下を記述することで変更できた。(Stylishでもいいと思う)
#fbLargeCommandLine > .textbox-input-box {
font-size: 11pt !important;
font-family: Consolas !important;
}
CSSで指定するクラス名をDOM Inspectorで特定する流れ。
DOMの方はいろいろめんどくさそうだったのでやってないんですが、DOM Inspectorで簡単に調べられます。
1. てきとーなページを開く
2. Firebugを開いて、ウインドウを分離する
3. DOM Inspectorを開く
4. 「File」→「Inspect Chrome Document」から、分離したFirebugと同じタイトルを持つ項目を選択
5. Inspectボタンで気になるところをクリック
6. ノードからclassなりidなりを拾ってCSSを書く
こんな感じです。
実際にやってる様子




