Numb.

Avatar

Just another WordPress weblog

stylish 設定メモ

Firefox 拡張の、Stylish 用 CSS。 自分用メモ。

[Read more]

Firefox + keyconfig で bookmarklet をショートカット登録

以前から CSS ON⇔OFF bookmarklet を keyconfig という add-on を使い、ショートカットに登録しています。CSS ON⇔OFF がワンキーでさくさく切り替えられ、これが凄く便利。

すごーく便利なのですが、OS を入れ直したり、Firefox を入れ直したときにいつも忘れてしまうので自分のためにメモ。

[Read more]

Firefoxの不要メニューを userChrome.css で隠す

今までは MenuEditor という add-on を使って不要メニューを非表示にしていたのですが、 PC を変えたついでに Firefox をダイエットさせようかなと userChrome.css で隠す方法に変えてみました。

参考にしたのは以下のサイトです。

userChrome.css に直接書いてももちろん OK ですが、 Stylish を使っているならグローバルスタイルの css として保存しておくのも手軽です。 私は Stylish に「Menu Editor - css」という感じの名前で以下の内容を設定しました。

長いので以下、全文表示ページで。 [Read more]

Firebug のショートカットをマウスサイドボタンに割り当てる

Firefox を使っていて Web 制作をしている方に人気の add-on、Firebug 。 javascript 方向にも秀でているらしいのですが、私はもっぱら css チェックや xhtml の構造チェックに使ってます。

Inspect を押して画面内の調べたい場所をクリックすると、そのクリックした場所の xhtml 該当部分がすぐ見れて、 その部分にかかっている css も一覧ですぐ見れる! その上、その css や xhtml の値や数字も変更して見た目がどう変わるかもすぐ確認できちゃったり。 仕事中は使用頻度が凄く高く、コレがあるおかげで大分作業時間も短縮できて助かってます。

表示が意図したものにならなかったり、崩れてしまったり、後から一部分変更したい時などに大活躍。 何度も何度も Inspect を押すので、最初は Firefox のツールバーに Inspect (眼鏡のアイコンのもの)を置いていました。 けど、本当に回数が多いのでそれすら面倒なくらいになってきまして、最近はマウスにショートカットを割り当てています。

Firebug のショートカット一覧
Firebug Keyboard Shortcuts

よく使うのは、以下の 3 つ。

  • Open Firebug Panel : F12
  • Close Firebug Panel : F12
  • Toggle Inspect Mode : Ctrl+Shift+C (Mac なら ⌘+Shift+C)

サイドボタンが 2 つあるマウスなので、サイドボタン 1 に F12、サイドボタン 2 に Ctrl+Shift+C を割り当てています。 これが思っていたよりずっと快適だったので、オススメしてみます。

Photoshop で画像の切り出しをしたり、コーディングをしたりとアレコレ移動して見ている場合、左手はキーボード右手はマウスが多いです。 なので F12 はちょっと押しにくいですし(右手をマウスから離す必要があるため)、 かといって Firefox のツールバーに何度も何度もマウスを移動させるのも結構面倒で大変です。

Inspect を押したり、F12 を押すのも数回なら別に良いですが、作業中下手をすれば数百回行う作業なので塵も積もれば山となるということで… マウスのサイドボタン一発にしてしまうことでかなり楽になりました。

Firebug のショートカットを割り当てたことでマウスサイドボタンで「前のページに戻る」「次のページへ進む」などができなくなりましたが、 マウスジェスチャーかキーボードショートカットでページ移動系は行っています。 ページ制作中は、その作っているページを開いたままにしておき「Inspect を使って問題点を確認→修正→リロード」、 という作業を繰り返することが多く、ページ移動はあまりしません。 ですのでジェスチャーやキーボードショートカットでページ移動するのに不便は感じていません。

Web 制作で同じような作業をよくする方は、マウスボタン割り当てオススメですよ~ :mrgreen:

YSlow for Firebug が熱い

YSlow for Firebug というものが、 Yahoo! Developer Network からリリースされたようです。

これは Firefox + Firebug の環境に追加して使える add-on で、 ページの表示速度に関する様々なポイントの対策度具合によってランクを付け、改善するためのポイントをあげてくれるというもの。

YSlow を入れると、Firebug に YSlow の項目が追加されます。当然 Firebug が入っていないと動きませんので注意。

表示速度の計測をしてくれる add-on 等は今までもありましたが、 YSlow は具体的に「では、どこを改善すれば読み込みが早くなるのか?」を表示してくれる点が使いやすい。 使い慣れた Firebug に一体化するというのも、私にとっては分かりやすかったです。

