Firefox Quantumへの移行

Firefoxはver.57からQuantumというコード名？が付き、安定性と速度が大幅に向上した。

主な悩みは、それと引き替えに大幅に低下したカスタマイズ性。今までアドオンでゴテゴテに自分好みにして使ってきたものを、どう再現するか。

Cyberfoxのサポートも近々切れ、いよいよ重い腰を上げなきゃいけなくなった。

ある程度のシェアが無いと、利便性の高いアドオンの開発・維持が盛んに行われない。 Firefoxでできていたことを再現できるほどアドオンが充実しているブラウザは無い（と思う）

カスタマイズ性は（旧来のFirefoxと比較すると）高くないが、諦めて流儀に従う。

カスタマイズ性は（旧来のFirefoxと比較すると）高くないが、諦めて流儀に従う

これらはFirefoxのソースコードを流用、改造したクローンブラウザ。Quantumより前のソースコードベースで開発を続けてもらえれば、当面は旧来のアドオンも使える。

ただしアドオンは今後Quantum向けに開発され、旧来向けのアドオンの新規開発・維持は次第に無くなっていくだろうので、安泰というわけでも無い。

Quantumを使う方針で調べる。

• Firefoxである以上、アドオンが使えなくなったが基本的な操作では慣れているはず
• せっかく速くなったんだから使ってみたい
  • 実際使ってみたら、YouTubeなどCyberfoxでは若干読み込みに時間がかかっていた重いページも、かなりするっと読めて感動した
• 先人たちの移行記事がある

Firefox Syncを使った移行が便利。profileファイルの上書きだと、無駄な設定が残ったり必要な設定が上書きで無くなったりしそう（という勝手なイメージ）

ただ、ちゃんと手順を踏まないと、旧ブラウザの環境が破壊され、戻ろうとしても戻れなくなる（面倒になる）ので注意。

1. 旧ブラウザでSyncのアカウントを作り、ログイン
   1. 同期
   2. ログアウト
2. 新ブラウザでSyncのアカウントでログイン
   1. 同期
   2. ログアウト
3. 新ブラウザに合わせた各種設定

Roomy Bookmarks Toolbar のレビュー – Firefox 向けアドオン

ブックマークツールバーをスマートにする。faviconのあるURLはページ名を消すなど細かく表示を設定でき、ツールバーの一覧性を向上させていた。

これはQuantumでは、userChrome.css で対応できるようだ。

まずuserChrome.cssを作る。Firefoxのプロファイルフォルダを変えてなければ「C:\Users\(PCユーザ名)\AppData\Roaming\Mozilla\Firefox\Profiles\(Profile名).default\chrome\userChrome.css」。Profile名は自動的に作られるランダムな文字列。大抵1つしかないのでわかる。複数あっても更新日時で判断。chromeフォルダは無ければ作る。cssの文字コードはUTF-8。

以下、自分用の設定。

• ブックマークツールバーにサイトを直接登録してる場合はサイト名を非表示(faviconで分かるため)
• フォルダを登録してる場合はアイコンを非表示、フォルダ名を表示

/* Hide bookmarks bar label text of sites, icon of folders. */
/* Bookmarkバーの、サイトを直に登録している場合はサイト名、フォルダの場合はアイコンを非表示 */

#PlacesToolbarItems toolbarbutton.bookmark-item:not([container]) {
    padding: 0 !important;
    margin: 0 -1px -1px !important;
}

#PlacesToolbarItems toolbarbutton.bookmark-item[container] {
    padding: 0 1px !important;
    margin: 0 1px -1px !important;
}

#PlacesToolbarItems toolbarbutton.bookmark-item:not([container]) > .toolbarbutton-text {
    display: none !important;
}

#PlacesToolbarItems toolbarbutton.bookmark-item[container] > .toolbarbutton-icon {
    display: none !important;
}

「toolbarbutton」というタグ自体はドロップダウンメニュー等でも使われているので、「#PlacesToolbarItems」でブックマークバーに限定しないと履歴などのURL表示まで消えてしまう点に注意。

ページ全体のスクリーンショットを撮る。それだけじゃ無いけど、それだけのために使っていた。

Firefox57.0でスクリーンショット機能の場所がアドオンのところから移動してた。ついでにスクショの良アドオンも - 感想みかん

