Electronアプリの作り方

# はじめに

Electronという、ChromiumとNode.jsを使ったWeb技術でデスクトップアプリを作ることができるフレームワークを使います。

# 最初にやること
## Node.jsをインストールする
Node.jsをインストールします。
https://nodejs.org/ja/download/
から、自分のOSを選びます。

詳しくは[こちら](https://www.sejuku.net/blog/72545)から。
Node.jsをインストールすることでElectronアプリを作ることができます。

## フォルダ作成
アプリを作成するためのフォルダを作成します。
今回は、hello-worldとしました。

```sh
$ mkdir hello-world
$ cd hello-world
```
としてフォルダを指定する。

# package.jsonを作成する

```sh
$ npm init -y
```

```json:package.json
{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
このようなファイルが作成される。
[バージョンを変更](https://qiita.com/risuney/items/75b24617b52d296f1b2a#%E7%A8%AE%E9%A1%9E)するには```npm version *****```を使う

# Electronをインストールする

```sh
$ npm i -D electron
```

# srcフォルダ等作成
srcフォルダを作り、その中に

* index.html
* main.js
* package.json

を作成。

index.htmlはご自由に書いてください。
今回はHello Worldを表示します。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
```

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({width: 1200, height: 675, 'icon': __dirname + 'favicon.ico'})

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));


    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();
    }
});
```
```'icon': __dirname + 'favicon.ico'``` でアイコンを指定している。なくても良い。

```json:package.json
{
  "main": "main.js"
}
```
main.jsを指定

試しに起動してみる

```sh
$ npx electron src
```
![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/d5a4a089-6369-f64f-6473-5523ee45c53d.png)

Hello worldが表示されました。

# パッケージング
electron-packagerを使ってパッケージングする
# electron-packagerのインストール

```sh
$ npm i -D electron-packager
```

それでは、パッケージングしていきます。
windows向けです。

```sh
$ npx electron-packager src hello-world --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico
```
ここでもアイコンを指定しています。

# Electronのデザイン

## 全画面＆タイトル、メニューバーなし

```js:main.js
mainWindow = new BrowserWindow({kiosk: true, 'fullscreen': true, 'frame': false});
```
![スクリーンショット (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/2741d0fa-c55e-03cb-468f-7714290b0771.png)

main.jsのnew BrowserWindowを指定しているところに追加する
展示用などにおすすめ。
```Ctrl+W```でアプリがシャットダウンされる。
## メニューバーなし
```js:main.js
mainWindow.setMenu(null);
```
new BrowserWindowのあとに追加する。
![スクリーンショット (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/e2495ecf-31de-96fb-aca5-ce03c11cab3a.png)

とてもシンプルで良い。

# パッケージングを楽に
```json:package.json
"scripts": {
    "start": "electron ./src",
    "macos": "electron-packager ./src hello-world --platform=darwin --arch=x64 --overwrite --icon=src/favicon.ico",
    "windows": "electron-packager ./src hello-world --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico"
  }
```
と、追加しておきます。
このとき、忘れずに```"start"```の前に```,```を追加してください。

```sh
$ npm run windows
```
とするとかんたんにパッケージングできます。
windowsをmacosに変えるとMacOS向けにパッケージングされます。

# まとめ
Web技術でアプリを作ることができました。
サクっとアプリが作れるいい時代ですね。

# 参考
https://qiita.com/y-tsutsu/items/179717ecbdcc27509e5a