Electronの使い方 – テックメモ

Electronを前に一度使った時のメモ。まったく忘れしまったが一応その時のメモを残しておく。

Nodeインストール

nodejs.orgからNode.jsをインストール

node -v

npm -v
必要ならバージョンアップ、
npm install -g npm　（gはグローバルでパスが通る）
npm update -g npm

~~npm -g install electron-prebuilt (初回のみ)~~
npm install electron
これを実行したフォルダにインストールされる。

appフォルダを作成し、appフォルダの中で、
npm init -y

package.jsonの中の、”main”: “index.js”がエントリーポイントとなるので、
appフォルダの中にindex.jsを作成する。
さらにappのフォルダの中にindex.htmlを作る。

ここまでできたら electron .　と記述で立ち上がる。
appフォルダで上記を実行する。

index.js

var app = require('app');
var BrowserWindow = require('browser-window'); 
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
    app.quit();
});
app.on('ready', function() {
  mainWindow = new BrowserWindow({
  	width: 1000,
  	height: 850,
  	frame: false
  	});
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

var app = require('app');

var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {

app.quit();

});

app.on('ready', function() {

mainWindow = new BrowserWindow({

width: 1000,

height: 850,

frame: false

});

mainWindow.loadUrl('file://' + __dirname + '/index.html');

mainWindow.on('closed', function() {

mainWindow = null;

});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="shift-jis">
  <title>Hello Electron</title>
  <style>
      body {
      -webkit-app-region: drag;
      -webkit-user-select: none;
    }  
  </style>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello Electron</title>

<style>

body {

-webkit-app-region: drag;

-webkit-user-select: none;

}

</style>

</head>

<body>

</body>

</html>

アーカイブ化

npm install -g asar (初回のみ)

asar pack . ./bin.asar (appフォルダで)

electron bin.asar で立ち上がる。

ここから配布用

npm i electron-packager -g　(初回のみ)

electron-packager . bin –platform=win32 –arch=ia32,x64 –version=0.36.1　

appフォルダで実行　何かインストールしている模様

(環境特有のファイルをインストールしている模様で初回だけ時間がかかるアーキテクチャとかバージョンを変えたらまた時間かかるかも)

そのた

メニュー追加

var Menu = require('menu');
var menu = Menu.buildFromTemplate([
{
label: 'Sample',
submenu: [
{label: 'About'},
{label: 'Quit'}
]
},
{
label: 'File',
submenu: [
{label: 'New File'},
{label: 'Paste'}
]
},
{
label: 'Edit',
submenu: [
{label: 'Copy', accelerator: 'Command+C', selector: 'copy'},
{label: 'Paste', accelerator: 'Command+V', selector: 'paste'}
]
}
]);
Menu.setApplicationMenu(menu);

var Menu = require('menu');

var menu = Menu.buildFromTemplate([

{

label: 'Sample',

submenu: [

{label: 'About'},

{label: 'Quit'}

]

{

label: 'File',

submenu: [

{label: 'New File'},

{label: 'Paste'}

]

{

label: 'Edit',

submenu: [

{label: 'Copy', accelerator: 'Command+C', selector: 'copy'},

{label: 'Paste', accelerator: 'Command+V', selector: 'paste'}

]

}

]);

Menu.setApplicationMenu(menu);

index.js内で以下のように指定
mainWindow.loadUrl(‘http://electron.atom.io/’);