Electronの始め方 on Mac 

## Electronのインストール
```terminal
$ npm -g install electron-prebuilt
```

失敗した場合は、以下を試す（node.jsの最新版をインストール）

```terminal
$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド
```

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


## アプリ作成
#### 公式サイトで紹介されてるサンプルをダウンロードするのもあり

```terminal
$ git clone https://github.com/electron/electron-quick-start
```

#### 自分で一から作る場合は以下の手順
```terminal
$ 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


##アプリの実行


```terminal
//どちらでもok
$ npm start
$ electron .
```

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

Mac 
![スクリーンショット 2018-04-05 1.23.33.png](https://qiita-image-store.s3.amazonaws.com/0/229015/2fab6ee3-60c4-e51d-ee03-39d989016938.png)

Windows
![electron-windows.jpg](https://qiita-image-store.s3.amazonaws.com/0/229015/d1d69959-0b8a-5f28-1305-26adeae422ee.jpeg)


参考：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は、圧縮せずに複数ファイルを一つのファイルにしてくれる

```terminal

// asarをインストール
$ npm install -g asar 

//アーカイブの作成
$ asar pack myfirstapp archive.asar

//アーカイブの展開
$ asar extract archive.asar output
```

参考：https://qiita.com/niusounds/items/2739fdbc26df03421bfe


## appを配布する
electron-packagerをインストール

```terminal
$ npm i electron-packager -g
```

Macからwindows向けのものをパッケージングするためには、”wine”が必要

```terminal
//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