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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

- Sponsored Link -

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

言語コード言語名
afAfrikaans
amAmharic
arArabic
azAzerbaijani
beBelarusian
bgBulgarian
bhBihari
bnBengali
brBreton
bsBosnian
caCatalan
coCorsican
csCzech
cyWelsh
daDanish
deGerman
de-ATGerman (Austria)
de-CHGerman (Switzerland)
de-DEGerman (Germany)
elGreek
enEnglish
en-AUEnglish (Australia)
en-CAEnglish (Canada)
en-GBEnglish (UK)
en-NZEnglish (New Zealand)
en-USEnglish (US)
en-ZAEnglish (South Africa)
eoEsperanto
esSpanish
es-419Spanish (Latin America)
etEstonian
euBasque
faPersian
fiFinnish
filFilipino
foFaroese
frFrench
fr-CAFrench (Canada)
fr-CHFrench (Switzerland)
fr-FRFrench (France)
fyFrisian
gaIrish
gdScots Gaelic
glGalician
gnGuarani
guGujarati
haHausa
hawHawaiian
heHebrew
hiHindi
hrCroatian
huHungarian
hyArmenian
iaInterlingua
idIndonesian
isIcelandic
itItalian
it-CHItalian (Switzerland)
it-ITItalian (Italy)
jaJapanese
jwJavanese
kaGeorgian
kkKazakh
kmCambodian
knKannada
koKorean
kuKurdish
kyKyrgyz
laLatin
lnLingala
loLaothian
ltLithuanian
lvLatvian
mkMacedonian
mlMalayalam
mnMongolian
moMoldavian
mrMarathi
msMalay
mtMaltese
nbNorwegian (Bokmal)
neNepali
nlDutch
nnNorwegian (Nynorsk)
noNorwegian
ocOccitan
omOromo
orOriya
paPunjabi
plPolish
psPashto
ptPortuguese
pt-BRPortuguese (Brazil)
pt-PTPortuguese (Portugal)
quQuechua
rmRomansh
roRomanian
ruRussian
sdSindhi
shSerbo-Croatian
siSinhalese
skSlovak
slSlovenian
snShona
soSomali
sqAlbanian
srSerbian
stSesotho
suSundanese
svSwedish
swSwahili
taTamil
teTelugu
tgTajik
thThai
tiTigrinya
tkTurkmen
toTonga
trTurkish
ttTatar
twTwi
ugUighur
ukUkrainian
urUrdu
uzUzbek
viVietnamese
xhXhosa
yiYiddish
yoYoruba
zhChinese
zh-CNChinese (Simplified)
zh-TWChinese (Traditional)
zuZulu

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>

参考ページ

コメント

ご感想やご質問などお気軽にどうぞ。書き込むにはfacebookへのログインが必要です。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

同じカテゴリの記事