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>