Electronのインストール
$ npm -g install electron-prebuilt
失敗した場合は、以下を試す(node.jsの最新版をインストール)
$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド
参考:https://qiita.com/yoshizaki_kkgk/items/da9711c26e71522ad289
アプリ作成
公式サイトで紹介されてるサンプルをダウンロードするのもあり
$ git clone https://github.com/electron/electron-quick-start
自分で一から作る場合は以下の手順
$ take myfirstapp #take = mkdir + cd
$ npm init
{
"name": "myfirstapp",
"version": "1.4.13",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
function createWindow () {
// ブラウザウインドウの作成
win = new BrowserWindow({width: 800, height: 600})
// アプリの index.html を読み込む
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
node <script>document.write(process.versions.node)</script>、
Chrome <script>document.write(process.versions.chrome)</script>、
Electron <script>document.write(process.versions.electron)</script>を使用しています。
</body>
</html>
ディレクトリ構成
PythonApp
├── index.html
├── main.js
└── package.json
##アプリの実行
//どちらでもok
$ npm start
$ electron .
問題なければ、このようなアプリが立ち上がります。
参考:https://qiita.com/yoshizaki_kkgk/items/da9711c26e71522ad289
参考:https://electronjs.org/docs/tutorial/first-app
もし、unable to find Electron app at /Users/.... と出たら...
"main":"main.js"の部分に、存在してないファイル名を書いてる可能性があります。
#存在してないファイル名を書いてる可能性あり
"main": "main.js"
参考:https://qiita.com/gekkoukisi/items/169048df54855e75fe77
ファイルをパックする場合
asarは、圧縮せずに複数ファイルを一つのファイルにしてくれる
// asarをインストール
$ npm install -g asar
//アーカイブの作成
$ asar pack myfirstapp archive.asar
//アーカイブの展開
$ asar extract archive.asar output
参考:https://qiita.com/niusounds/items/2739fdbc26df03421bfe
appを配布する
electron-packagerをインストール
$ npm i electron-packager -g
Macからwindows向けのものをパッケージングするためには、”wine”が必要
//wine をインストールするために必要
$ brew cask install xquartz
$ brew install wine
$ brew install winetricks # これをインストールしないと、wineのupdateメッセージが出たまま消えなくなって詰まる。
MacとWindows向けにパッケージングする場合は以下
$ electron-packager myfirstapp --platform=darwin,win32 --arch=x64 --electronVersion=1.4.13
引数の説明
-platform ・・・ all, linux, win32, darwin のいずれかを選択。複数入れる場合はカンマ区切り
-arch ・・・ all, ia32, x64 のいずれかを選択。
-electronVersion ・・・ Electronのバージョン(1.4.13)を指定します。(2018.4.5現在最新)
問題なければ、以下のディレクトリが作られます。
myfirstapp-darwin-x64
myfirstapp-win32-x64