WEB制作向けFirefox Quantumの初期設定まとめ

僕はデフォルトブラウザにFirefoxを使っています。

応答性の高いエンジン、省メモリー、豊富な機能。デスクトップ版を今すぐダウンロード。

ただ、新しいFirefox Quantumになってからというもの、どうしてもアドオンの使用感に納得がいきませんでした。

仕方ないので、レガシーアドオン(古いアドオン)が利用できるPale Moon、Waterfox、Cyberfoxなどを利用することで騙し騙し利用してきました。

Pale Moon is an Open Source, Mozilla-derived web browser available for Microsoft Windows and Linux, focusing on efficiency and ease of use.
Waterfox is a free, open and privacy focused web browser built for you. Keeping the web open.
Home of Cyberfox web browser

最初はそれでもよかったんですが、どうしても古いアドオンを利用しているせいか、時が経つにつれ不具合も目立ってきました。

で、先日重要だったレガシーアドオンが使えなくなったのを契機に、「これダメかも…、もう一度Firefox Quantumに挑戦してみるか…」と試してみることに。

結果、思っていたよりも代替アドオンが出ていて、Firefox Quantumもかなり使えるようになっていました。

そんなわけでレガシーFirefox系からFirefox Quantumに乗り換えたので、移行手順を備忘録用にメモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

Firefox Quantumで導入したアドオン

新しいFirefoxで導入したアドオンです。

僕の場合、Firefoxの主な利用目的は、Wordpress開発なので、それになるべく最適化できる設定にしているつもりです。

ツリー型タブ (Tree Style Tab)

僕がFirefoxを使う最大の理由は、「タブをツリーで管理したいから」なので、このアドオンは必須です。タブをツリーで管理できるのと出来ないのでは、作業効率が全然違うので。

Glitter Drag

テキストD&Dで検索したり、リンクD&Dで別のタブで開いたりするためのアドオン。

「ツリー型タブ」アドオンとの相性が最も良い(新しくタブをD&D開いたときに子タブとして開かれる)ため、これも手放せません。

設定画面はこんな感じ。

Glitter Dragの設定画面

ScrollAnywhere

背景をマウスでつかんでグリグリとスクロールさせることが出来るアドオン。

スマホのスワイプみたいな感じで操作できます。慣性スクロールの設定も可能。

新しいタブでリンクを開く Open Link with New Tab

リンク属性に合わせて.リンクの開き方を設定できるアドオン。

User-Agent Switcher

ユーザーエージェントを切り替えてWEBの動作確認をするためのアドオン。

以下のようなユーザーエージェントを選択できます。

選択可能なユーザーエージェント

Seerobots

ページのnoindex、nofollow状態をソースコードを見なくても視覚的に分かりやすく表示してくれるアドオン。

NoFollow

こちらもページのnoindex、nofollow状態を分かりやすく表示してくれるアドオンです。

こちらは、nofollowリンクをハイライト表示してくれます。Seerobotsとどちらを使うかは好み。

Open With

Firefoxで現在開いているページを、他のブラウザですぐに開けるようにするためのアドオンです。

WEB制作中のブラウザー間動作チェックに非常に便利。

ただ、Firefox Quantumになったら、Pythonとコマンドプロンプトを使用して初期設定する必要があって少し面倒。

Open in Private Mode

現在開いているページをプライベートモードで一発で開くボタンが追加されます。

プライベートモードは、ブラウザキャッシュを適用したくない動作確認時に便利です。

Format Link

Make Link代替のタグ生成補助アドオン。

使い方にクセがあるのでMake Linkより使いづらい部分もあるけど、今はこれしかないっぽい。

FoxReplace

WEBページの入力ボックス内容などをブラウザから置換できるアドオン。

WordPress記事作成時などにも便利。

Popup ALT Attributes

画像にマウスカーソルを乗せるとAlt属性値をポップアップ表示してくれるアドオン。

画像のAlt属性チェックに便利。

ColorZilla

Download ColorZilla for Firefox. Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies...

マウスカーソル部分のカラーコードを取得できるカラーピッカー。

Flagfox

