概要
Electron でアプリを作成する際、アプリケーションの設定を外部のファイルに記述し、実行時に読み込んで使用する方法について解説します。
ビルド時にファイルをコピーする設定
electron-builder を使用してビルドを行う際、ビルドによって生成するディレクトリにファイルをコピーしたい場合、ビルド設定の extraFiles に記述できます。
以下のディレクトリ構成を例にして、具体例をいくつか紹介します。
project
├── config
| ├── hoge.txt
| └── config.json
├── index.html
├── main.ts
├── package-lock.json
├── package.json
└── tsconfig.json例: ./config ディレクトリを <アプリのディレクトリ> にコピーする。
ディレクトリを指定した場合、ディレクトリごとアプリのディレクトリにコピーされます。
設定
"build": {
"extraFiles": "./config"
}アプリのディレクトリ
<アプリのディレクトリ>
└── config
├── hoge.txt
└── config.jsonアプリのディレクトリとは、ビルドにより生成される実行ファイルがあるディレクトリです。
例: ./config ディレクトリ以下のテキストファイルだけを <アプリのディレクトリ> にコピーする。
ファイルを指定した場合、そのファイルだけアプリのディレクトリにコピーされます。
このとき、ディレクトリ構造は保持されます。例えば、config/hoge.txt を指定した場合、<アプリのディレクトリ>/config/hoge.txt にコピーさます。
"build": {
"extraFiles": "./config/*.txt"
},アプリのディレクトリ
<アプリのディレクトリ>
└── config
├── hoge.txt
└── config.json例: コピー先の場所を指定する。
コピー元だけ指定した場合、ディレクトリ構成を保持した状態で、アプリのディレクトリにコピーされます。
コピー先を変更したい場合は、{from: コピー元, to: コピー先} で指定します。
"extraFiles": {
"from": "./config/config.json",
"to": "./"
}アプリのディレクトリ
<アプリのディレクトリ>
└── config.json例: 上記の文字列や {from: コピー元, to: コピー先} での指定は、リストで複数指定できます。
"extraFiles": [
{
"from": "./config/config.json",
"to": "./"
},
"./config/hoge.txt"
]アプリのディレクトリ
<アプリのディレクトリ>
├── config
| └── hoge.txt
└── config.jsonextraFiles のかわりに extraResources にした場合、コピー先の基点となるディレクトリがアプリのディレクトリではなく、<アプリのディレクトリ>/resources になります。
手順
コード全体は electron-examples/10_electron-load-config を参照ください。
1. 設定ファイルを用意する
プロジェクトディレクトリの ./config/config.json を作成します。
project
├── config
| └── config.json
├── index.html
├── preload.ts
├── main.ts
├── package-lock.json
├── package.json
└── tsconfig.jsonconfig.json の中身は以下とします。
{
"name": "taro",
"age": 20
}ビルドの際に <アプリのディレクトリ>/config/config.json にコピーし、実行時に参照できるようにするため、package.json に設定を追記します。
"build": {
"files": [
"build/**/*",
"index.html"
],
"extraFiles": [
"./config/config.json"
]
},2. メインプロセスで設定ファイルを読み込む
main.ts
import { app, BrowserWindow, ipcMain, IpcMainEvent } from "electron";
import * as path from "path";
import * as fs from "fs";
interface ConfigProps {
name: string;
age: number;
}
let config: ConfigProps;
const createWindow = () => {
const win = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
win.loadFile("index.html");
};
app.whenReady().then(() => {
createWindow();
try {
let data = fs.readFileSync("config/config.json", "utf8");
config = JSON.parse(data);
console.log(config);
} catch (e) {
console.error("Failed to load config file:", e);
}
});
ipcMain.on("getConfig", (event: IpcMainEvent) => {
event.returnValue = config;
});コードの内容を解説します。 アプリケーションの初期化が完了した後、用意した設定ファイルをメインレンダラーで読み込みます。
app.whenReady().then(() => {
createWindow();
try {
let data = fs.readFileSync("config/config.json", "utf8");
config = JSON.parse(data);
console.log(config);
} catch (e) {
console.error("Failed to load config file:", e);
}
});チャンネル getConfig で IPC 通信による呼び出しがあった場合、読み込んである設定ファイルを返します。
今回は IPC 通信には、同期通信である ipcRenderer.sendSync() を使用しています。
ipcMain.on("getConfig", (event: IpcMainEvent) => {
event.returnValue = config;
});レンダラープロセス側で Electron.getConfig() で設定ファイルを取得できるように API をプリロードスクリプトに定義します。
preload.ts
import { contextBridge, ipcRenderer } from "electron";
contextBridge.exposeInMainWorld("Electron", {
getConfig: () => ipcRenderer.sendSync("getConfig"),
});3. レンダラープロセスで設定を取得し、表示する
先程用意した Electron.getConfig() をレンダラープロセス側で呼び出し、HTML 上に表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<button onclick="getConfig()">Get Config</button>
<p id="config"></p>
</body>
</html>
<script>
function getConfig() {
const config = Electron.getConfig();
document.getElementById("config").textContent = JSON.stringify(config);
}
</script>
コメント