Electron packager – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

名言は配列で持たせて、Math.floor(Math.random() * quotes.length)で表示。background-colorは、classを、ipc通信でindex.js, index.html, setting.html間をやりとりしています。また、初期値は、webstorageから値を取得することで、ipc通信を省略しています。

electron document:http://electron.atom.io/docs/

index.js

'use strict';

// index.js (main process)
// -GUI(renderer process)
// -GUI(renderer process)
// -GUI(renderer process)

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const dialog = electron.dialog;
const ipcMain = electron.ipcMain;

let mainWindow;
let settingsWindow;
// let backgroundColor = 'skyblue';


let menuTemplate = [{
  label: 'MyApp',
  submenu: [
  { label: 'About', accelerator: 'CmdOrCtrl+Shift+A', click:
  function(){ showAboutDialog(); }},
  { type: 'separator'},
  { label: 'Settings', accelerator: 'CmdOrCtrl+,', click:
  function(){ showSettingsWindow(); }},
  { label: 'separator'},
  { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click:
  function(){ app.quit(); }},
  ]

}];
let menu = Menu.buildFromTemplate(menuTemplate);

ipcMain.on('settings_changed', function(event, color){
  mainWindow.webContents.send('set_bgcolor', color);
});


// ipcMain.on('bgcolor_changed', function(event, color){
//   backgroundColor = color;
// });

// ipcMain.on('get_bgcolor', function(event){
//  event.returnValue = backgroundColor;
// });


function showAboutDialog(){
  dialog.showMessageBox({
    type: 'info',
    buttons: ['OK'],
    message: 'About This App',
    detail: 'This app was created by @hpscript'
  });
}
function showSettingsWindow (){
  settingsWindow = new BrowserWindow({width: 600, height: 400});
  settingsWindow.loadURL('file://' + __dirname + '/settings.html');
  // settingsWindow.webContents.openDevTools();
  settingsWindow.show();
  settingsWindow.on('closed', function(){
    settingsWindow = null;
  });
}

function createMainWindow (){
  Menu.setApplicationMenu(menu);
  mainWindow = new BrowserWindow({width: 600, height: 400});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  // mainWindow.webContents.openDevTools();
  mainWindow.on('closed', function(){
    mainWindow = null;
  });
}

app.on('ready', function(){
 createMainWindow()
});

app.on('window-all-closed', function(){
 if (process.platform !== 'darwin'){
  app.quit();
 }
});

app.on('activate', function(){
  if(mainWindow === null ){
    createMainWindow();
  }
});

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Quotes!</title>
	<style>
	body{
		font-family: Verdana, sans-serif;
		padding: 10px;
		background: skyblue;
	}
	p {
		color: #fff;
		font-size: 36px;
		margin: 0;
		padding: 0;
	}
	</style>
</head>
<body>
	<p id="quote">Just do it!</p>
	<script>
	'use strict';

	const electron = require('electron');
    const ipcRenderer = electron.ipcRenderer;
    const remote = electron.remote;
    const Menu = remote.Menu;
    const MenuItem = remote.MenuItem;
    const shell = remote.shell;

    let color = localStorage.getItem('color') ?
    localStorage.getItem('color') : 'skyblue';
    setBackgroundColor(color);

    let menu = new Menu();
    menu.append(new MenuItem({ label: 'Skyblue', click: function(){
    	setBackgroundColor('skyblue');
    }}));
    menu.append(new MenuItem({ label: 'Tomato', click: function(){
    	setBackgroundColor('tomato');
    }}));
    menu.append(new MenuItem({ label: 'Slate Gray', click: function(){
    	setBackgroundColor('slategray');
    }}));
    window.addEventListener('contextmenu', function(e){
    	e.preventDefault();
    	menu.popup(remote.getCurrentWindow());
    });

    function setBackgroundColor(color){
    	document.body.style.backgroundColor = color;
    	localStorage.setItem('color', color);
    	// ipcRenderer.send('bgcolor_changed', color);
    }

	const quote = document.getElementById('quote');
	const quotes = [
	'Just do it!',
	'Done is better than perfect',
	'Stay hungry, stay foolish',
	'ask, do not tell',
	'focus on the user',
	'keep trying',
	'nothing is impossible',
	'that which is measured, improves',
	];
	window.addEventListener('click', function(){
		quote.innerHTML = quotes[Math.floor(Math.random() * quotes.length)];
	});

	ipcRenderer.on('set_bgcolor', function(event, color){
		setBackgroundColor(color);
	});

	setTimeout(function(){
		let notification = new Notification(
		'Quote!',
		{ body: 'Visit our website!' }
		);
	notification.onclick = function (){
			shell.openExternal('http://google.com');
	}

	},3000);
	</script>
</body>
</html>

setting.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Settings</title>
	<style>
	body{
		font-family: Verdana, sans-serif;
		padding: 10px;
		background: #eee;
	}
	h1 {
		font-size: 16px;
		margin: 0;
		padding: 0 0 10px 0;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	ul > li {
		font-size: 14px;
		padding: 3px 0;
	}

	</style>
</head>
<body>
	<h1>Background Color</h1>
	<ul>
		<li><label><input type="radio" name="colors" value="skyblue">Skyblue</label></li>
		<li><label><input type="radio" name="colors" value="tomato">Tomato</label></li>
		<li><label><input type="radio" name="colors" value="slategray">Slate Gray</label></li>
	</ul>
	<script>
	'use strict';

    const ipcRenderer = require('electron').ipcRenderer;
    // let currentColor = ipcRenderer.sendSync('get_bgcolor');
    let currentColor = localStorage.getItem('color');

	let colors = document.getElementsByName('colors');
	for (let i = 0; i < colors.length; i++){
		if (currentColor === colors&#91;i&#93;.value){
			colors&#91;i&#93;.checked = true;
		}
		colors&#91;i&#93;.addEventListener('change', function(){
			let color = this.value;
			// console.log(color);
			// settings.html -> index.js -> index.html
			// ipc module
			ipcRenderer.send('settings_changed', color);
		});
	}
	</script>
</body>
</html>