SPACEKEY

Technical Memorandum

Windows版Slackでフォントを変更する

October 16, 2019

Windows版Slackの日本語フォント表示がひどすぎるので変更する方法。

現状、内部のファイルを書きかえる方法しかなく、バージョンアップする度に作業する必要があるのでメモ。 4.0.2と4.1.1では大丈夫なのは確認してあります。

こちらのサイトをそのまま参考にさせてもらってます。

Windows 版 Slack のフォントを変更する 4.x.x 対応 - frontend blog 🔥
https://autotune.hatenablog.com/entry/2019/07/26/135700
Windows 版 Slack の文字って見づらいんだよね。 メイリオだから文字がすごく細く見える。 って事で好みのフォントに変更します。 3.x.x までは下記にある方法で行けたけど 4 系になってから仕様が変わってしまった。 love4beer.hatenablog.com 4 系は今月のアップデートによりディレクトリ構造が変わってしまったみたい。 今までは C:\Users\<USERNAME>\AppData\Local\slack\app-<VERSION>\resources\app.asar.unpacked\src\static\ssb-interop.js を触るだけだったの…

方法

asarが必要です。

GitHub - electron/asar: Simple extensive tar-like archive format with indexing
https://github.com/electron/asar
Simple extensive tar-like archive format with indexing - electron/asar

slackのapp.asarを展開して、フォントを変更するコードを追加して、またアーカイブして元に戻す、という方法です。

$ npm install -g asar
$ cd C:\Users\<USERNAME>\AppData\Local\slack\app-<VERSION>\resources
$ asar extract app.asar app

でapp.asarの中身が展開されるので、

C:\Users\<USERNAME>\AppData\Local\slack\app-<VERSION>\resources\app\dist\ssb-interop.bundle.js

一番最後に、下記のコードを付け加えます。

onload = () => {
  const style = document.createElement('style');
  style.innerHTML = '*{font-family:"Segoe UI","Yu Gothic UI","Sarasa Mono SC",sans-serif!important}';
  document.head.appendChild(style);
};

font-familyの内容は各自お好みで。
本来のフォントはSegoe UIみたいですが、そうすると日本語がひどくなるのでYu Gothic UIに(Webで見たときと同じ見栄え)、あと私の場合簡体字も扱ってるのでSarasa Mono SCにしています。

あとは、

$ asar pack app app.asar

で元に戻せば表示が変わります。