Webサイトのサーバーの場所を表す国旗を表示し、サイトの安全性確認やWHOIS、翻訳、似ているサイト、妥当性の確認、URL短縮といったツール群を提供してくれるアドオン。

フィッシングサイトの判別などにも。

headingsMap

HTML5のアウトライン構造を見やすく表示してくれます。また、セクション構造も視覚的に表示してくれるので分かりやすい。

HTTP/2 Indicator

サイトでHTTP/2通信が行われている場合は、分かりやすくアイコンを表示してくれるアドオン。

Enhancer for YouTube™

YouTubeの装飾をしてくれるアドオン。僕は、動画を自動再生させない設定を行うために利用しています。

Google Translator for Firefox

選択したテキストとページ全体をGoogle翻訳で翻訳します。

SimilarWeb – トラフィックランク & ウェブサイト分析

他サイトの大まかなアクセス情報を見ることが出来る、サイト分析ツール。

Greasemonkey

スクリプト管理マネージャーです。

サイトごとに動作するスクリプトを変更したり、自分でスクリプトを書いて制御したりすることも可能です。

Stylish – ウェブサイト用カスタムテーマ

サイトごとのCSSを制御するためのアドオンです。

文字が小さすぎるサイトの文字を大きくしたり、表示させたくない部分を非表示にするなんてことも可能です。

Undo Closed Tabs Button

閉じたタブの履歴をリスト形式で分かりやすく表示してくれるアドオン。

通常の履歴は、日付ごとにフォルダで階層化されていて使いづらいので。

はてなブックマーク

Firefoxではてブサービスを手軽に使うためのアドオン。

AutocopySelection2Clipboard

選択テキストを自動的にコピーしてくれるアドオン。

テキストリンク (Text Link)

Webページに書かれたURI文字列を、ダブルクリックするだけで開けるようにしてくれるアドオン。

Firefox設定の調整

アドオンで動作を制御できない部分は、Firefoxの詳細設定で行います。

詳細設定を行うには、アドレスバーに”about:config”と打ち込んで開きます。

Firefoxの詳細設定を開く

すると「動作保証対象外になります!」と出るので「危険性を承知の上で使用する」ボタンを押します。

「動作保証の対象外になります!」画面

すると以下のような画面が表示されるので、ここから設定を行います。

Firefoxの詳細設定画面

ブックマークを常に新しいタブで開く

「browser.tabs.loadBookmarksInTabs」で検索し、値を「true」にします。

browser.tabs.loadBookmarksInTabs

検索ボックスからの検索結果を新しいタブで開く

「browser.search.openintab」で検索し、値を「true」にします。

browser.search.openintab

外部アプリからリンクを開いた場合Firefoxにフォーカスを移さない

「browser.tabs.loadDivertedInBackground」で検索し、値を「true」にします。

browser.tabs.loadDivertedInBackground

WordPressローカル環境等もSSLエラーを出さずに開く

僕はWordpressローカル環境にLocal by Flywheelを使用しているのですが、SSLで開くときに、サーバー証明書がなくてSSLエラーが出ました。そうなった場合の対処方法(例外設定できない際の対処法)も書いておきます。

「network.stricttransportsecurity.preloadlist」で検索し、値を「false」にします。

network.stricttransportsecurity.preloadlist

セキュリティー的に弱くなる設定なので、推奨はしません。

その他の設定

Firefoxのプロファイル設定を変更します。

上部のタブを非表示にする

ツリー型タブで「サイドバーにタブを表示しているので上部にタブは必要ない」なんて時の設定です。

この部分のタブを消します。

上部のタブ表示は不要

まずはFirefoxメニューの「ヘルプ」を開きます。

Firefoxメニューのヘルプを開く

「トラブルシューティング情報」メニューを開きます。

ヘルプのトラブルシューティング情報を開く

「アプリケーション基本情報」にある「プロファイルフォルダー」項目にある「フォルダーを開く」をクリックします。

プロファイルフォルダを開く

するとプロファイルフォルダーがエクスプローラーで開かれます。

Firefoxプロファイルフォルダがエクスプローラーで開かれる

プロファイルフォルダー内に「chrome」フォルダーを作成します。

