---
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
```
なんか、ちっこい画面が表示された。
## パッケージング（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`
Sign in with Wallet
Connect another wallet