Kobito for Windows VS MacType #Windows

Kobito for Windowsが公開されたので早速試してみたはいいものの、フォントが細すぎたり文字がかすれていたりしてさすがに文章書くには厳しい感じだったので、Kobito for Windowsをさくっと改変していい感じにしようというエントリ。

起動直後の状態

普通にインストールしてそのまま起動した状態が下のような画面で、メニューは特に問題ないようだが、それ以外の文字は読みづらくて壊滅的な感じになっていた。
おそらく、液晶の品質や解像度、画素ピッチなどに影響されるものと思われるが、テーマをdarkに変更すればまだ何とかなるものの、defaultテーマで文章を書こうものならすぐに目が痛くなりそうな感じだった。

MacTypeの影響？

コードを書く人なら0やOなどの文字がはっきり区別できるフォントを使うのが基本だよね、ということでRictyをインストールして使っているわけだが、RictyはWindowsのデフォルトのレンダリング方式であるClearTypeとの相性が悪いのでMacTypeでレンダリング方式を変更している。
このMacTypeと相性の悪いソフトがたまにあり、そういったソフトはMacTypeの設定で実行ファイルを除外指定しているわけだが、Kobito for Windowsもこのたぐいかと思ってMacTypeの設定でkobito.exeを除外してみるも、特に変化はなく見づらいままだった。

DirectWrite

MacTypeの設定で実行ファイルを除外指定してもしなくても特にレンダリングに影響を与えないアプリと言えば、Google Chromeが代表的なアプリ。Google Chromeの時はchrome://flagsでDirectWriteを無効にすることでMacTypeによるレンダリングが反映されるようになったことを踏まえて、Kobito for WindowsでもDirectWriteを無効にできないか調べてみた。
Kobito for WindowsはElectron(旧atom-shell)を使用しているようなので、ElectronでのDirectWriteの無効化方法を調べてみたところ、ElectronのAPIドキュメントがヒットした。どうやらnew BrowserWindow()しているところでDirectWriteを無効化するようにオプションを追加してやればいい様子。

改変する

ElectronでDirectWriteを無効化する方法は分かったので、「BrowserWindow」キーワードで対象ファイルを探して改変する。
kobito\resources\app\main.jsを開いてnew BrowserWindow()しているあたりを以下のように書き換える。

kobito\resources\app\main.js

mainWindow = new BrowserWindow({
  width: 1280,
  height: 800,
  "web-preferences": {
    "direct-write": false
  }
});

画面確認

main.jsを書き換えてKobitoを起動してみたところ、下の画面のようにメニュー以外の文字も読みやすくなった。
Kobito for WindowsもGoogle Chromeと同様、DirectWriteを無効化することでMacTypeのレンダリング方式を適用できるようだ。

外部プレビューという罠

「記事」メニューの「外部プレビュー」で表示されるウィンドウは別モジュールで作られているようで、上記のようにmain.jsを改変しただけでは外部プレビューのDirectWriteを無効化することはできなかった。
外部モジュールはkobito\resources\app\versions\内にある一番最新のバージョンのasarファイルでウィンドウを表示しているようなので、こちらも改変する。

asarのインストール

asarファイルはバイナリなので、asarコマンドで解凍した後、解凍先にあるenv\atom-shell.jsを改変してDirectWriteを無効化する必要がある。しかし、asarコマンドをインストールするためにはまずnpmがいるようなので、nodistを使ってnodeとnpmをインストールする。
nodistを手順に従ってインストールした後、npmコマンドでasarをインストールする。

npm -g install asar

外部プレビューの改変

kobito\resources\app\versions\内にある外部プレビュー用モジュールの最新は1.0.3.asarだったので、このasarファイルを適当なフォルダ(ここではpreview)に解凍する。

asar e 1.0.3.asar preview

previewフォルダに解凍されたenv/atom-shell.jsを開き、new BrowserWindow()しているあたりを以下のように書き換える。
なお、ver1.0.6以降ではenv\atom-shell.jsは使わなくなったようで、代わりにjs\bundle.jsを改変する。

env\atom-shell.js

preview = new BrowserWindow({
  width: 600,
  height: 800,
  "web-preferences": {
    "direct-write": false
  }
});

最後にpreviewフォルダをasarファイルにpackする。

asar p preview 1.0.3.asar

できたasarファイルをkobito\resources\app\versions\に上書きして改変完了。

再度画面確認

「このソフトについて」を外部レビューで開いてみたところ、下の画面のように文字がはっきりと表示された。
これで完璧。

思うところなど

現時点でKobito for WindowsのDirectWriteを無効化するには、バージョンアップごとに自分でasarファイルを解凍して改変しないといけない。Kobito for Windowsの今後のアップデートでローカルにUI周りの設定(例えばウィンドウサイズとか)が保存されるようになれば、設定ファイルの追記だけでDirectWriteを無効化できるようになるのではないかと期待している。