りんごぱい Advent Calendar 2024 の記事です。微妙すぎてわからない頑張りの話をします。
MisskeyがMacでばっかり可愛い問題
Misskey楽しいですよね。なにより雰囲気がいい。
この雰囲気がどこから来ているかというと、人々が良いしシステムも良いしルック＆フィールも良いんですが、そのルック＆フィールの中でもフォントが良いと思いませんか。⋯思いませんか。あ、その前にどんなマシンからMisskeyを見ていますか？
MacやiPhone, iPadから見ている人は、フォントが良いというのちょっとわかってもらえると思うんですよね。だってこれですよ。
ヒラギノ丸ゴシックPro。ゆったりした柔らかさ可愛さとかっちりとした姿勢の良さが同居した見てるだけで楽しくなるフォント。
買えば普通に2万円オーバーなのでWindowsの人はデザインのお仕事じゃないとまず持っていないと思うのですが、MacとiPhoneはこれが標準で入っているんですよね。それで、
Hiragino Maru Gothic Pro, BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif
とフォントファミリーの先頭に指定されているヒラギノ丸ゴで表示されてくれて、楽しいMisskeyライフが彩られます。
さてWindows。あとLinuxとかAndroidとか。
いまどきのWindowsだと、2番手指定のBIZ UDゴシックがありますからこうなります。
ああー、はい。UDなのは良いですよね。刺激が少なく読みやすいし、小さな画面でも読めるところは視覚特性関係なく誰にもうれしいですよね。
ただヒラギノ丸ゴのゆったりさ可愛さがあるかというと、それはないんじゃないかと思うんですよね。あと英数字が固定幅になっちゃってるのもやや雰囲気とずれてます。それで最初に、MacとiPhoneの人に限定してMisskeyのフォントも魅力と思うんじゃないですかって言いました。
Ubuntuなんかだとこうなります。日本語は最後のsans-serifまでフォールバックして、実フォントはNoto sansですね。
Noto sansもクセがなくて悪くないフォントなんですよ。”標準”の字体をどストレートに取りに来ましたって感じで。英数字もいい感じですし。
悪くないです。というか良いです。ヒラギノ丸ゴを体験してしまわなければ。
ギリシャ文字とキリル文字はMacでもいけてない問題
ギリシャ文字とキリル文字、ああーはいはいって感じですね。そう、こうなります。
世界中のどの文字もいまどきのコンピューターならなんかまともな感じに表示してくれるのに、ギリシャ文字とキリル文字だけは不格好な全角表示になってしまう。これはヒラギノ丸ゴでも、BIZ UDゴシックでもです。ましてUI表示言語をロシア語とかに設定したときの悲惨さはこれですからね。
誰が悪い⋯ とは決められないんですが、JIS第一水準漢字セットに入っちゃったこと、Unicodeにマッピングするときに欧文文字セットのギリシャ文字・キリル文字と同じ文字に割り当てられちゃったこと⋯なんですかね。（個人的には、JIS第一水準漢字の全角アルファベットは欧文のアルファベットと別文字とされたんだから同じ扱いで全角半角形に置いてくれれば問題なかったんだよなと思ってますけどね）
というわけで【Mac/iPhone以外でフォントが可愛くない】【ギリシャ文字・キリル文字が全角表示で不格好】これがMisskeyのフォントでどうにかしたいと思っているところになります。
Mac以外でもヒラギノ丸ゴっぽいフォントを表示させてみよう
表示させようったってWindowsに入っていないフォントは表示させようがない⋯ことはないんですよね。Webフォントを使えば。もっと具体的にはGoogleフォントを使えば。Googleフォントを使うと、インターネット上のフォントファイルをCSSから取り込んで使えます。
Googleフォントからゆったりして可愛くてそれでいて姿勢も良い日本語フォントを探したんですけどね、あった、ありましたよ、これ、どうです！？ Kosugi Maruフォント。
この立ち姿、そもそも丸ゴシックだし、ヒラギノ丸ゴに相当近いんじゃありませんこと！？ 英数字が固定幅なところがちょっと希望と違いますが、それのことはまたあとで考えることにして、では、これをMisskeyに組み込んでみます。組み込むのは簡単。【設定】【全般】画面の一番下、【カスタムCSS】のところに次のように書くだけです。
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap'); html { font-family: Hiragino Maru Gothic Pro, Kosugi Maru, BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif }
1行目のimportというのが、Googleフォントを取り込む指定ですね。この書き方は、Googleフォントのページから取得できます。
そして、フォントファミリー指定の2番目にKosugi Maruを割り込ませてみました。あくまでヒラギノ丸ゴがあればやっぱりそっち優先って⋯
さてさて、それではWindowsでどうなったか。
WindowsのClearTypeレンダリングがクセ強めなのとディスプレイがRetinaみたいな高精細じゃないのとではっきりしてませんが、拡大してみるとあの日Macで見たMisskeyの面影がかなり具現化してるのがわかります。やったね。
英数字が固定幅なのとギリシャ文字・キリル文字問題にまとめて斬りかかる
さあKosugi Maruは英数字が固定幅でした。上のスクショでもそれがわかりますね。それとギリシャ文字・キリル文字問題をまとめて退治しようってんですが、それはこういうことです。
●いい感じの欧文フォント（ギリシャ文字・キリル文字も含んでるやつ）を一個高い優先順位に入れる
これです。英数字・ギリシャ文字・キリル文字だったらその「いい感じの欧文フォント」で表示され、それ以外の文字、まずは日本語ですね、それらはフォールバックして後続のヒラギノ丸ゴなりKosugi Maruなりで表示してくれるようにするってわけです。
それでまたGoogleフォントを漁りました。いい感じのフォントはないかって。
⋯なかった⋯
1400個だかのフォントがあるGoogleフォント、もちろん良いフォントだらけなんですが、ヒラギノ丸ゴと雰囲気が合うやつというと、見当たらなかったんすよ⋯
でも大丈夫。欧文フォントならPC標準搭載のやつも候補に上がってきます。WindowsとMacの両方で標準搭載しているようなフォントでいいのがあれば⋯ あった！ Verdanaです。
Verdanaは丸ゴシックではなく角ゴシックになるのですが、ゆったりしたリラックス感とかっちりした姿勢の良さを両立しているって点で雰囲気はぴったりあっています。
さっそくやってみましょう。フォントファミリーの列の頭にVerdanaを入れて
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap'); html { font-family: Verdana, Hiragino Maru Gothic Pro, Kosugi Maru, BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif }
はい！
あ、雰囲気いい。
ロシア語UIにしたところも見ておきます？
やーよかったよかった。
これユーザーごとの設定でなくて標準にできなくて？
カスタムCSSって、ユーザー設定にしかなくてコントロールパネルにはないから、鯖缶がサーバー全体にカスタムCSSをかけるってことができないんですよね。やるとしたら、Misskeyのコードを書き換えないとって話になります。
といっても、ここにカスタムCSSと同じように書き加えるだけで終わりじゃないかな⋯.
https://github.com/misskey-dev/misskey/blob/e8bf6285/packages/frontend/src/style.scss#L36
そしてサーバーごとにカスタマイズしなくてもいいように、Misskeyの本流にその修正をプルリクしませんかみたいな話にもなるかもしれないんですが、どうでしょうね。
Misskeyの開発陣の間では、Googleフォントみたいな外部のリソースに実行時依存を持つことは必ずしも総意を得られるわけではないことのよう 参考 。
それはそうって思いますね。
ただそれと同時に私の考えはまた少し違っているところもあって、これみたいな「なくても問題ないし、あったらより良くなる」タイプの外部リソース依存はそんなに忌避しなくていいんではないかなって。
うちの母艦の https://reax.work/ でCSS改修うまい感じに動いたら、どこからでも取り込めるようブランチ公開しますね。
