Web scratch

Posts Tagged ‘Firefox’

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

実際に統合するとしたような感じになります。

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

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したものが含まれないとそんな問題もある。

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

インストール

上のサイトにインストール手順も書いてあるので重複するけど簡単な流れ

1. Downloads からSpket IDEをダウンロード
2. jarファイルなので、java -jar spket-1.6.8.jar みたいな感じでjarファイルを実行してインストーラーを起動
3. インストーラーでIDEを選びインストール場所とかを決めてインストール
4. 起動するとWorkspaceを聞かれるので適当に決めて動くか確認。

基本的にはEclipseなので、あんまり問題ないと思います。

日本語化

こちらもEclipseと同じやり方が通用するので簡単な流れ

1. Pleiades (今回は安定版)をダウンロード
2. 中身のfeatures、pluginsをSpket IDEに上書き
3. 起動して日本語になってなければ、Spket IDEフォルダのspket.iniの最後に以下を書き加える

   -javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=default.splash

4. 変な動作するなら-cleanオプションを付けて見るといいかも。

日本語化した画面

設定

まず最初に設定から文字コードをUTF-8にしておく

感想

• Aptanaに比べるとかなり軽い
• コード補完にXPCOMもでてくるのが少しウザイ(拡張機能開発には便利そう)
• JSDocに対応している
• アウトラインがわかりやすい

FirebugのコンソールタブにあるコマンドラインはちょっとしたJavascriptの動作を確認する際に便利ですが、普段使ってるエディタのように補完やハイライトされないので、少し複雑になると分かりづらくなりますね。
そこで、内容の編集自体はエディタで行いその内容をコマンドラインに反映させるuserChome.jsを作成しました。

• Firebug_editor.uc.js

使い方

1. ダウンロードしたスクリプトに60行目くらいにエディタのパスを設定する場所があるのでパスを入れる
2. Firebugのコンソールタブで大きい方のコマンドラインを開く
3. 右下にEditorというボタンがあるので押す
4. エディタで内容を編集→保存
5. 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ができる。
今回使ってないけど。

Fastladder まわり ( はてなまわり機能追加 ) – KBDAHOLIC – やぬすさんとこ

http://d.hatena.ne.jp/janus_wel/20090111/1231678843

LDR all-in-one Hatena extension.user.jsが動かなくなっていたため、勝手に修正しました。

• 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に参加して適当にメモを取っていたので一応公開。
とても読みづらく、まとまっていません。 またトークセッションなど力尽きているところもあるので真剣に読んではいけない。

Read the rest of this entry »

最近になってFirebugのDOMタブで要素をクリックしてもその下の要素が展開されなくなったので、何かのアドオンと競合してるのかを調べてみたら、FxIFというEXIFを見るためのアドオンが原因だと分かった。
FxIFを外すか、過去のバージョンにするかで回避できた。

もう一つ、こっちは競合というわけではないけど、ニコニコ動画がリニューアルしてからマイリストにアクセスするとFirefoxが固まってフリーズするようになってしまった。
こちらの原因はIt’s All Text!というテキストエリアをエディタで編集するアドオンを外す事で解消された。
多分Javascriptで動的に表示させるようになったのが要因になって、変な動作をするようになったのかな。

TwitPicは便利なTwitter向け写真投稿サイトですが、写真のaltに日本語があるとaltの内容が文字化けしてしまいます。
fix twitpic altはその文字化けしたaltを修正するGreasemonkeyです。

• fix twitpic alt

インストールすれば、画像にマウスオーバーしたとき文字化けが修正された文字列が表示されます。(Firefox標準だとポップアップはしなかったかも)

Post Now browsing to Twitterは今見ているサイトをTwitterに投稿するGreasemonkeyです。
「easy I’m reading now」などすでに同じようなGreasemonkeyがありますが、Post Now browsing to Twitterは
スクリプトをエディタでいじらなくても設定ができるのと、便利なオプションがあるのが特徴です。

• 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: ポストするために使うショートカット

枠内で使いたいショートカットキーを押すと自動で入力されます。
デフォルトはCS+Return(Ctrl+Shift+Enter)

• Twitter: 空白のままでも使用できますが、アカウント名とパスワードを入力しておくと、
  初回のログインプロンプトがスルーできます。
  ただし、セキュリティ的な保証はないので、自己責任でお願いします。

設定はリロードしてから反映されます。

細かい仕様

• 設定で決めたショートカットを押すと、プロンプトが現れるので、コメントを入力したい場合はコメントを入れて、
  入れなかった場合は設定で決めた接頭辞が入ったものが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のコンソール部分のフォントが見づらいので、変更しようとFirebugのコマンドラインが見難いのでフォントを変えてみた – cloned.logを参考にやったが、
色だけしか変わらなかったので、少し調べてみた。
ChromeフォルダにあるuserChrome.cssに以下を記述することで変更できた。(Stylishでもいいと思う)

#fbLargeCommandLine > .textbox-input-box {
  font-size: 11pt !important;
  font-family: Consolas !important;
}

CSSで指定するクラス名をDOM Inspectorで特定する流れ。