Electronの始め方 on Mac #JavaScript

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

Windows

参考：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