Electronでデスクトップアプリケーションのパッケージングまで

Electronでデスクトップアプリを配布できるようにするパッケージングまでmacでやっていきたいと思います。

Node.jsはインストールしている状態で始めるので、あらかじめインストールしておいてください。

#必要なファイル、ディレクトリの作成

まずアプリを作成するために必要なファイル、ディレクトリを準備します。

アプリを作成したいディレクトリに移動したのち、以下のコマンドを実行します。

```:ターミナル
$ mkdir hoge
$ cd hoge
```

これで`hoge`のディレクトリ内に入りました。

次に以下のコマンドを実行します。

```:ターミナル
$ npm install -D electron
```

実行すると`node_nodules`、`package-lock.json`が作成されました。

次に以下のコマンドを実行します。

```:ターミナル
$ npm init
```

このコマンドを実行すると`package name: (hoge)`のように表示されると思います。
ここで設定を決めることができますが、後でも変更することができるので、いまは`Enter`を押して進めてください。

進めると`package.json`というファイルが作成されたと思います。

次に`src`というディレクトリとその中身を作成していきます。

まずディレクトリを作成して移動します。

```:ターミナル
$ mkdir src
$ cd src
```

`src`の中に`main.js`、`index.html`、`package.json`を作成します。

```:ターミナル
$ touch main.js index.html
$ npm init
```

これでアプリを実行するためのファイルが用意できました。
以下のようなファイルがあればOKです。

<img width="616" alt="スクリーンショット 2020-07-11 21.43.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555962/86f38400-6d31-6cc5-68b2-dc03abe39015.png">

#アプリケーションを起動する

アプリを起動できるように設定します。

まずは`src`ディレクトリ内にある`package.json`を編集します。

`"main":`を以下のように編集してください。

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

次に`main.js`、`index.html`に以下を追加してください。

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 800, height: 600,
  });

  mainWindow.loadFile('index.html');

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});
```

```html:index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>初めてのElectron</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>
```

これで表示するためのコードを書き終えたので、アプリを実行してみます。

`hoge`のディレクトリに移動して以下のコマンドを実行してください

```:ターミナル
$ npx electron src
```

<img width="1440" alt="スクリーンショット 2020-07-11 22.02.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555962/13ce5fb0-91d8-10c0-2563-86bae6568b2e.png">

このように表示されたら成功です。

終了するためには`control + c`を押してください。

#パッケージングする

アプリの起動を確認できたら次にパッケージングをします。

パッケージングをするために`electron-packager`をインストールします。
インストールする場合は`hoge`ディレクトリで実行してください。
`src`ディレクトリで実行しないようにしてください。

```:ターミナル
$ npm i -D electron-packager
```

インストールが終了したら以下のコマンドを実行します。

```:ターミナル
$ npx electron-packager src hoge --platform=darwin --arch=x64 --overwrite
```

パッケージングに成功すると、以下のようにファイルが作成されます。

<img width="617" alt="スクリーンショット 2020-07-11 22.18.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555962/ff5b5e3c-4edd-4c42-720e-ab4af009e428.png">

hogeと書いてあるアプリをクリックして、先ほど表示した画面と同じ画面が表示されたら成功です。

#開発用にコマンドを簡略化する

ターミナルでアプリを起動する際に`npx electron src`というコマンドを実行しましたが、`hoge`ディレクトリの`package.json`ファイルの`scripts`の項目を編集すると`npm start`で起動できるようになります。

`"scripts": {}`の中に記載されているコードを以下のように書き換えてください。

```json:package.json
"scripts": {
  "start": "electron ./src"
}
```

ターミナルで以下のコードを実行してアプリが起動できたら成功です。

```:ターミナル
$ npm start
```

#参考サイト

+ [最新版で学ぶElectron入門
ウェブ技術でPCアプリを開発しよう](https://ics.media/entry/7298/)