Electron – 設定ファイルを実行時に読み込む方法

1. 概要
2. ビルド時にファイルをコピーする設定
3. 手順

概要

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.json

extraFiles のかわりに 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.json

config.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>

前の記事

Electron – Electron + React で GUI アプリを作成する 2024.01.21
次の記事

Electron – キーボードショートカットを設定する方法 2024.01.29

Electron – 設定ファイルを実行時に読み込む方法

概要

ビルド時にファイルをコピーする設定

手順

1. 設定ファイルを用意する

2. メインプロセスで設定ファイルを読み込む

3. レンダラープロセスで設定を取得し、表示する

Electron – Electron + React で GUI アプリを作成する 2024.01.21

Electron – キーボードショートカットを設定する方法 2024.01.29