（余談です）Firefox 60.0.1（Mac）で文字化け→ 60.0.2で解消

今回は余談で「Mac Firefox のバグの話」。ご興味ない方はスルーして。

Mac OS X で Firefox を 60.0.1（2018年5月16日リリース）にアップデートしたら、ウェブサイト上のテキストが思いっきり文字化けするようになっちゃった。

結論から言うと、この文字化けは Firefox 60.0.1 のバグ。
60.0.2（2018年6月6日リリース）で、このバグは解消され、正常に文字をレンダリングするようになりました。

少数派だと思うけど、同じような目にあっている方がいれば参考になるかと思い、メモっておきます。
ものすごい文字化けっぷりの画像もお見せしたいしww

本日のINDEX

1. OS内のフォントの問題だと思った
   1. 化けて見えるフォントは Last Resort Font
   2. Firefox の旧バージョンのインストール
   3. Firefox のバックアップ
2. 直後にリリースされた60.0.2で文字化け解決
   1. Firefox の自動更新をオフにする
3. 文字化け解消のために いろいろやってみた内容

OS内のフォントの問題だと思った

文字化けはこんなかんじ。本サイトのトップページです。めっちゃ焦りました（笑）

サイトタイトル「ほんっとにはじめてのHTML5とCSS3」だけは 正常に表示されてます。
その他の化けてない文字は画像。または Google から配信のテキスト。

他のサイトをこの Firefox 60.0.1 で見てみると、
・全く文字化けしないサイト（Google、アップルサイトなど）
・部分的に化けているサイト（mozilla（Firefoxのメーカー）サイトすら部分的に文字化け）
・ほぼ全部のテキストが化けてるサイト（FC2 や 自分のカード会社など、読めないとマズイところほど化けてるww）
と言った具合でした。
各サイトで使用されているフォントファミリーを調べても一貫性が無く、フォント指定のせいではなさそう。

しかも「Firefox 60.0.1　文字化け」などのキーワードでググっても、何もヒットせず。
他の人は問題なく使っているみたいね！（笑）

解決のためにいろいろやってみましたが、結局自分のローカルの問題、たぶん OS内の「フォント」が原因だろうと思いました。
ですが、システムのどのフォントが衝突しているか（あるいは足りないか）を調べるのが面倒で、Firefox のバージョンを59に戻して放置しましたww

化けて見えるフォントは Last Resort Font

ちなみに、化けて見えるフォント（四角の中に文字があるフォント）は、Last Resort Font と言って Unicode のグリフが無いときに代替えで表示されるフォントだそうです。

四角の中に「A」だったらアルファベット、「か」ならカナ、「字」なら漢字...と言った具合で、元のテキストが何だったかわかるように表示されているんだって。

Firefox の旧バージョンのインストール

Firefox は、直前のバージョンをインストールできるようになっています。
Firefox - 以前のバージョンの Firefox をインストールするには

または、過去にリリースされた全バージョンのインストーラも公開されています。
Directory Listing: /pub/firefox/releases/
この↑ページで、例えば「60.0.2」を探すなら、ブラウザ検索で「60.0.2」とタイプして、該当するテキストをクリック。
その後のページでプラットフォームをクリック（マックなら mac/）、次に言語をクリック（日本語なら ja-JP-mac/ ）で、インストーラをダウンロードできます。

ただし、旧バージョンをインストールするのは自己責任で。
セキュリティの問題があります。
そして、ブックマークやログイン情報などは、バックアップを取ってからやったほうがいいですね。

Firefox のバックアップ

Firefox のブックマークやパスワードなどの情報は「プロファイル」に格納されていて、この「プロファイル」をバックアップすればOK。詳しくはこちら。
Firefox | 設定情報のバックアップ

直後にリリースされた60.0.2で文字化け解決

さて、その後「MozillaZine.jpフォーラム」で文字化けについて調べてみました。
これは Firefox のユーザー同士で質問できる掲示板のようなもの。ログインしなくても閲覧できます。
MozillaZine.jp - Mozilla Firefox

そこで、60.0.1 の Mac OS X での文字化けに関する記事を発見。
MozillaZine.jpフォーラム：トピック - Firefox Quantum60.0.1のOSXでの表示の不具合

このトピックでは、Firefox の「about:config」機能を使って解決しています。

が、トピックの下の方に「60.0.2 で Mac関連でフォント回りの修正が入った」という情報があります。
さっそく調べてみると、

確かに「Fix font rendering when using third-party font managers on OS X 10.11 and earlier (bug 1460917)」と記載があります。
どうやら　OS X 10.11かそれより前の OSバージョンで、サードパーティのフォントマネージャーを使ってたら、フォントレンダリングに不具合があったようで、それを修正したらしい。
バグだったんか〜いっ！

