Firefoxでテキストエリアを外部エディタで編集する External Editor Extension

firefox

フォームなどのテキストエリアの内容を外部のエディタで編集できるようにするExtension。

上のページからExtensionをインストールして、[ツール]→[拡張機能]→[External Editor(JP)]を選択。設定用ダイアログで、

  • 外部エディタのパス
  • テンポラリファイルのファイル名
  • 文字コード

を設定する。とりあえず利用するには、外部エディタのパスのみ設定すればよい。

設定が完了したら、テキストエリアにカーソルを合わせ[右クリック]→[外部エディタで編集]で、エディタが起動する。エディタで編集したら、保存して、エディタを閉じるとテキストエリアに編集内容が反映される。

ちなみに、日本語対応版作者のKimitake氏が再起動の不便さについて以下のようにs言及されていますが、Google Browser Sync をインストールすれば、こういった悩みは解消されます（再起動時に前回表示画面を再表示してくれるので）。ご参考まで。

それにしても Extension のデバッグってすっごい面倒。Extension スクリプトの中身変更するたびに Firefox を再起動しなきゃいけない。単に再起動するだけだったらそんなに面倒じゃないんだが、調べものしながらの作業なので、いちいち見つけたページをブックマークしとかんといかん。

External Editor のオプション画面

userContent.css を編集してGmail の本文を等幅フォントで表示

gmail firefox

Gmail の本文を等幅フォントで表示するTip。bowz weblogより。

Gmail の本文を等幅フォントで表示する

userContent.css に以下のスタイルシートを追加する。

@-moz-document domain(mail.google.com) {
  div[class="mb cb"] {
    font-family: monospace !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  textarea {
    font-family: monospace !important;
  }
}

なお、userContent.css の編集方法は以下の通り。

userContent.cssの編集方法

userContent.cssはFirefoxで定義可能なユーザースタイルシート。ユーザースタイルシートとはウェブ製作者が指定しているCSSに対してユーザー側からCSSを指定して、ユーザーがウェブの表示を変更できる仕組のこと。

userContent.css はFirefoxのプロファイルフォルダ直下のchromeフォルダ以下に配置する。プロファイルフォルダの場所はOSにより異なるが、WindowsXPの場合は、以下の通り。

%APPDATA%\Mozilla\Firefox\Profiles\(英数字の羅列).(プロファイル名)\

なお、上記のフォルダにuserContent-example.cssというファイルがはじめから配置されているので、これをuserContent.cssにリネームしてカスタマイズする。

userContent.cssについては以下のサイトが詳しい。

また、userChrome.cssやuserContent.cssなどのユーザースタイルシートやuser.jsなどの設定ファイルを簡単に編集することができるChromEditというExtentionもある。

cssのimportant規則

等幅フォントにするためのCSS中の「!important」は、もともとのスタイルと衝突した際に、優先順位を高めるための構文。

! importantを特定することで、規則が重要なものとして指定され得ます。重要なものとして指定されたスタイルは、それがなけれが同等の重みの矛盾するスタイルを凌駕します。おなじように、制作者とユーザーの両者が重要な規則を特定するかもしれないので、重要なケースでは制作者の規則が読み手のものを上書きします。