electronについて、appの作成まで5分で把握する #JavaScript

概要

ちまたで流行りの electronについて、試してみました
設定からappの作成まで、最低限の確認をやりました

この記事のターゲット

electronにて appを作成する際に、最低限何が必要が、5分で知りたい人

必要な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!が表示されます.!

備考

この記事は個人blogから転載しました。
http://selmertsx.hatenablog.com/