Windows版Slackのフォントを変更する 4.x.x対応
Windows版Slackの文字が見づらい。
メイリオだから文字がすごく細く見えます。
って事で好みのフォントに変更します。
3.x.xまでは下記にある方法で行けたのですが、4系になってから仕様が変わってしまったようです。
4系は今月のアップデートによりディレクトリ構造が変わってしまいました。
今までは C:\Users\<USERNAME>\AppData\Local\slack\app-<VERSION>\resources\app.asar.unpacked\src\static\ssb-interop.js を触るだけだったのが、アプデにより該当ファイルが行方不明に。
勿論ファイルが消されたわけではなく、 asar 形式で圧縮された app.asar の中にバンドルファイルとして存在してます。
ということで、 app.asar を解凍して中身を触って再度圧縮かけて解決。
解凍するにはパッケージをインストールする必要があります。
npm install -g asar
続いて app.asar を解凍。
C:\Users\<USERNAME>\AppData\Local\slack\app-<VERSION>\resources まで移動し、 Shift + 右クリック 、 PowerShell ウィンドウをここに開く(S) をポチ。
PowerShellで下記コマンドを実行。
asar extract app.asar app
すると app ディレクトリに展開されるので、直下の dist/ssb-interop.bundle.js を編集します。
（ 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:Roboto,"Noto Sans CJK JP",sans-serif!important}';
document.head.appendChild(style);
};
個人的に見やすいRobotoとNoto Sans CJK JPを指定。
各自お好みのフォントを指定してください。
3系ではjQuery対応だったが、今回からVanilla JSの記述でプリーズです。
あとは app ディレクトリを asar 形式に圧縮してSlackを再起動。
asar pack app app.asar
同じ要領でgithubに落ちてるDark Theme用のCSSを読み込ませたりしてカスタマイズもできます。
すべての作業はアプデでリセットされるので、アプデ後は再度同じ手順で。
うん、見やすい！
