概要
- ちまたで流行りの electronについて、試してみました
- 設定からappの作成まで、最低限の確認をやりました
この記事のターゲット
electronにて appを作成する際に、最低限何が必要が、すぐ知りたい人
必要なpackageのinstall
npm install -g electron-prebuilt npm install -g electron-packager
初期設定
# 必要なファイルの配置 mkdir electron_sample cd electron_sample npm install touch main.js touch index.html #配置確認 [@electron_sample]$ tree . ├── index.html ├── main.js └── package.json
コーディング
下記URLの通りです. http://electron.atom.io/docs/latest/tutorial/quick-start/
main.js
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
package.json
{
"name": "electron_sample",
"version": "0.1.0",
"main": "main.js"
}
appの作成
# mac用のapp作成 electron-packager electron_sample(directory名) sample(アプリ名) --platform=darwin --arch=x64 --version=0.34.0(electronのバージョン)
すると sample-darwin-x64 なるdirectoryが生成される. 確認してみると下記のファイルが生成されていることが分かる
[@sample-darwin-x64]$ ls LICENSE sample.app version
appの実行
上記 appの作成で作られた sample.app をopenしてみると、 hello world!が表示されます.
