ChromiumのUIを使わず、自分でwindowのUIをつくりたいとき
閉じる、最大化、最小化ボタンくらいはつくる。
main.js
const el = require('electron'), {app} = el;
const Bw = electron.BrowserWindow, ipc = electron.ipcMain;
let win = null;
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (win === null) createMainWindow();
});
app.on('ready', createMainWindow);
function createMainWindow(){
win = new Bw({
title: '',
width: 1280,
height: 720,
minWidth: 150,
minHeight: 100,
frame: false,
darkTheme: true,
'standard-window': false, // これと
titleBarStyle: 'hidden-inset', // これが
'overlay-scrollbars': true,
resizable: true,
transparent: true,
webPreferences: {},
fullscreenable: true,
}),
win.loadURL(`file://${__dirname}/index.html`),
win.on('closed', () => {win = null;});
};
ipc.on('minimize', (e, arg) => {
win.minimize();
});
ipc.on('maximize', (e, arg) => {
win.isMaximized() ? win.unmaximize() : win.maximize();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<script src="./jquery-2.2.4.min.js"></script>
<script>
if (typeof module === "object" && module.exports) {
window.$ = window.jQuery = module.exports;
module.exports = {};
}
</script>
<script>
const el = require('electron'), {ipcRenderer} = el;
$(() => {
$('#closed').click(() => {window.close()})
$('#minimize').click(() => {ipcRenderer.send('minimize', true)})
$('#maximize').click(() => {ipcRenderer.send('maximize', true)})
});
</script>
</head>
<body ng-app="app" ng-controller="RootCtrl as root">
<div id="titleBar">
<div id="titleName">
<span id="name">appname</span>
</div>
</div>
<main>
<button type="button" id="closed">close</button>
<button type="button" id="minimize">minimize</button>
<button type="button" id="maximize">maximize</button>
</main>
</body>
</html>
style.css
#titleBar {
-webkit-app-region: drag; /* ドラッグでwindowの移動可能にする */
-webkit-user-select: none; /* 選択不可 */
position: fixed;
top: 0;
width: 100%;
height: 24px;
margin: 0;
padding: 0;
background: #fcfcfc;
z-index: 9999;
}
span#name{
height:24px;
margin:0;padding:0;
font-size:14px;
alignment-baseline: middle;
}
main {
-webkit-app-region: no-drag; /* ドラッグでwindowの移動不可にする */
height: calc(100% - 28px);
width: 100%;
margin-top: 28px;
}
button {
-webkit-app-region: no-drag;
}