Slack for Windowsのフォントを変更するパッチを作りました。

とりあえずこれでよし。

追記: 2015年10月辺りから再発してる問題について

2015年10月辺りからSlack for Windowsの表示フォントが中華フォントで表示されてしまう問題を確認しています。これは該当部分にCustom Elementsを利用するようになっていたりするいくつかの仕様変更がWeb側で行われたためと思われます。現時点最新の1.2.6では未対応。

こっちでもいくつか対処法を探してみたもののうまく機能してくれませんでした…何故だ…(試行錯誤してたらアプリ起動すらできなくなった…)

@oboenikui氏がパッチ作ってくれたんでお急ぎの方はそっち使ってください。ってかまだ修正されてないのかこれ。(2015/12/14)

(ここから下は古い情報です。)

追記: 公式に採用されました。

この記事を書いたところ中の人に捕捉され

4/14(?)にリリースされた新バージョン1.0.3より以下の変更がデフォルトで適用された状態で配布されているそう。(後述の問題は残っているけど)面倒な作業は必要なくなりました。他のフォントを使いたい場合とかはとりあえず以下を参考にしてねっ!

(※Meiryoの副作用として日本語のイタリック文字が区別がつかなくなってしまいます。。。しゃーない)

見にくかったからパッチ作ったよ!

先日、Windows向けのSlackの公式アプリ…OSXと同じくWebUIをAtom-Shellで囲っただけ…が公開されましたが、日本語のデフォルトフォントはなんとMS Pゴシック!!Atom-Shellの時点で期待はしてなかったけど誰が使うのそんなの!!1

ということでメイリオを優先させるパッチを作りました。gitが必要です。バイナリパッチなのでgit-applyしてね!

警告

改造行為にあたるので利用は自己責任でお願いします。

多分バージョンに依存すると思われます。(1.0.0専用です。アップデートは気が向いたらするよ!あと日本語キーボードじゃないと動かないよ!)2

Download from Copy.com

これで用が済む人はここまでで帰ってもいいよ。

以下、詳細の解説。

何をしてるの?

Slack for WindowsはAtom-Shell製なので中身はすべてjsで書かれいる。一見インストールディレクトリを見渡してもjsは無いように見えるかもしれないが、%LOCALAPPDATA%\slack\app-1.0.0\resources\app.asarというのがAtom用のアーカイブになっていてぎっしりとファイルが詰まっている。と言ってもzipやgzのように圧縮されているわけではなくtarのようなただのアーカイブなのでテキストエディタで開いても普通にコードが読めるだろう。

まぁ、コードは読めてもそのまま編集してしまうとバイナリがおかしくなったりoffsetがずれたりして壊れてしまうので弄っちゃダメ。

男らしく展開しましょう。

いるもの

gitに加えて次のものが必要

  • nodejs (とりあえず0.10で検証。iojsでもいいと思う。)
  • node-gypの使える環境(MSBuild…Visual Studioが2013とかが入ってればいいよ。)

てんかい!

asarをnpmでinstallしてapp.extractに展開する。(展開先ディレクトリ名は任意)

展開されたディレクトリ下の\src\ssb\app.jsを見てみるとなんと98行目辺りから日本語キーボード使用時にCSSを差し替えていることが分かる。(ちゃんと気付いてたのね!)

// Public: Work around Japanese font fallbacks on Win32
//
// Using the default font set on Windows, Slack will render Kanji characters
// using SimSun and Hiragana/Katakana characters using MS PGothic, despite
// the latter font having the characters available to render the sentence.
//
// This is super distracting since these fonts have different weights, so we
// rig the default message class to have the immediate fallback of Lato to be
// MS PGothic, which causes the entire sentence to render in MS PGothic.

で、121行目と134行目でMS Pゴシックを設定している。3

それぞれのreplaceを書き換えればフォント変更も自在ってわけ。

のように変更した。
もし他のフォントを当てたい場合はMeiryoをそのフォント名に読み替えて。
また日本語以外のキーレイアウトの場合は114行目をコメントアウトすればよさそう。

リパック!

コードを編集したら再アーカイブ(パッケージ化)する。

勿論またasarを使う。

さっき展開したディレクトリで

これで再パッケージ化が出来た。

上書きするので気になるなら先にapp.asarのバックアップを取っておくように。(gitでやっといてもいい)

試してみる

もし既にSlack for Windowsを起動しているのならば一旦終了し、再び起動させてみる。

e899b17c-d1d3-11e4-9b0f-1341a3bf2edr

設定した綺麗なフォントが当てられたはず!4


手順と解説は以上です。問題や修正点他、何か質問等あったらコメントからどうぞ。


  1. ちなみにAtom-Shellのデフォルトだと日本語は中華フォントで表示される。まだましってところ。 
  2. %LOCALAPPDATA%\slack\をベースに\app-1.0.0\resources\app.asarをコミットしておかないといけないかもしれない 
  3. 正確にはCSSを当てているのはその数行後だが 
  4. 添付ファイルのファイル名やコメント等、いくつか中華フォントになっているところがありますね。公式の対応不十分… 
Advertisements

「Slack for Windowsのフォントを変更するパッチを作りました。」への1件のフィードバック

コメントを残す