Electron – チュートリアルその3 BrowserWindow のプロパティ

概要

Electron のウィンドウを表すクラス BrowserWindow() のコンストラクタ引数に指定できるオプションについて解説します。

ウィンドウの大きさを指定する

width, height でウィンドウの大きさを指定できます。

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });
  win.loadFile("index.html");
};

app.whenReady().then(createWindow);

ウィンドウの大きさを制限する

• リサイズ可能なウィンドウの範囲を制限する
  • minWidth: リサイズ可能なウィンドウの幅の最小値
  • minHeight: リサイズ可能なウィンドウの高さの最小値
  • maxWidth: リサイズ可能なウィンドウの幅の最大値
  • maxHeight: リサイズ可能なウィンドウの高さの最大値
• resizable: false: リサイズを行えなくする
• minimizable: false: 最小化ボタンを非表示にする
• maximizable: false: 最大化ボタンを非表示にする

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

const createWindow = () => {
  const win = new BrowserWindow({
    resizable: false, // リサイズ不可
    minimizable: false, // 最小化ボタンを無効化
    maximizable: false, // 最小化ボタンを無効化
  });
  win.loadFile("index.html");
};

app.whenReady().then(createWindow);

ウィンドウの表示位置を指定する

デフォルトでは、ウィンドウは画面中央に表示されます。x, y プロパティでウィンドウの表示位置を指定できます。

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

const createWindow = () => {
  const win = new BrowserWindow({
    // ウィンドウの表示位置
    x: 0,
    y: 0,
  });
  win.loadFile("index.html");
};

app.whenReady().then(createWindow);

タイトルバーを変更する

title プロパティでウィンドウバーに表示されるタイトルを変更できます。ただし、表示している index.html に title タグが設定されている場合、そちらが優先されます。

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

const createWindow = () => {
  const win = new BrowserWindow({
    title: "Electron App",
  });
  // index.html に <title> タグが設定されている場合、こちらが優先される。
  win.loadFile("index.html");
};

app.whenReady().then(createWindow);

アイコンを変更する

icon プロパティに icon ファイルのパスを指定することで、ウィンドウのアイコンを変更できます。

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

const createWindow = () => {
  const win = new BrowserWindow({
    title: "Electron App",
    icon: path.join(__dirname, "electron.ico"),
  });
  win.loadFile("index.html");
};

app.whenReady().then(createWindow);

メニューバーを隠す

autoHideMenuBar: true でメニューバーを隠せます。

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

const createWindow = () => {
  const win = new BrowserWindow({
    autoHideMenuBar: true,
  });
  win.loadFile("index.html");
};

app.whenReady().then(createWindow);