30分でelectronをはじめる
30分でelectronをはじめる:
electronでhello worldを表示させる(linux環境)
Ubuntuに最新のNode.jsを難なくインストールする
@seibeさん、ありがとうございます。
Thank you for watching.
はじめに
electronでhello worldを表示させる(linux環境)
環境
takumi@takumi:~$ uname -a Linux takumi 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さん、ありがとうございます。
takumi@takumi:~$ sudo apt-get install -y nodejs npm
...
...
takumi@takumi:~$ sudo npm cache clean
takumi@takumi:~$ sudo npm install n -g
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
└── n@2.1.12
takumi@takumi:~$ 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
takumi@takumi:~$ sudo ln -sf /usr/local/bin/node /usr/bin/node
takumi@takumi:~$ node -v
v11.0.0
takumi@takumi:~$ sudo apt-get purge -y nodejs npm
...
...
takumi@takumi:~$ node -v
v11.0.0
takumi@takumi:~$ npm -v
6.4.1
electronのインストール
- 作業ディレクトリを作る
takumi@takumi:~$ mkdir electron_app takumi@takumi:~$ cd electron_app/ takumi@takumi:~/electron_app$ mkdir hello_world takumi@takumi:~/electron_app$ cd hello_world/ takumi@takumi:~/electron_app/hello_world$ node -v v11.0.0 takumi@takumi:~/electron_app/hello_world$ npm -v 6.4.1
npm install --save-dev electronnpm init -y
takumi@takumi:~/electron_app/hello_world$ npm install --save-dev electron
> electron@3.0.7 postinstall /home/takumi/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/takumi/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/takumi/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
takumi@takumi:~/electron_app/hello_world$ ls
node_modules package-lock.json
takumi@takumi:~/electron_app/hello_world$ npm init -y
Wrote to /home/takumi/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"
}
takumi@takumi:~/electron_app/hello_world$ ls
node_modules package-lock.json package.json
takumi@takumi:~/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() {
mainWindow = null;
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
takumi@takumi:~$ cd electron_app/ takumi@takumi:~/electron_app$ cd hello_world/ takumi@takumi:~/electron_app/hello_world$ ls index.html main.js node_modules package-lock.json package.json
npm start
takumi@takumi:~/electron_app/hello_world$ npm start > hello_world@1.0.0 start /home/takumi/electron_app/hello_world > electron .
Thank you for watching.
コメント
コメントを投稿