私も調べてみましたが、かなり多くの改善ポイントが出てしまいました。 全てを A にすることは難しそうですが、出来るところは改善していきたいなと思います。

ちなみに、ソースはこちらです。

アドオンをインストールして任意のページを開くと、Firebugのメニューの中にYSlowが追加される。Performanceのタブには、パフォーマンスの点数(下記では「C(71)」)と、13の項目のそれぞれについてパフォーマンス対策がされているかどうかを、A~Fのグレードで表示してくれる。

秋元@サイボウズラボ・プログラマー・ブログ: YSlow for Firebug ページのチューニングを助言してくれるFirefoxアドオン 』より引用

検索履歴が残らない原因

Firefox2.0 にしたころからだと思うのですが、Firefox デフォルトのサーチボックスで検索した際に検索履歴が残らなくなってしまっていました。「なぜだろう、おかしいなあ」とずっと思っていたのですが、やっと原因が分かりました。

私は Tab Mix Plus という拡張を入れているのですが、どうもそのセッション復元機能のせいだったようです。Tab Mix Plus のセッション機能を使わなければ、検索履歴がちゃんと残りました。

[Read more]

Textarea などをリサイズする

Textarea が固定サイズで(しかも小さい場合)、リサイズして大きくできたら文章が見やすくていいのにと思うことがあります。色々リサイズする手段があるようなので、纏めておきます。

Firefox 拡張と、bookmarklet、Greasemonkey の 3 つです。

[Read more]

Tab in Textarea

Firefox の拡張 Tab in Textarea を入れてみました。 テキストエリアで tab キーを押した場合、通常はフォーカスが次のエリアに行って tab の入力はできません。この拡張は、次のエリアにフォーカスを移動せず tab を入力できるようにするというものです。tab による移動ができなくなるので、キーボード派の方には問題があるかもしれませんが、マウス併用派、マウス派なら良いかもしれません。

WordPress のテーマエディタからちょっとだけ css などを修正したいとき、tab が使えたら便利なのにと思っていたのでこれは嬉しい。以下のサイトで日本語化されたものが配布されています。

ふと今日は・・・・・・ Tab in textarea 日本語化
ふと今日は・・・・・・ Tab in textarea 日本語化

インデントをスペースではなくて tab で行っている人は、入れてみるとちょっと便利かもしれません。 タブで移動できなくなるのがちょっと不便なので、私は使い続けるかは検討中ですが最初感動したのでご紹介してみます ;)

「Copy URL+」+「MozShot」

firefox の拡張「Copy URL+」は、ページの URL やページのタイトルなどコピーする機能を追加できるものです。 何をコピーするか、どういう風にコピーしたものを書き出すか、などを自分好みに設定して使うことができます。

たとえば以下のような使い方が可能です。

  1. 引用したいサイトを表示させ、引用文を選択
  2. 右クリックして Copy URL+ から任意のものを選ぶ
  3. ペーストしたら、その引用文とサイトへのリンクが HTML として貼り付けられる

とても便利なので、ブログを書いている方なら使っている方も多いはず。

[Read more]

Firefox2.0 へバージョンアップ&拡張の調整

Firefox2.0 が正式にリリースされましたね~。 さっそくバージョンアップしてみました。一部の拡張がそのままでは使えなかったのですが、 ちょっとした修正で使えるようになり、ほぼ不便ない状態にでき移行が完了しました。

参考にさせていただいたのは下記の一文。

以下のエクステンションはまだ2.0対応のものがなかったのですが、ダウンロードしたxpiファイルを7zipで開き、中のinstall.rdfの中のバージョン番号を1.5.*とかなっていたのを2.0.*と直して保存したらインストールして使えるようになりました。

Going My Way: Firefox2.0のリリースで利用できるおすすめエクステンション、追加検索エンジンリスト』より引用

こちらのサイトには、2.0 対応の拡張(エクステンション)や、修正で使えるようになった拡張の一覧もあり、 バージョンアップの際に見ておくと大変便利だと思います。 Tab Mix Plus に Dev-build が用意されていて、そちらが Firefox2.0 へ対応しているというのは こちらの記事で知りました。Tab Mix Plus が使えるかどうかは大きな問題だったので、助かりました。

対応してないよ!って拡張も多いのは確かなので、 以下に対応していない拡張の修正方法を詳しく書いておきます。

[Read more]

Next,

PAGE TOP