Quantumでは、ページ全体のスクショもブラウザ自体の機能に組み込まれた。開いているページのアドレスバーの「…」ボタンをクリックすると「スクリーンショットを撮る」という項目がある。

ただ、今までは「ツールバーのアイコン→ページ全体をキャプチャ」の2クリックで良かったのが、「…ボタン→スクショを撮る→ページ全体を保存→ダウンロード」の4ステップ必要になっているので、もし連続で数多くのスクショを撮らないといけない場合は、別途アドオンを用意した方が効率良いかも。

後継アドオン: Page Saver WE

IDとパスワードをサイト毎に記録してくれる。

ビルトインのパスワードマネージャでは「これはログインフォームだ」と認識に失敗するようなページでも、URLとフォームの属性を与えてやれば同様に記録してくれる。また、記憶しているIDとパスワードを手軽に確認できる。

地味に代替が見つからない。まぁ、とりあえずビルトインのを使いましょうか。ほとんどのページでは認識に失敗しないと思うし、IDとパスワードも別途記録するようにしているので、使い始めた当初より必要性は薄いかも。

タイトルバー、タブバー、ツールバー、アドレスバーあたりの機能をフロート化し、カスタマイズ性を高め、上部バーを極限まで省スペースにできる。

何気に重宝してたのが、ツールバーにページタイトルを追加できるところ。「カスタマイズ」から、戻るボタンやアドオンアイコンと同様の感覚で追加できていた。

ページタイトルってたまにパッと確認したくなることがあるけど、タブに表示されるのは短すぎて全体を把握不能だし、かといってタイトルバーを1本使うのはスペース的にもったいないしで、上記のようにアドレスバーと半分くらいにしてタイトルを表示できていたのは丁度良かった。

ただ見た目を大きく改造するので、Quantumでは現段階では無理かな。バージョンアップに従って、userChrome.cssでカスタマイズできる余地が増えて、似たことが出来るようになるかも知れない。

前はノートパソコンで使うときに特に重宝してたけど、モニタ解像度が上がった今、省スペースにはそこまでこだわる必要性は少なくなったかな。でもやはり無くなると不便に思う機能はあるね。

Hide Caption Titlebar Plus alternative : firefox

Ubuntuなら、タイトルバーをクライアント側でカスタマイズ可能になるClient Side Decorationという機能が紹介されている。まぁ自分Windowsなんですけどね。

こちらも見た目をごっそり変える。自分の主な使い道は、

• タブバーの位置をウィンドウの一番下にする
• タブを沢山開いたときでも、下限幅よりは短くならないようにする
• それでも一杯になったら多段表示にする

下記のタブバーを多段にするスクリプトの中に、これを実現するものがある。（ver.71用以降）

自力挑戦版（失敗）

#TabsToolbar {
    position: fixed;
    bottom: -2em;
    width: 100%;
}
#tabbrowser-tabs {
    width: 96%;
}
#content-deck {
    margin-bottom: 2.5em;
}

userChrome.css と userChrome.js で可能。

自然な表示・自然な動きにするのは結構複雑だが、有志の方がスクリプトを公開されている。感謝。 丁寧な解説付きなので、それに従えば大丈夫（userChromeとは何か、程度の知識は必要）。

• ver.71, 72用: 多段タブ.zip (多段タブ.zip) ダウンロード | firefox用スクリプトアップローダー | uploader.jp
• ver.69用: 多段タブ.zip (多段タブ.zip) ダウンロード | firefox用スクリプトアップローダー | uploader.jp
• ver.66用: 多段タブ.zip (多段タブ.zip) ダウンロード | firefox用スクリプトアップローダー | uploader.jp

バージョンが複数あることからもわかる通り、不定期にアップデートで急に効かなくなったりする。

（カスタマイズ性の高さが気に入っていたFirefoxだけど、レガシーを切り捨ててから、こうもあっさり変更をたびたび行うのか……という印象は否めない）

自分用メモ。スクリプト更新時の留意点。

• userChrome.cssはすぐに上書きしない
  • 既述の通り、cssにはブックマークバーなどに関する他の自前の記述も含まれているので、自前の部分は新しいcssに移しておく
• タブの横幅調整
  • 最大幅を少し短めに。最小幅はタイトルがある程度わかるよう少し長めに。
  • MultiRowTabLiteforFx.uc.js 内 「/* 多段タブ */」コメント付近
  • tabs tab[fadein]:not([pinned]) { flex-grow: 1; } → { flex-grow: 1; min-width:120px !important; max-width:170px !important; }

