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

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

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

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

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

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)

Download ツリー型タブ (Tree Style Tab) for Firefox. タブをツリー状に表示します。

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

Glitter Drag

Download Glitter Drag for Firefox. A drag extension that supports you drag text, links and images then helps you open , copy or search it

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

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

設定画面はこんな感じ。

Glitter Dragの設定画面

ScrollAnywhere

Download ScrollAnywhere for Firefox. Grab and drag your scrollbar with your middle mouse button anywhere on the page. Features also: - "grab and drag" - phone...

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

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

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

Download 新しいタブでリンクを開く Open Link with New Tab for Firefox. 設定に応じてリンクを新しいタブで開きます。

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

User-Agent Switcher

Download User-Agent Switcher for Firefox. Quickly and easily switch between popular user-agent strings.

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

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

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

Seerobots

Download Seerobots for Firefox. Seerobots let's you easily see the websites Meta-Robots (index/noindex and follow/nofollow) and X-Robots configuration...

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

NoFollow

Download NoFollow for Firefox. Outlines nofollow links, detect nofollow and noindex meta tags on webpages. Features website filtering and custom CSS outline sty...

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

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

Open With

Download Open With for Firefox. Quickly test out your web pages in Chrome, Edge, Safari, or Opera. Open With opens the current page in your other browsers with ...

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

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

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

Open in Private Mode

Download Open in Private Mode for Firefox. Open the active tab in a private window via toolbar button or context-menu.

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

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

Format Link

Download Format Link for Firefox. Format a link and copy it to the clipboard in your favorite format. You can use the toolbar button or context menus to copy. Y...

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

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

FoxReplace

Download FoxReplace for Firefox. Lets you replace text in web pages. You can define a substitution list and apply it automatically or at your own discretion, or...

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

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

Popup ALT Attributes

Download Popup ALT Attributes for Firefox. 画像の代替テキストをNetscapeCommunicator(Navigator) 4.xなどのようにツールチップで表示するようにします。

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

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

ColorZilla

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

Flagfox

Download Flagfox for Firefox. 現在のWebサイトのサーバーの場所を表す国旗を表示し、サイトの安全性確認やWHOIS、翻訳、似ているサイト、妥当性の確認、URL短縮といったツール群を提供します。

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

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

headingsMap

Download HeadingsMap for Firefox. The extension generates a document-map or index of any web document structured with headings and/or with sections in HTML 5. I...

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

HTTP/2 Indicator

Download HTTP/2 Indicator for Firefox. An indicator showing HTTP/2 support in the address bar.

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

Enhancer for YouTube™

Download Enhancer for YouTube™ for Firefox. YouTube™のユーザーエクスペリエンスを向上させる多数の機能。

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

Google Translator for Firefox

Download Google Translator for Firefox for Firefox. このアドオンを使用すると、ワンクリックまたはホットキーを使用して任意のテキストを母国語に翻訳することができます。翻訳の種類は、選択したテキストを翻訳して元のテキストに上書き表示したり、ページ全体の翻訳があります。

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

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

Download SimilarWeb - トラフィックランク & ウェブサイト分析 for Firefox. エンゲージメント率、キーワード ランク、トラフィック ソースなどサイトのトラフィック、あらゆるサイトの主要指標を表示。

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

Greasemonkey

Download Greasemonkey for Firefox. Customize the way a web page displays or behaves, by using small bits of JavaScript.

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

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

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

Download Stylish - Custom themes for any website for Firefox. ユーザースタイルのマネージャー Stylish で Web のスタイルを新しくする。

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

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

Undo Closed Tabs Button

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

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

はてなブックマーク

Download Hatena Bookmark for Firefox. はてなブックマーク用の公式 Firefox アドオンです。はてなブックマーク ( は株式会社はてなが提供する、日本国内最大のソーシャル・ブックマークサービスです。会社で見つけたサイトをオンラインにブックマーク、家に帰ってゆっくり見たいというニー...

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

AutocopySelection2Clipboard

Download AutocopySelection2Clipboard for Firefox. Autocopy selected text to the clipboard

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

テキストリンク (Text Link)

Download テキストリンク (Text Link) for Firefox. Webページに書かれたURI文字列を、ダブルクリックするだけで読み込めるようにします。

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