[Electron] ユーザーの言語環境を取得する - app.getLocale()

Electronでユーザーの言語環境を取得します。 日本国内で日本人向けにのみ公開する場合は何も気にせず日本語で実装すれば良いわけですが、AppStore(Mac)やMicrosoftStore(Windows)で販売を計画している場合はやはり多言語対応したくなりますよね。

Main Process

メインプロセス内でユーザーが利用しているOSの言語環境を取得するには単純にapp.getLocale()を実行するだけです。

サンプルコード

ポイントは必ず初期化が完了した以降のタイミングで実行する必要がある点です。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // ユーザーの言語を取得
  const local = app.getLocale()  // 日本語なら"ja"が返る
  console.log(local)

  // ウィンドウを新たに開く
  const win = new BrowserWindow({
    width: 1024,
    height: 800,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile(`public/index.html`)  // ファイルを開く
}

// 初期化が終了したらウィンドウを新規に作成する
app.whenReady().then(createWindow)

// 以下略

言語コード一覧

app.getLocale()からは以下の表の左側の文字列が返却されます。最新の情報は公式ドキュメントをどうぞ。  ※スクロールしてご覧ください。

言語コード 言語名
af Afrikaans
am Amharic
ar Arabic
az Azerbaijani
be Belarusian
bg Bulgarian
bh Bihari
bn Bengali
br Breton
bs Bosnian
ca Catalan
co Corsican
cs Czech
cy Welsh
da Danish
de German
de-AT German (Austria)
de-CH German (Switzerland)
de-DE German (Germany)
el Greek
en English
en-AU English (Australia)
en-CA English (Canada)
en-GB English (UK)
en-NZ English (New Zealand)
en-US English (US)
en-ZA English (South Africa)
eo Esperanto
es Spanish
es-419 Spanish (Latin America)
et Estonian
eu Basque
fa Persian
fi Finnish
fil Filipino
fo Faroese
fr French
fr-CA French (Canada)
fr-CH French (Switzerland)
fr-FR French (France)
fy Frisian
ga Irish
gd Scots Gaelic
gl Galician
gn Guarani
gu Gujarati
ha Hausa
haw Hawaiian
he Hebrew
hi Hindi
hr Croatian
hu Hungarian
hy Armenian
ia Interlingua
id Indonesian
is Icelandic
it Italian
it-CH Italian (Switzerland)
it-IT Italian (Italy)
ja Japanese
jw Javanese
ka Georgian
kk Kazakh
km Cambodian
kn Kannada
ko Korean
ku Kurdish
ky Kyrgyz
la Latin
ln Lingala
lo Laothian
lt Lithuanian
lv Latvian
mk Macedonian
ml Malayalam
mn Mongolian
mo Moldavian
mr Marathi
ms Malay
mt Maltese
nb Norwegian (Bokmal)
ne Nepali
nl Dutch
nn Norwegian (Nynorsk)
no Norwegian
oc Occitan
om Oromo
or Oriya
pa Punjabi
pl Polish
ps Pashto
pt Portuguese
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
qu Quechua
rm Romansh
ro Romanian
ru Russian
sd Sindhi
sh Serbo-Croatian
si Sinhalese
sk Slovak
sl Slovenian
sn Shona
so Somali
sq Albanian
sr Serbian
st Sesotho
su Sundanese
sv Swedish
sw Swahili
ta Tamil
te Telugu
tg Tajik
th Thai
ti Tigrinya
tk Turkmen
to Tonga
tr Turkish
tt Tatar
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
xh Xhosa
yi Yiddish
yo Yoruba
zh Chinese
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
zu Zulu

Renderer Process

Electronの中身であるレンダラープロセス(HTML/CSS/JS)では、Webブラウザ版のJavaScriptと同様にnavigator.languageに値が入っていますのでこれを参照するか、メインプロセスのapp.getLocale()を利用します。

サンプルコード1 - navigator.language編

レンダラーだけで完結させたい場合はこちら。navigator.languageを参照するだけです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>言語テスト</title>
</head>
<body>

<script>
window.addEventListener("load", ()=>{
  console.log(navigator.language);  // 日本語環境なら"ja"が返る
});
</script>
</body>
</html>

サンプルコード2 - app.getLocale()編

Main Process

メインプロセスでenableRemoteModuleをtrueにしておく必要があります。以下のコードの10行目です。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // ウィンドウを新たに開く
  const win = new BrowserWindow({
    width: 1024,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })
  
  win.loadFile(`public/index.html`)  // ファイルを開く
}

// 初期化が終了したらウィンドウを新規に作成する
app.whenReady().then(createWindow)

// 以下略

Renderer Process

上記の設定でレンダラーからremoteが利用できるようになりましたので、あとはelectronをrequireした後にapp.getLocale()を実行するだけです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>言語テスト</title>
</head>
<body>

<script>
window.addEventListener("load", ()=>{
  const {app} = require("electron").remote;
  console.log(app.getLocale());  // 日本語環境なら"ja"が返る
});
</script>
</body>
</html>

参考ページ