30分でelectronをはじめる #JavaScript

はじめに

electronでhello worldを表示させる(linux環境)

環境

hibi221b@hibi221b:~$ uname -a
Linux hibi221b 4.15.0-38-generic #41-Ubuntu SMP Wed Oct 10 10:59:38 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

node.js npm

Ubuntuに最新のNode.jsを難なくインストールする
 @seibeさん、ありがとうございます。

hibi221b@hibi221b:~$ sudo apt-get install -y nodejs npm
...
...
hibi221b@hibi221b:~$ sudo npm cache clean
hibi221b@hibi221b:~$ sudo npm install n -g
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
└── n@2.1.12 

hibi221b@hibi221b:~$ sudo n stable

     install : node-v11.0.0
       mkdir : /usr/local/n/versions/node/11.0.0
       fetch : https://nodejs.org/dist/v11.0.0/node-v11.0.0-linux-x64.tar.gz
   installed : v11.0.0

hibi221b@hibi221b:~$ sudo ln -sf /usr/local/bin/node /usr/bin/node
hibi221b@hibi221b:~$ node -v
v11.0.0
hibi221b@hibi221b:~$ sudo apt-get purge -y nodejs npm
...
...
hibi221b@hibi221b:~$ node -v
v11.0.0
hibi221b@hibi221b:~$ npm -v
6.4.1

electronのインストール

作業ディレクトリを作る

hibi221b@hibi221b:~$ mkdir electron_app
hibi221b@hibi221b:~$ cd electron_app/
hibi221b@hibi221b:~/electron_app$ mkdir hello_world
hibi221b@hibi221b:~/electron_app$ cd hello_world/
hibi221b@hibi221b:~/electron_app/hello_world$ node -v
v11.0.0
hibi221b@hibi221b:~/electron_app/hello_world$ npm -v
6.4.1

npm install --save-dev electron
npm init -y

Electronのバージョン管理

npm init -y でpackage.jsonを作成して、各種設定してからのnpm install —save-dev electronを行った方が良いです


hibi221b@hibi221b:~/electron_app/hello_world$ npm install --save-dev electron

> electron@3.0.7 postinstall /home/hibi221b/electron_app/hello_world/node_modules/electron
> node install.js

Downloading tmp-5140-1-SHASUMS256.txt-3.0.7
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm WARN saveError ENOENT: no such file or directory, open '/home/hibi221b/electron_app/hello_world/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/hibi221b/electron_app/hello_world/package.json'
npm WARN hello_world No description
npm WARN hello_world No repository field.
npm WARN hello_world No README data
npm WARN hello_world No license field.

+ electron@3.0.7
added 144 packages from 125 contributors and audited 200 packages in 81.289s
found 0 vulnerabilities

hibi221b@hibi221b:~/electron_app/hello_world$ ls
node_modules  package-lock.json
hibi221b@hibi221b:~/electron_app/hello_world$ npm init -y
Wrote to /home/hibi221b/electron_app/hello_world/package.json:

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "electron": "^3.0.7"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


hibi221b@hibi221b:~/electron_app/hello_world$ ls
node_modules  package-lock.json  package.json
hibi221b@hibi221b:~/electron_app/hello_world$

package.jsonの設定

package.json

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "electron": "^3.0.7"
  },
  "devDependencies": {},
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "hibi221b",
  "license": "MIT"
}

main.js , index.html

main.js

const electron = require('electron');
const url = require('url');
const path = require('path');

const {app, BrowserWindow} = electron;

let mainWindow;

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

app.on('ready', function() {
        mainWindow = new BrowserWindow({});

        // file://dirname/index.html
        mainWindow.loadURL(url.format({
                pathname: path.join(__dirname, 'index.html'),
                protocol: 'file',
                slashes: true
        }));

        mainWindow.on('closed', function() {
                app.quit();
        });
});

index.html

<!DOCTYPE html>
<html>
<head>
        <title>hello world</title>
</head>
<body>
        <h1>hello world</h1>
</body>
</html>

hibi221b@hibi221b:~$ cd electron_app/
hibi221b@hibi221b:~/electron_app$ cd hello_world/
hibi221b@hibi221b:~/electron_app/hello_world$ ls
index.html  main.js  node_modules  package-lock.json  package.json

npm start

hibi221b@hibi221b:~/electron_app/hello_world$ npm start

> hello_world@1.0.0 start /home/hibi221b/electron_app/hello_world
> electron .