0 Firefox も結構使いやすい
最近は新しいブラウザがもてはやされていますが、全てのブラウザを使ってきた上で、Firefox はかなり便利なブラウザだなと思っているので、開発者への感謝としてこの記事を書かせていただきます。 まだ使ったことが無い方は、ぜひ一度インストールして試してみてください。
1 設定を変更する
Cmd ⌘ + , で環境設定ページを開くことができます。初めは、デフォルトで使っているブラウザからデータをインポートするのが良いでしょう。その他、このページで好みの設定に変更してください。
2 便利な機能
以下に Firefox の便利な機能を簡単に列挙しました。そのうちいくつかについては、以降でより詳しく説明しています。- 豊富な拡張機能（アドオン）
-
カスタマイズしやすいツールバー。ツールバー上で右クリックして「ツールバーをカスタマイズ」を選ぶと、次の画面が出てきます。ドラック&ドロップでアイコンを追加&削除できます。
-
サイドバー：以下の様々な情報へのアクセスが簡単になります。
- ブックマーク
- 閲覧履歴
- Synced tabs
Simple Tab Groups（拡張機能） タブをグループ化して整理できます。ウィンドウを閉じてもタブは保存されます。- AI Chatbot: 設定ページの
Firefox Labsにて、AI chatbotにチェックをつけてください。Show prompts on text selectをチェックすると、任意のサイトで選択した文字列を指定している言語モデルにすぐに投げることができます。
- マルチアカウントコンテナ 同じサイトに異なるアカウントで同時にログインできます。例えば、一つのタブでは仕事用のアカウントを用いてあるサイトにログインし、もう一つのタブでは、私的なアカウントで同一のサイトにログインできます。
-
スクリーンショット: Cmd ⌘ + Shift ⇧ + S
スクリーンショットの範囲を以下の四つの方法で選択できます。
- 自分で範囲を選択
- カーソルが乗っているページの一部を自動的に選択
- 見えている範囲全体を選択
- スクロールできる範囲全体を選択
- Reader View: Opt ⌥ + Cmd ⌘ + R Webページの無駄を取り除き、読みやすさを向上させます。
- デバイスの同期
-
userChrome.cssでブラウザの見た目をカスタマイズできます。
3 アドオン（拡張機能）
Warning
アドオンの組み合わせによっては予期しない動作が起こり得ます。この場合は、問題を起こしていそうなアドオンを一旦無効にし、再度 Firefox を起動し直すことで、どのアドオンが問題を起こしているかわかります。どのアドオンが衝突しているか分かったら、GitHub のリポジトリで問題を報告すると良いです。
3-1 生産性関連
Note
Dark Reader は、Firefox の PDF には機能しません。なので次のアドオン
doqment を使うか、下の Bookmarklet (ブックマークのリンク先として Javascript の関数を登録したもの) を使って対応することができます。ここで紹介する Bookmarklet は、普通の Web ページの場合はページ全体の色を反転し、PDF の場合は、PDF のみの色を反転します（2回実行すると元に戻ります）。PDFビューアーの背景のダークモードは 4 about:config 節を参照してください。javascript:(function(){var L='style_combined',S='#viewerContainer>#viewer.pdfViewer>.page{filter:%20invert(93%)}',E=document.querySelector('style[id="'+L+'"]');if(E){E.disabled=!E.disabled}else{var%20css='html%20{-webkit-filter:%20invert(90%);-moz-filter:%20invert(100%);-o-filter:%20invert(100%);-ms-filter:%20invert(100%);%20}',head=document.getElementsByTagName('head')[0],style=document.createElement('style');if(!window.counter){window.counter=1}else{window.counter++;if(window.counter%2==0){css='html%20{-webkit-filter:%20invert(0%);-moz-filter:%20invert(0%);-o-filter:%20invert(0%);-ms-filter:%20invert(0%);%20}'}}style.type='text/css';style.id=L;style.innerHTML=document.querySelector('#viewerContainer>#viewer.pdfViewer')?S:css;head.appendChild(style)}})()Warning
この拡張機能を有効にして PDF を閲覧している際は後述の
Zotero Connector を使うことができません。PDF 以外を開いている場合は問題ありません。Open in Sidebar -> Preferences]、この拡張機能をサイドバーで開くためのショートカットを登録すると便利です。登録方法は後述の項目 3-4 を参照してください。Warning
同様のアドオンに
Side View というものもありますが、これを使用すると YouTube Music のバックグラウンド再生ができなくなります。Multi-Account Containers と互換性があり、それぞれのグループ内のタブをどのコンテナで開くか設定することもできます。この拡張機能をサイドバーで開くためのショートカットを登録すると便利です。登録方法は後述の項目 3-4 を参照してください。
Unsplash がおすすめです。
3-2 YouTube 関連
Enhancer for YouTubeと異なり、YouTube だけでなくAmazonプライムなど、どんな動画でも簡単なショートカットキーで機能して便利です。ビデオの速度は細かく調整でき、2倍速以上にすることも可能です。広告ブロック: 次のセキュリティの項目にも載せていますが、以下のどちらでも YouTube の広告を消せます。
3-3 セキュリティ関連
Warning
前者は Simple tab groups と併用すると問題が発生します。(コンテナ上で開く新しいタブが複製される)
Block element を選択して表示させたくない要素を選ぶことができます。
Note
WebRTC は Web Real-Time Communication（Web リアルタイム通信）の略で、ブラウザ間で外部ソフトウェアやプラグインを必要とせずにインターネットを通じて音声やビデオ通信を直接行う技術です。ビデオ会議やリアルタイム通信には便利ですが、プライバシー上の問題として IP アドレスの漏洩も懸念されます。ブラウザで WebRTC を無効にすると、IP の漏洩を防ぐことができます。
3-4 アドオンショートカットの設定
4 about
about:config ではさまざまな細かい設定を変更できます。
Warning
about:config の項目はバージョンアップによって変更される場合があります。古いサイトにはすでに存在しない項目が挙げられている場合があります。- まず、検索バーに
about:configと入力してEnterキーを押してください。 - 警告ページが表示されますが、そのままクリックして進めます。
-
PDFプレビューをダークテーマにするには以下の設定を
2に変更するpdfjs.viewerCssTheme 2 -
ピンチ機能を有効にするには、以下の設定を
trueに変更するbrowser.gesture.pinch.latched true -
ブックマークを新しいタブで開く
browser.tabs.loadBookmarksInTabs true -
全てのテキストボックスでスペルチェックが有効になるように設定する
layout.spellcheckDefault 2 -
最後のタブを閉じてもウィンドウは開いたままにする
browser.tabs.closeWindowWithLastTab false -
userChrome.cssの適用を許可するtoolkit.legacyUserProfileCustomizations.stylesheets true -
Compact viewを適用可能にするbrowser.compactmode.show true -
アドオンを全てのサイトで利用可能にする
extensions.webextensions.restrictedDomains （全部消す） -
フルスクリーンの遷移をスムーズにする
full-screen-api.macos-native-full-screen false full-screen-api.transition-duration.enter 0 0 full-screen-api.transition-duration.leave 0 0
5 セキュリティ設定
5-1 安全なインターネット接続
- VPNを使用する
- Cloudfareを有効にする
- ECHを有効にする
- WebRTCを無効にする
5-1-1 VPN
仮想プライベートネットワーク（VPN）は、IPアドレスを隠したり、インターネットトラフィックを暗号化したり、地域制限のあるコンテンツにアクセスできるなどのメリットがあります。5-1-2 CloudflareでDoH（DNS-over-HTTPS）を有効にする
- Cmd ⌘ + , で環境設定ページにアクセスします。
- 「ネットワーク設定」までスクロールし、「設定...」をクリックします。
- 「DNS over HTTPSを有効にする」を選択し、プロバイダーとして「Cloudflare」or「NextDNS」を選択します。
- 「OK」をクリックしてタブを閉じます。
5-1-3 ECH（Encrypted Client Hello）を有効にする
- Firefoxを開き、
about:configにアクセスします。 network.dnsを検索します。network.dns.echconfig.enabledをtrueに設定します。network.dns.http3_echconfig.enabledをtrueに設定します。
5-1-4 WebRTCを無効にする
Note
WebRTCはWebリアルタイム通信の略で、ブラウザ間で外部ソフトウェアやプラグインを必要とせずにインターネットを通じて音声やビデオ通信を直接行う技術です。ビデオ会議やリアルタイム通信には便利ですが、プライバシー上の問題としてIPアドレスの漏洩も懸念されます。ブラウザでWebRTCを無効にすると、IPの漏洩を防ぐことができます。
- Firefoxを開き、
about:configにアクセスします。 media.peerconnection.enabledを検索し、falseに設定します。
5-2 テスト
Cloudflare Browser Check をパスすると、以下のように表示されます。
6 コンパクトビューの設定
6-1 コンパクトツールバー
最新のバージョンでは、Compact view を適用可能にするために、まず検索バーに about:config と入力して進み、次の設定に変更してください。
browser.compactmode.show true
6-2 userChrome.css をカスタマイズする
userChrome.css を用いることで、ウィンドウの表示を自分の好みにカスタマイズできます。
-
まず、
userChrome.cssが適用されるように次の設定を変更します。- 検索バーに
about:configと入力して、Enter キーを押します。 - 警告ページが表示されますが、そのままクリックして進めます。
toolkit.legacyUserProfileCustomizations.stylesheetsを検索します。falseになっていたらtrueに変更します。
- 検索バーに
-
次に
chrome/userChrome.cssを作成します。-
まず以下のコードをターミナルで実行して、デスクトップ上に
chrome/userChrome.cssを作ります。mkdir ~/Desktop/chrome; cd ~/Desktop/chrome; touch userChrome.css -
下の
/* compact view settings */以降のコードをuserChrome.cssに貼り付けます。 -
Mac の場合、ファイルの場所が次のパスになるように配置します。
~/Library/Application\ Support/Firefox/Profiles/<****>.default-release/chrome/userChrome.css(<****> は 8桁の英数字です) サーチバーに aboutと入力すると下の画面が現れ、赤枠の部分の Show in Finder をクリックすると開くことができます。 
- Firefox を再起動します。
-
まず以下のコードをターミナルで実行して、デスクトップ上に
chrome/userChrome.css
1/* compact view settings */
2/* compact bookmarks popup panel in toolbar */
3#personal-bookmarks .bookmark-item,
4#bookmarksMenuPopup .bookmark-item { max-width: 210px !important; }
5
6/* compact "Show tabs from other devices" view in toolbar*/
7#PanelUI-remotetabs,
8#PanelUI-remotetabs-tabslist{
9 height: flex !important;
10 min-width: 100px !important;
11 max-width: 210px !important;
12}
13
14/* compact library panel view in toolbar */
15#appMenu-libraryView,
16#PanelUI-history,
17#PanelUI-bookmarks {
18 min-width: 210px !important;
19 max-width: 210px !important;
20 max-height: 400px !important;
21}
22
23/* compact extensions panel view in toolbar */
24#unified-extensions-panel panelview
25{
26 width: 210px !important;
27 max-height: 500px !important;
28}
29
30/* compact 3-bar icon panel view in toolbar */
31#appMenu-popup panelview,
32#PanelUI-fxa {
33 width: 210px !important;
34}
35
36/* compact alltabs button at top right corner */
37#allTabsMenu-allTabsView {
38 min-width: 100px !important;
39 max-width: 210px !important;
40}/* bring tabs below search bar */
#titlebar {
order: 1 !important;
}
/* remove maximum/minimum width restriction of sidebar */
#sidebar-box {
min-width: 0px !important;
max-width: none !important;
}7 その他
- Firefox のキーボードショートカット
- Cmd ⌘ を押しながら、リンクをクリックすると必ず新しいタブでリンクを開きます。