あしあと

自分自身のログ(足跡)となります。ソフトウェアエンジニアです。ブログはテック系の内容が少し多めです。

Electronで前回の位置とサイズを保持する方法

Electronで簡単なデスクトップアプリを作成しています。

前回の位置とサイズを次回起動でも維持する方法についてまとめました。
同様の記事は少なく、あったとしても、古かったり要望とは異なっていたので、今回書きました。

前提

  • メインプロセス(main.js)内で実現
  • バージョン: 4.2.2

方針

  1. アプリ終了時にサイズ情報をファイルに保存
  2. 起動時にファイルを読み込み、サイズ情報を設定

となります。本当はCookieやlocalStorageを使いたかったのですが、画面を表示した後にしかアクセスできないため、ファイルの形式をとりました。

discuss.atom.io

上記にも記載があります。
いくつか調べたのですが、上記くらいしか思い出せなかった...

方法

今回は、メインプロセス(main.js)内の話です。

以下のソースコードで可能です。

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

// デフォルトのサイズ設定
const windowSettings = {
  x: 0,
  y: 0,
  width: 950,
  height: 700
}

// サイズを保存するファイル名
const windowSizeFile = './test.json';

function createWindow () {
  // サイズ情報を読み込む
  let windowSize = LoadWindowSize();

  // BrowserWindowオブジェクト作成
  let bw = new BrowserWindow(windowSettings)
  bw.loadFile('./index.html');

  // サイズ情報があれば、設定する
  if (Object.entries(windowSize).length != 0) {
    bw.setPosition(windowSize.x, windowSize.y);
    bw.setSize(windowSize.width, windowSize.height)
  }

  // アプリ終了時に画面情報を保存するよう設定
  bw.on('close', () => {
    let sizes = bw.getSize();
    let positions = bw.getPosition();
    let fileContents = {
      'x': positions[0],
      'y': positions[1],
      'width': sizes[0],
      'height': sizes[1]
    }
    fs.writeFile(windowSizeFile, JSON.stringify(fileContents), (err) => {
      if (err) {
        console.log('error');
      }
    })
  })
}

// jsonファイルを読み込み結果を返す
function LoadWindowSize() {
  if (!fs.existsSync(windowSizeFile)) {
    return {}
  }
  let fileContent = fs.readFileSync(windowSizeFile)
  try {
    return JSON.parse(fileContent)
  } catch(err) {
    return {}
  }
}

app.on('ready', createWindow);

関数の切り分けや、エラーハンドリングは適宜変更してもらって構いません。
createWindow内で、

  1. ファイルの読み込み
  2. サイズの設定
  3. アプリ終了時にサイズを保存する設定

をしています。electron-quick-startmain.jsを上記に置き換えても動作することは確認済みです。

ちなみに、JSONファイル内は、

{"x":871,"y":1320,"width":2068,"height":627}

という内容になっています。

利用した機能

ElectronではBrowserWindowです。

electronjs.org

Nodeでは、fsです。

nodejs.org

手間かもしれませんが、公式ドキュメントに目を通しておくことはオススメします。

参考

今回、以下の資料も参考にしました。

qiita.com

web-dev.hatenablog.com