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

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

デスクトップ、iOS、Android から選択してください。モバイルダウンロード用リンクをメールでお送りすることもできます。

ただ、新しい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.

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

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

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

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

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

Firefox Quantumで導入したアドオン

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

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

ツリー型タブ (Tree Style Tab)

Firefox 向け Tree Style Tab - ツリー型タブ をダウンロード。タブをツリー状に表示します。

僕が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

Firefox 向け ScrollAnywhere をダウンロード。Scroll page without touching scroll-bar! Press Middle (Right / Left) mouse button anywhere on the page to scroll just like wi...

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

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

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

Firefox 向け 新しいタブでリンクを開く Open Link with New Tab をダウンロード。設定に応じてリンクを新しいタブで開きます。

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

User-Agent Switcher

Firefox 向け User-Agent Switcher をダウンロード。Quickly and easily switch between popular user-agent strings.

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

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

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

Seerobots

Firefox 向け Seerobots をダウンロード。Seerobots let's you easily see the websites Meta-Robots (index/noindex and follow/nofollow) and X-Robots configuration...

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

NoFollow

Firefox 向け NoFollow をダウンロード。Outlines nofollow links, detect nofollow and noindex meta tags on webpages. Features website filtering and custom CSS outline styles

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

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

Open With

Firefox 向け Open With をダウンロード。Quickly test out your web pages in Chrome, Edge, Safari, or Opera. Open With opens the current page in your other browsers with jus...

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

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

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

Open in Private Mode

Firefox 向け Open in Private Mode をダウンロード。Open the active tab in a private window via toolbar button or context-menu.

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

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

Format Link

Firefox 向け Format Link をダウンロード。Format a link and copy it to the clipboard in your favorite format. You can use keyboard shortcuts, the toolbar button, or contex...

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

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

FoxReplace

Firefox 向け FoxReplace をダウンロード。Lets you replace text in web pages. You can define a substitution list and apply it automatically or at your own discretion, or ma...

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

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

Popup ALT Attributes

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

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

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

ColorZilla

Firefox 向け ColorZilla をダウンロード。Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies...

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

Flagfox

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

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

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

headingsMap

Firefox 向け HeadingsMap をダウンロード。The extension generates a document-map or index of any web document structured with headings and/or with sections in HTML 5. It s...

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

HTTP/2 Indicator

Firefox 向け HTTP Version Indicator をダウンロード。An indicator showing the HTTP version used to load the page in the address bar.

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

Enhancer for YouTube™

Firefox 向け Enhancer for YouTube™ をダウンロード。YouTubeを管理して、ユーザー体験を向上させましょう!

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

Google Translator for Firefox

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

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

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

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

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

Greasemonkey

Firefox 向け Greasemonkey をダウンロード。Customize the way a web page displays or behaves, by using small bits of JavaScript.

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

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

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

Firefox 向け Stylish - Custom themes for any website をダウンロード。ユーザースタイルのマネージャー Stylish で Web のスタイルを新しくする。

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

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

はてなブックマーク

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

AutocopySelection2Clipboard

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

テキストリンク (Text Link)

Firefox 向け テキストリンク (Text Link) をダウンロード。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コードをコピペして保存してください。

/* タブバーを非表示にする */
#tabbrowser-tabs {
  visibility: collapse !important;
}

/* サイドバーのヘッダも非表示にする場合はこちらも */
#sidebar-header {
  visibility: collapse;
}

保存したら、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