Electron日本語クイックスタート

# 本記事について
Electronの[Quick Start Guide](https://www.electronjs.org/docs/tutorial/quick-start)をより初心者目線で書く。

# 本記事で作るもの
文字を表示するだけのMacのデスクトップアプリ
![スクリーンショット_2020-12-01_22_56_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/04c107d4-cad3-015a-5535-a0b5e8e0f6c9.png)


# 環境
Mac
electron 11.0.3

```
$ node -v
v14.15.1
$ npm -v
6.14.8
```
nodejsをインストールしていない場合には手っ取り早く以下からダウンロードしてインストール。
[Node.jsのダウンローダーへのリンク](https://nodejs.org/en/download/)

LTS推奨。



# 前提
HTML, JavaScriptの基礎
Node.js基礎

# Electronとは
HTML, JavaScript等のWebフロントの技術でMacやWindowsのデスクトップアプリが作れるフレームワーク。

npmでインストールして使う。

# Electronのinstall
まずは作業用のフォルダを作る

ここでは`first-electron`という名前で作った。

そしてまずはプロジェクトを作成し、Electron をインストールする

```
first-electron$ npm init -y
first-electron$ npm install --save-dev electron
```
Electronはビルドに含まないのでsave-devをつける。

するとプロジェクトの中身は以下のようになる。

```
first-electron
├── package-lock.json
└── package.json
```

# アプリを作る

まずは表示する見た目のHTMLを書く

```index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello Electron!</h1>
</body>
</html>
```

次に起点となるJavaScriptを作る

```main.js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  // windowを作成
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // windowにindex.htmlを描画
  win.loadFile('index.html')
  // DevToolsを開く
  win.webContents.openDevTools()
}

// 初期化時にwindowを作成
app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
```

最後にこの時点でpackage.jsonは以下のようになっていると思われるが

```package.json
{
  "name": "first-electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.0.3"
  }
}
```

version, main, scripts を以下のように修正

```package.json
{
  "name": "first-electron",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.0.3"
  }
}
```

これで完了。アプリが確認できる

```
$npm start
```

![スクリーンショット 2020-12-01 22.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/1d320094-e0e7-3518-71e6-a5a558849f71.png)

停止するときは`Ctrl + C`

# Macのアプリケーション化

1 Electron Forgeをインポート

```
first-electron$ npx @electron-forge/cli import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore


We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!
```

これによって package.json が書き換えられる

```package.json
{
  "name": "first-electron",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
...
```

あと.gitも追加される

2 作成

```
first-electron$ npm run make                  

> first-electron@0.1.0 make /Users/Teach/workspace/electron/first-electron
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64
```

first-electron > out以下にできる。

![スクリーンショット_2020-12-01_22_54_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/c91f74bb-9299-c21a-7108-09a8ccba12bf.png)

これをダブルクリックするとアプリが起動できる。