あけましておめでとうございます。
いまとむかしで事情の変わっているElectronの多言語化事情です。
過去のElectronの多言語化事情
Electron (もとAtom-Shell ) が世に出たのはもう2年半前のことなんでしょうか。
当時……というか1年ちょいまえのElectronには面倒な問題がありました。
アプリケーションを作るにあたって多言語化は欠かせない問題なのですが、当時のElectronではユーザーの言語を検出するのが困難だったのです。
というのも当時、RendererProcessでnavigator.languageを取得しようとすると何故かOSの言語にかかわらずen-USが返されるという問題がありました。(環境依存かもしれない)
navigator.language always return “en-US”? · Issue #2484 · electron/electron
また、メインプロセスから言語を直接取得する機能は存在していませんでした。
(当時、Atom-Localizationというパッケージが存在し(現在は使えるかもしらない。また効率悪い。)ていたのですが、言語検出できないので設定で言語を直接選択していました。)
幸いにもElectronはnodeのモジュールを自由に使えるので、この解決策として1つ存在していたのがos-localeのようなパッケージを利用することで言語の検出が可能でした。が、OSによっては(主にWindows)呼び出す毎にSyscallしてたりして(キャッシュはあった気もする)使いづらいものでした。
また、言い換えればこの問題は「Chromiumが言語を正しく検出できていない」問題だったため、日本語を表示させた時に中華フォントで表示されたり、webview内で表示されるコンテンツが英語用になったりするリスクもありました。
改善された言語検出
VS Codeを使っている人ならば、昨年5月の正式リリースの際にはローカライズが行われてい、日本語でUIが表示されるようになっていたことをご存知でしょうか。
そう。いつの間にか上記の問題は解決されていたようです。一昨年のうちには。
Electronではユーザーの言語を検出する方法が主に2通りあるみたいです。
RendererProcess からの取得
レンダラーからならブラウザーのAPIが利用できるため、navigator.languageで取得可能。
|
1 |
console.log(navigator.language); // ja |
なお、navigator.languagesは空配列なので注意。
また、メインプロセスを経由して取得することも可能。(多分ただの遠回り)
|
1 2 |
const {remote} = require("electron"); console.log(remote.app.getLocale()); // ja |
MainProcess からの取得
上でもさり気なく使ったapp.getLocale()で取得。
Chromiumのl10n_utilライブラリーで取得しているらしい。
返される言語コードの一覧はドキュメント参照。
なお、ready前に呼び出すとen-USが返ってくることがあるので要注意。って言ってもChromiumのイニシャライズが終わってないんだから当然か。
まぁen-USをフォールバックで返しているのはl10n_util (chroium)らしいけど。
|
1 2 3 4 |
const {app} = require("electron"); console.log(app.getLocale()); // may en-US app.on('ready', _ => console.log(app.getLocale())); // ja |
メニューの設定とかするときはメインプロセスから言語選択すると思うのでこれを使うことになるはずですね。
まとめ
Electronの言語取得は簡単にちゃんとできるようになってた。
navigator.languageでapp.getLocale()で