既にフォルダーがある場合はそのフォルダーを開いてください。

フォルダー内に、「userChrome.css」ファイルを作成してください。

既にファイルがある場合は、そのファイルを編集してください。

作成したファイルを開いて以下のCSSコードをコピペして保存してください。

保存したら、Firefoxを再起動してください。

再起動後にタブが消えているかと思います。

参考 Firefox Quantum(57以上)で上部のタブバーを消す – Qiita

Firefox Quantumに変更した感想

Firefox Quantumにして感じた利点と難点。

良かった点

Firefox Quantumをしばらく使ってみて良かった点を挙げるとこんな感じ。

  • ページの読み込みが速い
  • タブを閉じた後の動作が速い(タブ周り動作が高速)
  • 新しいFirefoxを使える安心感(更新的な意味で)

Firefox Quantumを使ってみての一番の利点は、やはり動作の軽快さかと思います。

特に、「タブを閉じた後にメモリの解放のためにしばらく固まる」なんてことはなく、すぐに次の動作に移れるのは、ありがたいです。

レガシーFirefoxでもタブを1つか2つしか開かなければ、そんなに動作も遅くは感じません。けれど、どうしてもWEB制作などをしていると、いくつもタブを開いてしまうので、余計な待ち時間が減ったのは助かります。

難点

古いFirefoxの方が良い点もわずかですがあります。

  • デベロッパーツールにFirebugを使えない
  • アドオンバー(下段のツールバー)が使えない
  • ページを開こうとするとCSSが反映されない不具合が結構ある
  • 速いと言っても動作が固まる時はある
  • 多くタブを開こうとすると、たまに全く読み込まれないものもある

感じた難点はこんな感じでしょうか。

Firebugを使いたいのは、以下のようにデベロッパーツールをブラウザ幅一杯に使えるからです。

Firebugだと開発者ツールがブラウザー幅いっぱいに使える

新しいFirefoxだと、ツリー型式タブを利用すると、以下のようにデベロッパーツールの作業領域が狭まります。

Firefox Quantumだとプラザ幅いっぱいに開発ツールを使えない

ほんのこれだけの作業領域の違いなんだけど、結構一覧性が下がって使いづらくなってしまいます。

この一点だけを除けば、ほぼほぼFirefox搭載のデベロッパーツールに不満はないのだけど、これを何とかする方法は見つからなかった。

まだまだ細かな補助機能の点においてFirebugの方が使いやすいとは感じています。それだけ素晴らしいアドオンだった。

あと、新しいFirefoxは、アドオンバー(フッターツールバー)が使えないのも地味に痛いです。

ここに情報を表示できるのは、やっぱりありがたい。

レガシーFirefoxのアドオンバー

現在の仕様だと上部ツールバーしか使えないので、使える領域が狭い。現在のFirefoxの仕様上難しいのかもしれないけどアドオンバーはありがたかった。

とは言っても、「Firefox Quantumにした難点は、このぐらいで済んだ」と言えるぐらいの範囲で済んだかも。

まとめ

Firefox Quantumが公開されたのが2017年11月です。

当時使用した感想としては「古いアドオンが使えなくてかなりキツイ…」という印象でした。

けれど現在までの間、改善、代替アドオンの公開、代替設定方法の共有、が進んで個人的にはほぼほぼ遜色ないところまで来た感じはします。

レガシーアドオンを使えるFirefoxは、機能面では十分なんだけど、だんだんアドオンも使えなくなるし、何より重い。そういったことを総合的に考えると、Firefox Quantumにした方が良いかなという判断になりました。

何せFirefox Quantumは、今後新たにアドオンも出てくるでしょうし、不具合があってもどんどん改善されていくでしょう。そして何よりも、タブ周りの動作が速いのは、かなりのストレス軽減。

これまでWEB制作の動作確認をするのに、「動作を確認している時間」よりも、「処理待ちをしている時間」の方が遥かに長かったような気がします。

今回Firefox Quantumにしたことにより、それが半々ぐらいにはなったと思います。

サイト Mac、PC、Linux 向け新高速ブラウザー | Firefox