---
# System prepended metadata

title: electronで簡単なアプリケーションを作成してみる。Windows10　2021-04-08
tags: [Windows 10, Electron]

---

---
lang: ja-jp
breaks: true
---
# electronで簡単なアプリケーションを作成してみる。Windows10　2021-04-08

> ようこそ！Electron入門
> https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc

## 準備

以下の、main.jsとindex.htmlを同じフォルダに作成する。

### main.js
```javascript=
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成（windowの大きさや、Kioskモードにするかどうかなどもここで定義できる）
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定（相対パスだと動かない）
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

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

```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>
```

## 実行してみる

ファイルがあるディレクトリに移動
```=
D:\Samples\Electron\サンプル>dir
 ドライブ D のボリューム ラベルは データ領域１ です
 ボリューム シリアル番号は A87D-A5B5 です

 D:\Samples\Electron\サンプル のディレクトリ

2021/04/08  14:11    <DIR>          .
2021/04/08  14:11    <DIR>          ..
2021/04/08  14:11               153 index.html
2021/04/08  14:11               601 main.js
               2 個のファイル                 754 バイト
               2 個のディレクトリ  716,634,607,616 バイトの空き領域
```

実行
```=
D:\Samples\Electron\サンプル>electron main.js
```

![](https://i.imgur.com/ROwxCBx.png)

なんか、ちっこい画面が表示された。

## パッケージング（electron builder）

https://github.com/electron-userland/electron-builder

> Electronでアプリビルドまでのフロー
> https://qiita.com/zaburo/items/828051fc7dabb258f0de

### electron builderのインストール
```=
>npm install -D electron-builder
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: dmg-license@^1.0.8 (node_modules\dmg-builder\node_modules\dmg-license):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for dmg-license@1.0.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: iconv-corefoundation@^1.1.5 (node_modules\dmg-license\node_modules\iconv-corefoundation):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for iconv-corefoundation@1.1.5: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN sample01@1.0.0 No description
npm WARN sample01@1.0.0 No repository field.

+ electron-builder@22.10.5
added 236 packages from 246 contributors and audited 238 packages in 18.764s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

以下を実行しないと、`node build-win.js`が実行できなかった。
> https://garafu.blogspot.com/2020/07/how-to-create-electron-app.html
```
>npm install electron electron-builder --save-dev
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.22.1\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> core-js@3.10.1 postinstall D:\Samples\Electron\sample01\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> electron@12.0.2 postinstall D:\Samples\Electron\sample01\node_modules\electron
> node install.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: dmg-license@^1.0.8 (node_modules\dmg-builder\node_modules\dmg-license):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for dmg-license@1.0.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: iconv-corefoundation@^1.1.5 (node_modules\dmg-license\node_modules\iconv-corefoundation):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for iconv-corefoundation@1.1.5: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN sample01@1.0.0 No description
npm WARN sample01@1.0.0 No repository field.

+ electron@12.0.2
+ electron-builder@22.10.5
added 71 packages from 46 contributors, removed 7 packages, updated 10 packages and audited 302 packages in 24.607s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

```
>npm init -y
Wrote to D:\Samples\Electron\sample01\package.json:

{
  "name": "sample01",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-builder": "^22.10.5"
  },
  "dependencies": {},
  "description": ""
}
```

フォルダ名に日本語があると、エラーとなった。
```
ル>npm init -y
npm ERR! Invalid name: "サンプル"

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxxx\AppData\Roaming\npm-cache\_logs\2021-04-08T05_57_37_589Z-debug.log

```

### package.json
このファイルは、`npm init -y`を実行すると自動的に作成される。
```json=
{
  "name": "sample01",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

### build-win.js
ビルド条件を記述した設定ファイル
```=
const builder = require('electron-builder');

builder.build({
    config: {
        'appId': 'local.test.app1',
        'win':{
            'target': {
                'target': 'zip',
                'arch': [
                    'x64',
                    'ia32',
                ]
            }
        }
    }
});
```

### ビルド

```=
>node build-win.js
  • electron-builder  version=22.10.5 os=10.0.17763
  • description is missed in the package.json  appPackageFile=D:\Samples\Electron\sample01\package.json
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=12.0.2 appOutDir=dist\win-unpacked
  • Unpacking electron zip  zipPath=undefined
  • downloading     url=https://github.com/electron/electron/releases/download/v12.0.2/electron-v12.0.2-win32-x64.zip size=83 MB parts=8
  • downloaded      url=https://github.com/electron/electron/releases/download/v12.0.2/electron-v12.0.2-win32-x64.zip duration=49.933s
  • default Electron icon is used  reason=application icon is not set
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=5.262s
  • building        target=zip arch=x64 file=dist\sample01-1.0.0-win.zip

```

以下、フォルダ名に日本語が使用されていた場合のエラー。
```=
>node build-win
  • electron-builder  version=22.10.5 os=10.0.17763
  • description is missed in the package.json  appPackageFile=D:\Samples\Electron\サンプル\package.json
(node:19492) UnhandledPromiseRejectionWarning: Error: Cannot compute electron version from installed node modules - none of the possible electron modules are installed.
See https://github.com/electron-userland/electron-builder/issues/3984#issuecomment-504968246
    at computeElectronVersion (D:\Samples\Electron\サンプル\node_modules\app-builder-lib\src\electron\electronVersion.ts:100:11)
    at createElectronFrameworkSupport (D:\Samples\Electron\サンプル\node_modules\app-builder-lib\src\electron\ElectronFramework.ts:137:17)
    at createFrameworkInfo (D:\Samples\Electron\サンプル\node_modules\app-builder-lib\src\packager.ts:43:12)
    at Packager._build (D:\Samples\Electron\サンプル\node_modules\app-builder-lib\src\packager.ts:348:23)
    at Packager.build (D:\Samples\Electron\サンプル\node_modules\app-builder-lib\src\packager.ts:333:12)
    at executeFinally (D:\Samples\Electron\サンプル\node_modules\builder-util\src\promise.ts:12:14)
(node:19492) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:19492) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

```

以下のエラーは、`npm install electron electron-builder --save-dev`を実行することで解決。
```=
>node build-win.js
  • electron-builder  version=22.10.5 os=10.0.17763
  • description is missed in the package.json  appPackageFile=D:\Samples\Electron\sample01\package.json
(node:21412) UnhandledPromiseRejectionWarning: Error: Cannot compute electron version from installed node modules - none of the possible electron modules are installed.
See https://github.com/electron-userland/electron-builder/issues/3984#issuecomment-504968246
    at computeElectronVersion (D:\Samples\Electron\sample01\node_modules\app-builder-lib\src\electron\electronVersion.ts:100:11)
    at createElectronFrameworkSupport (D:\Samples\Electron\sample01\node_modules\app-builder-lib\src\electron\ElectronFramework.ts:137:17)
    at createFrameworkInfo (D:\Samples\Electron\sample01\node_modules\app-builder-lib\src\packager.ts:43:12)
    at Packager._build (D:\Samples\Electron\sample01\node_modules\app-builder-lib\src\packager.ts:348:23)
    at Packager.build (D:\Samples\Electron\sample01\node_modules\app-builder-lib\src\packager.ts:333:12)
    at executeFinally (D:\Samples\Electron\sample01\node_modules\builder-util\src\promise.ts:12:14)
(node:21412) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:21412) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
```

### アプリケーションの実行

以下をダブルクリックすると実行できる。
```
sample01\dist\win-unpacked\sample01.exe
```

###### tags: `Electron` `Windows 10`
