WebStormでElectronの始め方とアプリの作り方

#はじめに
以前に書いた[WebStormでElectronを始める手順](https://qiita.com/kaluna/items/789f91b938d28f267155)を元に、自分で設定してみたところ、
バージョンの違いで、実行できなくなってしまったので、
今回はアプリを作るまでを説明します。

#目次
1. 環境
2. WebStormでの準備
3. electronパッケージの追加
4. index.htmlとmain.js
5. Electronの実行と確認
6. 作ったElectronをアプリにする
7. electron-packagerパッケージの追加
8. アプリとして書き出す


#1. 環境
- Windows10 Pro
- Node.js : v12.16.1
- WebStorm : 2019.3.3
- NPM : 6.13.4

#2. WebStormでの準備
WebStormを起動して、新しいプロジェクトを作成します。
`File > New > Project...`を選択。
<img width="583" alt="01.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/3f21a0bf-4aa1-eaaf-96b8-a7bc07cb24c4.png">
Node.jsを選び、`Location`に、プロジェクトを作る場所を選択します。

#3. electronパッケージの追加
プロジェクトを作ったら、electronパッケージを追加します。
`File > Settings...`を選択。
開いたウィンドウの`Language & Frameworks`内の`Node.js and NPM`を選択。
<img width="703" alt="02.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/737ba94b-c7c0-3351-8215-f65337c46339.png">
ウィンドウの右側真ん中あたりの`+`を選択。
***
<img width="694" alt="03.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/03c72dfb-654a-64d8-387d-38af206885ba.png">
検索バーに`electron`と入力して、一覧から`electron`を選択。
`INSTALL PACKAGE`を押すと、パッケージのインストールが始まります。
緑のバーにsuccess見たいなのが出たらインストール完了です。
***
<img width="458" alt="05.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/9118e09b-a935-5c2b-4bf5-8e4dfed3a203.png">
ウィンドウを閉じて、`package.json`を開くと、`dependencies`に`electron`が追加されていればオッケーです。

#4. index.htmlとmain.jsの追加
`package.json`と同じ場所に`index.html`と`main.js`を作ります。
それぞれの記述内容は以下になります。

>コードは [Writing Your First Electron App](https://www.electronjs.org/docs/tutorial/first-app) から引用

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

```

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

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
```
***
`package.json`を開き、`main`の内容を変更します。

```json:package.json
"main":"main.js"
```

#5. Electronの実行と確認
<img width="680" alt="08.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/5fe297c1-5abd-35b6-8d8f-a5c87f9a9a52.png">
Electronで実行をするために、`package.json`の`scripts`の項目に、以下のコマンドを追記します。

```json:package.json
"run":"electron ."
```
`"run"`の文字は`"start"`や、`"debug"`のような、好きな文字で大丈夫です。
追記すると、行の左側に、再生ボタンみたいなのが出ますので、それを選択。
<img width="333" alt="09.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/d874bc72-b580-ffac-d831-9321015e50a9.png">
プルダウンから、`Run`か`Debug`を選択すると、Electronが起動し、
index.htmlの内容が表示されます。（何故か背景は黒くて文字が見にくいですが）
<img width="590" alt="10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/95f2328c-1cbe-df53-d2aa-f87ef5324d03.png">
画面の設定などは`main.js`で行えます。
`main.js`ではサイズやフルスクリーン、開発画面の非表示などの変更ができます。
***
一度、実行を行うと、右上にショートカットが選べるようになりますので、
次回からは、`package.json`の画面を開かなくても、ここから実行できるようになります。
<img width="216" alt="11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/75a57979-ed81-8024-e8b0-57245b8f6a9f.png">

#6. 作ったElectronをアプリにする
WebStormからの実行が確認されたので、最終的にアプリにするために、
electron-packagerパッケージを追加します。

#7. electron-packagerパッケージの追加
electronパッケージと同様に、`Node.js and NPM`から`+`を選択して、
`electron-packager`をインストールします。
<img width="694" alt="12.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/08a931d3-ddce-521c-7c86-b6c78d42ad2a.png">

#8. アプリとして書き出す
`package.json`を開き、``にelectron-packagerが追加されているのを確認します。
<img width="857" alt="13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/5cd80d6c-9789-d802-3083-1efde2b505be.png">

アプリにするためのコマンドを`scripts`に追記します。

```json:package.json
"build":"electron-packager . electron-helloworld --platform=win32 --arch=x64 --electron-version=8.2.1 --overwrite"
```

この`build`という名前も任意に変えることができます。
electron-packagerのパラメータとパラメータオプションは以下になります（一部）

|パラメータ|値|説明|
|:--|:--|:--|
|sourcedir|.|アプリ化したいディレクトリの場所|
|appname|electron-helloworld|アプリケーション名|

|オプション|値|説明|
|:--|:--|:--|
|--platform|win32|プラットフォームの選択(all/darwin/linux/mac/win32)|
|--arch|x64|32bitや64bitなどのアーキテクチャの指定(all/ia32/x64/armv7l/arm64/mips64el)|
|--electron-version|8.2.1|Electronのパッケージのバージョン。package.jsonを参照|
|--overwrite||同じディレクトリがあったら上書き|

上記の以外にもアイコンを指定したり、保存先を指定したりといったオプションがありますので、
詳しくは[electron-packagerのgithub](https://github.com/electron/electron-packager/blob/master/usage.txt)をご確認ください。

#9. 参考サイト
- [Electron入門 環境構築とパッケージ化までのまとめ](https://webbibouroku.com/Blog/Article/electron)
- [Electronでアプリビルドまでのフロー](https://qiita.com/zaburo/items/828051fc7dabb258f0de)