Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

Electron:ウィンドウサイズの保存と設定

Electron アプリについて、画面サイズの保存方法と設定方法を書いていきます。

前提

Electron アプリは、デフォルトだとユーザがウィンドウサイズを変更できます。ただ、変更したサイズは保存されないので、メインプロセス内で保存と設定をする必要があります。

コード例

メインプロセスのコード例(一部抜粋)は以下の通りです。

const {app, BrowserWindow} = require('electron');
const path = require('path');
const fs = require("fs");

let win = null;

//-> ウィンドウサイズを保存するファイル
let boundsFile = path.join(
  app.getPath('userData'), 'bounds.json'
);
//-> 保存しておいたウィンドウサイズの取得
let bounds = null;
try {
  bounds = JSON.parse(
    fs.readFileSync(boundsFile, 'utf8')
  );
} catch (e) {
  bounds = {"width":1024,"height":768};
}
function createWindow() {
  //-> ウィンドウサイズの設定
  win = new BrowserWindow(Object.assign(
    bounds, {
    "show": false,
    "backgroundColor": "#222", 
    "icon": path.join(__dirname, 'icon/icon64.png')
  }));
  ・・・コード省略・・・
  //-> アプリ終了時にウィンドウサイズを保存
  win.on('close', () => { 
    fs.writeFileSync(
      boundsFile, JSON.stringify(win.getBounds())
    );
  });
}

app.on('ready', () => {
  createWindow();
});

他にもうまい書き方はあると思いますが、今回はこれをベースにまとめていきます。

ウィンドウサイズの保存

保存するファイルを決めておいて、ウィンドウが close されるときに BrowserWindowgetBounds() をファイルに保存します。

上の例だと、

//-> ウィンドウサイズを保存するファイル
let boundsFile = path.join(
  app.getPath('userData'), 'bounds.json'
);
・・・省略・・・
  //-> アプリ終了時にウィンドウサイズを保存
  win.on('close', () => { 
    fs.writeFileSync(
      boundsFile, JSON.stringify(win.getBounds())
    );
  });
・・・省略・・・

といった感じです。

Windows だと、C:\Users\{ユーザ名}\AppData\Roaming\{アプリ名}\bounds.json にサイズがJSONで保存されます。ちなみに、ウィンドウの位置(xy)も保存されます。

ウィンドウサイズの設定

ファイルからウィンドウサイズ(と位置)を取得して、BrowserWindownew するときに渡してあげます。

上の例だと、

//-> 保存しておいたウィンドウサイズの取得
let bounds = null;
try {
  bounds = JSON.parse(
    fs.readFileSync(boundsFile, 'utf8')
  );
} catch (e) {
  bounds = {"width":1024,"height":768};
}
function createWindow() {
  //-> ウィンドウサイズの設定
  win = new BrowserWindow(Object.assign(
    bounds, {
    "show": false,
    "backgroundColor": "#222", 
    "icon": path.join(__dirname, 'icon/icon64.png')
  }));

といった感じです。

今回はウィンドウサイズを他のプロパティと一緒に渡すので、Object.assign を使って JSON をマージしています。

ウィンドウサイズの初期設定

アプリの初回起動時は bounds.json がないので、今回のコード例だと例外が発生します。

} catch (e) {
  bounds = {"width":1024,"height":768};
}

そのため、上のように例外を catch して、ウィンドウサイズを初期設定しています。

ちなみに、BrowserWindow には、デフォルトのウィンドウサイズ(横800px, 縦600px)があるみたいです。それに従う場合は、コードを次のようにしておけば大丈夫そうです。

} catch (e) {
  bounds = {};
}

これで、 BrowserWindownew するときにサイズが渡らなくなります。

参考文献

electron/browser-window