Edited at

Electronの始め方 on Mac

More than 1 year has passed since last update.


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


package.json

{

"name": "myfirstapp",
"version": "1.4.13",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}


main.js


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)



index.html

<!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 .

問題なければ、このようなアプリが立ち上がります。

Mac

スクリーンショット 2018-04-05 1.23.33.png

Windows

electron-windows.jpg

参考:https://qiita.com/yoshizaki_kkgk/items/da9711c26e71522ad289

参考:https://electronjs.org/docs/tutorial/first-app

もし、unable to find Electron app at /Users/.... と出たら...

"main":"main.js"の部分に、存在してないファイル名を書いてる可能性があります。


package.json

#存在してないファイル名を書いてる可能性あり

"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

参考:https://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29