過去、見栄えさえ気にしなければ簡単なuserChrome.cssの変更で可能だった頃の記述

テキストエディタのVimのように、ブラウザの各種操作をキーボードに割り当て、キーボードだけで閲覧できるようにするプラグイン。

かなり深いところをいじってそうなので、当然のようにQuantumでは対応予定無し。というかそれ以前からバージョンアップのたびにどこかしら不具合が出ていたし、もう無理だなあ、という兆候はあった。

まぁ、タブの左右移動、上下スクロール、リンクを開く、進む戻る、くらいが出来ていればとりあえずはいいので、それなら代替アドオンがある。

• https://addons.mozilla.org/ja/firefox/addon/vim-vixen/
• Vim Vixenというプラグインを作りました。 - Folioscope

開発が日本人。Quantum対応のVim系アドオンの中では多機能（といっても制約的に出来ることはそこまで多くないが）で、設定も簡便。

スクロールがもうちょっとスムーズになればいいかな、というところ。デフォルトでは不連続にジャンプする。smoothscrollをONにしても、下スクロールキーを押しっぱなしにすると「1スクロール分加速して減速」を繰り返すので、カクカクしてしまう。

あと、これはVim Vixenに限らずアドオン全般の制約として、「about:settings」「about:config」などのFirefox本体のタブ？では利かないので、タブの左右移動中にそれらが含まれるとストップしてしまう。

Vimperatorの拡張スクリプト「copy.js」では、現在閲覧中のページタイトルやページURLを、任意の形式にフォーマットしてクリップボードにコピー、という操作をコマンドに割り当てることができた。

このWikiを書く時、外部リンクを貼り付けるためにWiki文法でURLとタイトルをコピーするには、その機能を重宝していた。

これは、Format Linkを使うとひとまず解決。

• https://addons.mozilla.org/ja/firefox/addon/format-link3/

右クリックメニューに、任意に設定した形式でコピーする項目が追加される。ただし、右クリックメニューに登録できるのは1つだけ？なので、複数形式を使い分けたい場合は「アドオンバーのアイコン→形式を選択→コピーをクリック」という手順を踏むことになり、任意のキーに割り当てられていたVimperator + copy.jsと比較すると、ちょっと手間は増える。まぁでも助かることには変わりない。

ブラウザ自体に設定項目が用意されているものは、アドレス欄に「about:config」と入力して（初回は警告が出るけどOKして）表示されるページで変更できる。

ただし、どこいじったか絶対忘れるので、外部ファイル化した方がよい。

ユーザのプロファイルフォルダ直下に「user.js」というファイルを作り、そこで指定すると、「どこいじったか忘れない」し「環境の移行がしやすい」。

• user.jsによるFirefoxの設定
• 文字コードはUTF-8

// ブックマーク・検索バーの結果を新しいタブで開く
user_pref("browser.tabs.loadBookmarksInTabs", true);
user_pref("browser.search.openintab", true);

// 最後のタブを閉じてもウィンドウは閉じない
user_pref("browser.tabs.closeWindowWithLastTab", false);

// Addonやfirefox.comなど一部のページでアドオンが効かなくなるのは、意図的に制限されているから。
// その制限を無くす（利便性と引き替えにセキュリティ低下注意）
user_pref("privacy.resistFingerprinting.block_mozAddonManager", true);
user_pref("extensions.webextensions.restrictedDomains", "")

// クラッシュ復元のためのセッションの自動保存間隔[ms]
// 初期値は15秒で頻繁すぎるので、適度に減らす
user_pref("browser.sessionstore.interval", 300000);

Firefoxの概観、それ自体もDOMで出来ていて、cssを記述することで表示をいじれる。

• userChrome.cssをプロファイル内に作成する
  • [Firefox 57+] Roomy Bookmarks Toolbar が動かなくなったんですけど！ - Qiita
  • 日本語でコメント書く場合は、UTF-8で保存する点に注意
• いじりたい要素のDOMがどうなっているかは、ブラウザツールボックスで確認できる。
  • Firefox57でDOMインスペクタ（ブラウザツールボックス）を使う方法
  • ただ、原因不明で、急にブラウザツールボックスが起動しなくなる現象が発生した。プロファイル作り直したらなおったが、初期設定時以外だと困るなあ