私は「Suitcase Fusion」というフォントマネージャーを使っています。
これが原因だったようですね。

これを知った時点での Firefox の最新バージョンは 61（2018年6月26日リリース）ですが、敢えて 60.0.2 を探して入れてみました。
で、あっけなく文字化けは解決しました（笑）

その後バージョン61 がリリースされ、今は 61.0.1 にしていますが、文字化けの問題は無く快適に使っています。

Firefox の自動更新をオフにする

Firefox はデフォルトで自動更新するようになっていますが、これは「設定」画面でオフにすることができます。
勝手に最新バージョンに更新されちゃうと、いろいろ不具合が（昔から）あるので、私は普段オフにしています。

「設定」＞「一般」の下の方に「Firefoxの更新」があるので、そこを「更新の確認は行うが、インストールするかを選択する」にしておけばOK。

これだと、最新バージョンのリリースは知らせてくれるんだけど、インストールは自分でできる（勝手に更新されない）ので、デリケートな作業をしてる期間（ログインしての作業とか）に環境を変えなくて済みます。

文字化け解消のためにやってみたこといろいろ

ここからは、読み飛ばしちゃってください。
バグだと知る前に、文字化け解消のためにやったことを自分のためにメモっておきます。（大したことしてないけど...）

不思議なのは、いろいろやっている工程で 一瞬だけ 60.0.1 でも文字化けせずに表示したこと。翌日 元に戻っていましたが。
まあ、バグだったので、いろいろ無駄だったんですけどね（笑）

最初は サイト側の font-family の問題かと

Firefox を 60.0.1 にアップデートしてから 最初に見たのが本サイトで、本サイトのタイトル（ほんっとにはじめての...）だけは正常に表示されていたので、最初はてっきり自分が指定した CSS の font-family が原因かと思いました。

本サイトの body要素には「Century Gothic」を指定していましたが、タイトルには別の書体を指定してあり、文字化けせずに表示しています。
そこで body要素のフォント指定から「Century Gothic」を削除したら、あら不思議。文字化けが解消したではありませんか。

ですが、よく見ると、ソースコードを表す pre要素 + code要素の部分は字化けてます。

この部分は Prism（プリズム）を使っていて、フォントの指定は、
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
となっています。
最後の総称ファミリー「monospace」によって、日本語テキストは Macなら Osaka が使われるはず。おかしいなあ。

Firefox の最新バージョンが、総称フォントファミリー名を拾わなくなったんだったら、ググれば相当数のヒットがあるはず（すごいバグだもん）。でも何も出ない。
他のサイトを見ても化けてるものが多数ある。
というわけで、サイト側のフォントの問題ではなく、自分の環境の問題だと思いました。

Firefoxのトラブルシューティングページを見て

ここでやっと、Firefoxの「基本的なトラブルシューティング」ページを見ました。

「上から順に試して」と書いてあるのに、なぜか Mac の再起動は省いて、2番目から6までやってみた。
リフレッシュで古いアドオンを削除したり、新しいプロファイルを作ってブックマークなどの大量のデータを不使用にしてみたり。それでもダメ。

Mac の再起動で、一瞬正常化したけど

ここで潔く（？）諦めて、1つ前のバージョン（59.0.3）を再インストールしました。

このあと、Firefox を立ち上げ、文字化けしていないことを確認。
で、このタイミングで Mac の再起動。

Firefox の再インストールを繰り返したので、そろそろOSの再起動をしたほうが良いかなと思って。

しかし！ Firefox はデフォルトの「自動更新」のままにしていたため、OSの再起動後 Firefox を立ち上げたら「60.0.1」に自動更新されちゃった！www

気を取り直して、試しに文字化けしていたサイトを見ると、あ〜ら不思議！ 文字化けが治ってるではありませんか。
「再起動で解決した〜」などと大喜びして一日を終えたのでした。

が、翌日 Firefox を立ち上げると結局同じ。文字化けしていました。あれは何だったんだろう？　まいっか。

で、ここまでいろいろやって解決しないなら、自分のローカル環境の、たぶん OS内のフォントの問題だろうと思いました。

システムフォントのどれかがあたっている、またはシステムから抜いて Suitcase Fusionで管理しているフォントのどれかを戻さなければならない、などと思いましたが、冒頭で書いたとおり面倒くさくて、前バージョンを再インストールして放置した次第です。

バグだったとわかって一安心

ググっても全然ヒットしない、少数派なバグもあるんですね。
いや〜バグでよかった。一時はどうなることかと思いました。
そして「Firefox フォーラム」は大事だなと思いました。もっと早く見ていれば、悩む時間も少なかったでしょうね（笑）