
Electron で製作するアプリのウィンドウを最大化/最小化を制限する方法がいくつかあるのでまとめておく。

２つの最大化/最小化を制限する方法がある。

1. BrowserWindow のオプションで無効化する方法
2. BrowserWindow の最大化/最小化のイベントを検知して処理する方法
3. ショートカットキーを検知して処理する方法

最大化/最小化を無効にするだけであれば 1 が簡潔で良い。
最大化/最小化とともに何か実行したり、最小化する処理を閉じる処理に変更するなど特殊な状況では 2 を利用する。

## 1. BrowserWindow のオプションで無効化する方法

BrowserWindow のオプションの**maximizable**と**minimizable**を`false`として無効化する。

https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions

```js
let mainWindow = new BrowserWindow({
  // 最大化を無効
  maximizable: false,
  // 最小化を無効
  minimizable: false,
})
```

メニューバーの最大化と最小化のアイコンが disable になる。
ただし、Linux では未実装であるため機能しない。

ショートカットキーの`ctrl`+`M`（最小化）や`F11`（最大化）は無効にならなかった。

## 2. BrowserWindow の最大化/最小化のイベントを検知して処理する方法

BrowserWindow では各種操作のイベントに応じた処理ができるようになっている。

https://www.electronjs.org/docs/latest/api/browser-window#event-minimize

onclick イベントのように、`mainWindow.on('someEvent', function(event){})`と書ける。

例えば、最小化する際に何かしら処理をすることは以下のように書ける。

```js
// 最小化するときに処理を行う。
mainWindow.on('minimize', function (event) {
  someFunction()
})
```

`event.preventDefault();`はそのイベントの処理を停止する関数。
キャンセルできるイベントが狭く `minimize` と `maximize` はキャンセルできない。（`close`はキャンセルできる）

最小化/最大化の他、細かくイベントが用意されているのでネイティブアプリらしくウィンドウの挙動を操作できるようになっている。

## 3. ショートカットキーを検知して処理する方法

Electron のアプリでショートカットキーを検知できる。

ショートカットキーの`ctrl`+`M`（最小化）と`F11`（最大化）を無効にするには以下のように書く。

```js
import { app, globalShortcut } from 'electron'

app.on('browser-window-focus', function () {
  // 最小化のショートカットキー
  globalShortcut.register('CommandOrControl+M', () => {
    console.log('CommandOrControl+M is pressed: Shortcut Disabled')
  })
  // 最大化のショートカットキー
  globalShortcut.register('F11', () => {
    console.log('F11 is pressed: Shortcut Disabled')
  })
})
```

どうもショートカットキーのイベントを上書きするようで、最小化/最大化が無効になっていた。


Electronの最大化と最小化のイベントを制限する方法


デスクトップアプリを作るならPCの電源周りの動作にも気を配る必要があります。
裏で動いていた非同期なタスクがスリープから起動後に再度実行できるようイベントをハンドリングしていきます。

Electornでは`powerMonitor`というAPIが用意されています。

## powerMonitor

`powerMonitor`は電源の状態の変化をモニターします。

[powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)

### イベント: resume
システムが再開したときのイベントです。

### 利用例

メインプロセスでのみ利用できます。
`app`の`redy`の中で利用します。

▼ TypeScriptでの例。
```ts:main.ts
import { app, powerMonitor } from "electron";
import log from "electron-log";

app.on("ready", async () => {
  log.info("App ready");


  /**
   * システム（PC）が再開したとき
   */
  powerMonitor.on('resume', function () {
    log.info('System resumption');
    // 何らかの処理
  })
});
```

## その他のイベント

公式が充実しているため短い紹介だけします。

- システムの再開と停止: `resume`, `suspend`
- 電源の状態: `on-ac`, `on-battery`
- スクリーンをロックとアンロック: `lock-screen`, `unlock-screen`
- システムが再起動またはシャットダウンするとき: `shutdown`

## 状態を把握するメソッド

- `powerMonitor.getSystemIdleState(idleThreshold)`  
  現在のシステムの状態 `active` 、 `idle` 、 `locked` 、 `unknown`を返す。
- `powerMonitor.getSystemIdleTime()`  
  アイドル状態の秒数を返す
- `powerMonitor.isOnBatteryPower()`  
  システムがバッテリー電源状態かどうか

電源周りはタブレットPCを使った設備点検などのアプリで利用できそうです。

## 参考

- [powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)
- [powerMonitor · Electron docs gitbook - imfly](https://imfly.gitbooks.io/electron-docs-gitbook/content/jp/api/power-monitor.html)

【Electron】PCのスリープと起動イベントを検知する

electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

色々と調べてなんとなく全体を把握できたので、まとめて紹介します。

## 動作確認環境

electron-builderがそれなりに新しければ特に問題はないと思います。

確認しているのはElectron + Vuejsのちょっと特殊な環境です。

- Windows 10 Home
- [vue-cli-plugin-electron-builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/): ~2.0.0-rc.5
 - electronでVueが使えるプラグイン
 - electron-builder: ^21.2.0 -> 22.2.0　に依存しています。

vue-cli-plugin-electron-builderの内部でelectron-builderを利用してます。
electron-builderの最新も`v22.11.7`ですのでそこまで古いわけではなさそう。

## electron-builderの設定

インストーラの設定は基本的に`package.json`の`build`オプションにelectron-builderの設定を書いていきます。
（vue-cli-plugin-electron-builderの場合はvue.config.jsの`builderOptions`に書く）

▼ 配布用のWindowsアプリを作る場合は大体こんな感じになっていると思います。
コメントを書きたいのでjsoncで書いていますがJSONに読み替えてください。
```json
"build": {
 "appId": "jp.example.myapp",
 "productName": "アプリの名前（日本語OK）",
 "mac": {/* Macの設定 */},
 "dmg": {/* Macの設定 */},
 // Windowsの設定
 "win": {
 "icon": "path/to/icon256.png",
 "target": {
 // Windowsインストーラー
 "target": "nsis",
 "arch": ["x64"]
 },
 // Windowsアプリのコード証明
 "certificateFile": "./path/to/コード証明書.pfx",
 "publisherName": "SUZU6",
 "certificatePassword": "xxxxxxxxx",
 // インストーラのアップ先
 "publish": {
 // https://www.electron.build/configuration/publish#s3options
 "provider": "s3",
 "bucket": "bucket",
 "region": "ap-northeast-1",
 "storageClass": "STANDARD",
 "path": "/installer"
 }
 },
 // インストーラの設定
 "nsis": {
 // https://www.electron.build/configuration/nsis
 // インストーラの名前
 "artifactName": "${productName}_setup_${version}.${ext}",
 // 設定スクリプトのパス
 "include": "build/installer.nsh",
 "oneClick": false,
 "allowToChangeInstallationDirectory": false,
 "createDesktopShortcut": false,
 },
}
```

NSISを使うため`build.win.target.target: nsis`としてください。
そして、`build.nsis`に設定を書いていきます。

## electron-builderのnsisの設定

- https://www.electron.build/configuration/nsis.html
こちらはelectron-builderでのNSISの設定のドキュメントです。

利用したり調べて分かった項目を紹介します。


|key|type|default|discription|
|--|--|--|--|
|`artifactName`|string|`${productName} Setup ${version}.${ext}`|インストーラのファイル名 変数については[File Macros](https://www.electron.build/file-patterns#file-macros)を参照|
|`include`|string|`build/installer.nsh`|NSISスクリプトのパス `build/installer.nsh`といったファイルを用意してインストーラを拡張できる。|
|`script`|string|`build/installer.nsi`|NSISスクリプトのパス 拡張子が`.nsi`|
|`allowToChange` `Installation` `Directory` 長いので分割|boolean|false|ユーザーがインストールディレクトリを変更できるようにするかどうか。|
|`installerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`uninstallerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`installerIcon`|string||
|`oneClick`|boolean|true|ワンクリックインストーラを利用するか。インストーラを拡張しない場合は利用した方が分かりやすいと思う。|
|`createStartMenuShortcut`|boolean|true|スタートメニューのショートカットを作成するかどうか|
|`createDesktopShortcut`|boolean|true|デスクトップにショートカットを作るか|
|`shortcutName`|string|アプリ名|すべてのショートカットの名前|

## ファイル名などで利用できるマクロ

ファイル名などの文字列には[File Macros](https://www.electron.build/file-patterns#file-macros)が使えます。

|key|discription|
|--|--|
|`${arch}`|`ia32`, `x64`|
|`${os}`|ターゲットプラットフォームに応じて`mac`、`linux`または`win`|
|`${platform}`|`darwin`、`linux`または`win32`といった`process.platform`のプロパティ|
|`${name}`|`package.json`の`name`|
|`${productName}`|製品名|
|`${version}`|バージョン|
|`${channel}`|バージョンからプレリリースコンポーネントが検出されました（例 `beta`）|
|`${env.ENV_NAME}`|任意の環境変数|

他に[AppInf](https://www.electron.build/api/electron-builder#AppInfo)oの任意のプロパティが利用できます（例 `buildVersion`、`buildNumber`）。

## NSISスクリプト

インストーラをもっと拡張したい場合はNSISスクリプトで細かく設定できる。

[Custom NSIS script - www.electron.build](https://www.electron.build/configuration/nsis.html#custom-nsis-script)

electronのnsisプロパティの`script`と`include`でスクリプトのファイルパスを渡して読み込むことができます。


インストーラにスタートアップのチェックボタンをつけて、スタートアップに登録させることができたのでそのスクリプトを次の記事で紹介しています。

私は正直いまいち書き方を理解していない。
下のリンクを読んでスタートアップ


### NSISで使える変数

ちょっとしたTips。

NSISスクリプトで適当な変数を書いてビルドするとその変数は定義されていないとエラーが出る。
その際に、定義されている変数が一覧で出てくるので確認しておくと自由度が上がると思う。

ただし、NSISはShift-jisでエラーが出るため日本語は文字化けする。

下記のように出てくる。
```bash
# ビルドに失敗した
ExecError: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\Bin\makensis.exe exited 
with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Output:

Output:
Command line defined: "APP_ID=jp.example.myapp"
Command line defined: "APP_GUID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "UNINSTALL_APP_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "PRODUCT_NAME=�J��@�|@�|�b�v��A�b�v" # 文字化け
Command line defined: "PRODUCT_FILENAME=�J�C�@�|�b��N�b�v" # 文字化け
Command line defined: "APP_FILENAME=myapp"
Command line defined: "APP_DESCRIPTION=My electron app"
Command line defined: "VERSION=1.0.0"
Command line defined: "PROJECT_DIR=C:\git\myapp"
Command line defined: "BUILD_RESOURCES_DIR=C:\git\myapp\build"
Command line defined: "APP_PACKAGE_NAME=myapp"
Command line defined: "MUI_ICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "MUI_UNICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "APP_64=C:\git\myapp\dist_electron\myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_NAME=myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_HASH=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Command line defined: "COMPANY_NAME=SUZU6"
Command line defined: "APP_PRODUCT_FILENAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "COMPRESSION_METHOD=7z"
Command line defined: "MULTIUSER_INSTALLMODE_ALLOW_ELEVATION"
Command line defined: "INSTALL_MODE_PER_ALL_USERS_REQUIRED"
Command line defined: "SHORTCUT_NAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "UNINSTALL_DISPLAY_NAME=�J�C�N���@�|�b�v�A�b�v 1.0.0"
Command line defined: "MUI_WELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp" 
Command line defined: "MUI_UNWELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp" 
Command line defined: "ESTIMATED_SIZE=18823"
Command line defined: "COMPRESS=auto"
Command line defined: "UNINSTALLER_OUT_FILE=C:\git\myapp\dist_electron\__uninstaller-nsis-myapp.exe" 
Processing config: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh 
Processing script file: "<stdin>" (ACP)
warning 6000: unknown variable/constant "APP_NAME.lnk" detected, ignoring (C:\git\myapp\build\installer.nsh:10)

```

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでWindowsアプリのインストーラの設定まとめ


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

インストーラにスタートアップのチェックボタンを付けて、チェックがあればアプリをスタートアップに登録するスクリプトを作りました。

前の記事の[electron-builderとnsisでWindowsアプリのインストーラの設定まとめ - suzu6.net]()にNSISについてまとめました。

## electron-builderの設定
```bash
# Modern UIをインクルードする
!include MUI2.nsh

!ifndef BUILD_UNINSTALLER
  # ②チェックボタンがチェックされた時の関数
  Function AddToStartup
    # ③スタートアップにショートカットを作成
    CreateShortCut "$SMSTARTUP\${PRODUCT_NAME}.lnk" "$INSTDIR\${PRODUCT_NAME}.exe" ""
  FunctionEnd

  # ①インストーラの最終ページにチェックボタンをつける
  !define MUI_FINISHPAGE_SHOWREADME
  !define MUI_FINISHPAGE_SHOWREADME_TEXT "スタートアップに登録する"
  !define MUI_FINISHPAGE_SHOWREADME_FUNCTION AddToStartup
!endif
!macro customUnInstall
  # ④アンインストール時にスタートアップのショートカットを削除する
  Delete "$SMSTARTUP\${PRODUCT_NAME}.lnk"
!macroend
```

処理の説明です。
1. インストーラの最終ページにチェックボタンをつける
   `MUI_FINISHPAGE`がインストーラの最後のfinishがあるページのことです。ここにチェックボタンを付けます。
2. チェックボタンがチェックされた時の関数
   `MUI_FINISHPAGE_SHOWREADME_FUNCTION`で呼び出した関数を定義しています。
3. スタートアップにショートカットを作成
   `CreateShortCut`でショートカットを作成します。`$SMSTARTUP`がスタートアップのフォルダパス、`$INSTDIR`がインストール先のフォルダパスです。
4. アンインストール時にスタートアップのショートカットを削除する


`package.json`の`build.productName`に設定したアプリ名をとることができます。
`build.productName`は`build.name`とは違って日本語でアプリ名を定義できます。

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでインストーラにスタートアップのチェックボタンを付ける


Electronで作ったアプリが多重に起動していることを検知する仕組みがある。
これを使ってアプリの２重起動を防ぐ方法を紹介する。

なお確認はWindows 10 Homeで行った。

## アプリが多重起動していることを検知する

appの次の関数で多重起動を判定できる。

> **app.requestSingleInstanceLock()**  
> 戻り値 boolean  
> 
> このメソッドの戻り値は、アプリケーションのこのインスタンスのロックが成功したかどうかを表します。 ロック状態にできなかった場合、アプリケーションの他のインスタンスが既にロックされており、ただちに終了すると想定できます。
> 
> [app.requestSingleInstanceLock() - www.electronjs.org](https://www.electronjs.org/docs/api/app#apprequestsingleinstancelock)

つまり、アプリを立ち上げて`app.requestSingleInstanceLock()`の結果が`false`のとき既に起動しているアプリがあるため、自身のプロセスを終了させることで多重起動を防ぐことができる。


## コードサンプル
以下、TypeScriptで書いているがJavaScriptでももちろん問題ありません。

**main.ts** 
```ts
"use strict";

import { app } from "electron";
import log from "electron-log";

/** 
 * アプリの二重起動を防ぐ
 */
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  log.info("APP_ALREADY_RUNNING");
  log.info("APP_QUIT");
  app.quit();
}

/** 
 * アプリの起動処理など
 */
app.on('ready', () => {
  log.info("APP_READY");

});
```



おわり

Electronでアプリの２重起動を防ぐためのコード


Windows10のPCでElectronのアプリをビルドすると、以下のように他のプロセスがファイルを利用しているためコード証明ツールがエラーになることがある。

```bash
SignTool Error: The file is being used by another process.
SignTool Error: An error occurred while attempting to sign: C:\my\app\dist_electron\__uninstaller-nsis-popup.exe
```

## 環境

- Windows 10 Home
- Windows Security
  - ![picture 1](/images/posts/310-electron-builder-signtool-error/20210824T194800.png)  
- [vue-cli-plugin-electron-builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/): ~2.0.0-rc.5
  - electronでVueが使えるプラグイン
  - electron-builder: ^21.2.0 -> 22.2.0　に依存しています。

vue-cli-plugin-electron-builderの内部でelectron-builderを利用してます。
electron-builderの最新も`v22.11.7`ですのでそこまで古いわけではなさそう。

## 原因と解消方法

ほとんどは Windows Security (Windows Defender) が原因です。
ウィルススキャンの対象からアプリのdistフォルダを除外すると解消できます。

[electron-userland/electron-builder SignTool error: NSIS installer EXE is being used by another process #933](https://github.com/electron-userland/electron-builder/issues/933)

electron-builderにissueがあります。

▼ Windows Security からフォルダを除外した様子。

![picture 2](/images/posts/310-electron-builder-signtool-error/20210824T200406.png)  

Windows Defenderでウィルスの脅威を検知するからフォルダーを除外するとコード証明に成功するようになる。
これはインストーラ作成ツールのnsisを利用していると良く起きることらしいです。


## ログ

```bash
yarn run v1.22.11
$ vue-cli-service electron:build
 INFO  Bundling render process:

...省略

 INFO  Building app with electron-builder:
  • electron-builder  version=22.9.1 os=10.0.19043
  • writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=9.3.4 appOutDir=dist_electron\win-unpacked
  • signing         file=dist_electron\win-unpacked\アプリ.exe certificateFile=./コード証明書.pfx
  • building        target=nsis file=dist_electron\アプリ Setup 1.1.7.exe archs=x64 oneClick=false perMachine=false
  • signing         file=dist_electron\win-unpacked\resources\elevate.exe certificateFile=./コード証明書.pfx
  •   Signing NSIS uninstaller  file=dist_electron\__uninstaller-nsis-popup.exe certificateFile=./コード証明書.pfx
  • First attempt to code sign failed, another attempt will be made in 15 seconds: Exit code: 1. Command failed: C:\Users\suzu6\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0\windows-10\x64\signtool.exe sign /tr http://timestamp.digicert.com /f ./コード証明書.pfx /fd sha256 /td sha256 /d アプリ /du https://github.com/Thincacti/popup /as /p 3febf4b19288639096481d6ce68fc7a08f6149979281cecfd44d423d4e10a6f9 (sha256 hash) /debug C:\my\app\dist_electron\__uninstaller-nsis-popup.exe       
SignTool Error: The file is being used by another process.
SignTool Error: An error occurred while attempting to sign: C:\my\app\dist_electron\__uninstaller-nsis-popup.exe

...省略

Number of files successfully Signed: 0
Number of warnings: 0
Number of errors: 1

SignTool Error: The file is being used by another process.
SignTool Error: An error occurred while attempting to sign: C:\my\app\dist_electron\__uninstaller-nsis-popup.exe

    at C:\my\app\node_modules\builder-util\src\util.ts:129:16
    at ChildProcess.exithandler (child_process.js:397:5)
    at ChildProcess.emit (events.js:400:28)
    at maybeClose (internal/child_process.js:1055:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

おわり

Electronのビルドで他のプロセスがファイルを利用しているためコード証明ツールがエラーになる問題 SignTool Error The file is being used by another process.


eLectron-builderで日本語のアプリ名を設定する方法です。

[Any Windows Target - electron.build](https://www.electron.build/configuration/win)

こちらのビルドオプションの`productName`で日本語を設定することができます。
`productName`を設定しない場合は、package.jsonの`name`がアプリ名となりアルファベットの小文字と数字といくつかの記号しか設定できない。

```json
"build": {
    "appId": "your.app.id",
    "productName": "日本語のアプリ名",
    "mac": { ... },
    "win": { ... },
}
```

これで日本語名のアプリがビルドできる。

また、文字コードが**UTF-8-MAC**をであるらしく「べ」が名前に含まれるとビルドに失敗するエラーがあるらしい。濁音や半濁音のようにUTF-8-MACでは二文字一組で扱われる文字には気を付けたい。

[electron-builderのproductNameに日本語が設定できなかった件 - note](https://note.com/uguisu_an/n/n3cf18c3cf323)

eLectron-builderで日本語のアプリ名を設定する

[Electron-builder](https://github.com/electron-userland/electron-builder)を利用してWindowsでアプリをビルドすると下記のようなエラーが出ることがあります。

```sh
Processing config: C:\Users\�鑺�E��\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh
Processing script file: "<stdin>" (ACP)
Error output:

Error output:
!include: could not find: "C:\Users\鈴村\AppData\Local\Temp\t-lEActj\0-messages.nsh" 
Error in script "<stdin>" on line 75 -- aborting creation process
```

これはWindowsのユーザ名を日本語（またはASCII以外の文字コード）で登録している場合に起きます。
正確には、Windows向けのインストーラーが作れる[NSIS](https://nsis.sourceforge.io/Main_Page)がASCII以外の文字列のパスに対応していないことが原因です。

ビルドする際に`ユーザ名/AppData/`の配下に一時ファイルを作るが、そのパスUTF8だと読めずにエラーになる。

NSISの問題であり、対処方法は
- **AppDataがASCIIのパスになるよう移動する**
- **ASCIIのユーザ名でアカウントを作成しなおす**
のどちらかしかありません。
`%AppData%`はシステムやアプリで使われているため。[AppDataを移動する](https://superuser.com/questions/1250288/can-i-move-my-appdata-folder-in-windows-10)のは大変そうです。

ASCIIのユーザ名でアカウントを作成し直して解決しました。

[この件のissue](https://github.com/electron-userland/electron-builder/issues/3243)

Electron-builderでパスに日本語を含んでいる場合はビルド出来ない

ElectronとVue3 + TypeScriptで開発する方法を紹介します。

Electron + Vue3 + TypeScriptの環境を整えて、ビルドとテストを実行するところまで行います。

その他については４本くらいに分けて書いていく予定。

- 技術選定編
- 環境構築編 ← ここ
- ページを開発していく
- アプリ配布とアップデート

## Vue CLI Plugin Electron Builder

Electron + Vueのために[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を使って環境を構築していきます。
これはVue cliで追加できるプラグインで簡単に追加できます。

- [github](https://github.com/nklayman/vue-cli-plugin-electron-builder)

継続して開発されているので安心。

## 事前準備

- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5

事前にyarnを入れておきます。
npmでもよいですが、yarnのほうが扱いやすく速いです。

私はWindows10で進めてますが、他の環境も同じ手順で概ね大丈夫かと。

１点、**WindowsではPCのユーザ名が日本語だとビルド時にエラーが起きます**。
（厳密にはASCIIにない文字の場合）。
このエラーの回避は面倒なので、英数字のユーザアカウントを作ってから進めてください。
詳細は[こちら](https://www.suzu6.net/posts/259-electron-build-utf8/)です。

## Electron + Vue3 + TypeScriptの手順
 
 vue cliを導入する

[Vue-CLI](https://cli.vuejs.org/)のバージョン3か4を使います（推奨はバージョン4）。

```sh
$ yarn global add @vue/cli

$ vue -V
@vue/cli 4.5.9
```

### Vue + TypeScriptの環境

`vue create {アプリ名}`でアプリのプロジェクトを作成する。

質問の中で構成を決めて行きます。


```sh
> vue create programmable-calculator

Vue CLI v4.5.9
# 構成のプリセットを選択　-> マニュアル
? Please pick a preset: (Use arrow keys)
 Default ([Vue 2] babel, eslint)
 Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
```
構成を決めたいので`Manually select features`を選択します。
`十字キー`で移動して `Enter` で選択する。

```sh
? Please pick a preset: Manually select features
# プロジェクトに必要なモノを選択する　-> PWA と E2E Testing以外全て
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, to invert selection)
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support 
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
>( ) E2E Testing
```
`PWA`と`E2E Testing`以外をすべて選びました。
自分で構成するとかなり大変なので、TypeScriptやテストを自動で構成してくれるのはありがたい。
`E2E Tesing`はユーザと同じようにブラウザを操作して行うテストです。
Electronで開発するため、それ用のモノをあとで導入します。

```sh
# Vue.jsのバージョン -> 3.x
? Choose a version of Vue.js that you want to start the project with 
 2.x
> 3.x (Preview)

# TypeScriptと一緒にBabelを使うか -> Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

# Vue routerでヒストリーモード（ブラウザバック）を使うか -> Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

# CSSプリプロセッサ -> Sass/SCSS (with node-sass)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
 Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
 Less
 Stylus

# コードの規準　→ ESLint + Prettier
? Pick a linter / formatter config: 
 ESLint with error prevention only 
 ESLint + Airbnb config
 ESLint + Standard config
> ESLint + Prettier
 TSLint (deprecated)

# Lintが実行するタイミング -> 保存するときにした。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

# ユニットテストで使うモジュール -> Jest
? Pick a unit testing solution: (Use arrow keys)
 Mocha + Chai
> Jest

# 設定の記述先 -> 専用の設定ファイルで行う。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
 In package.json

# プリセットとして登録するか　-> No
? Save this as a preset for future projects? (y/N)

# プロジェクトを作成する。
Vue CLI v4.5.9
✨ Creating project in C:\git\programmable-calculator.
```


TypeScriptには`ESLint + Prettier`がよさそうだったので選択しました。
[TSLintは廃止予定](https://github.com/palantir/tslint/issues/4534)らしいです。

```sh
🎉 Successfully created project programmable-calculator.
👉 Get started with the following commands:

 $ cd programmable-calculator
 $ yarn serve
```
完了したのでディレクトリを移動して、立ち上げます。

![vu3](/images/posts/260/vue3.png)

この時点での[ディレクトリ構成](https://github.com/suzu6/programmable-calculator/tree/b3b02d00bdf4ac7ed166de31ad85fc902cae21ec)

### Electron-Builderの導入
VueCliで用意してある[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を導入します。
Vueのプラグイン同様、`vue add`で追加できる。

似たもので[electron-vue](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/)もあるが、こちらVue3系に現時点で対応していないようです。

```sh
> vue add electron-builder

# Electronのバージョン -> ^9.0.0
? Choose Electron Version (Use arrow keys)
 ^7.0.0
 ^8.0.0
> ^9.0.0
? Add tests with Spectron to your project? Yes

# インストール中。。。

✔ Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
```
現時点ではElectron v9までしかサポートしていない（最新はv11です）。

実行とビルドコマンドが追加されました。

```sh
# 実行
> yarn run electron:serve

# ビルド
> yarn run electron:build
```

また、同時に追加された`postinstall`と`postuninstall`はネイティブの依存関係がElectron のバージョンに一致するようにする`ectron-builder`のコマンドです（使ったことはない）。

[Electron-Builderインストール後の差分](https://github.com/suzu6/programmable-calculator/commit/596cb9905d9862d2591cfbf3b949d6d0810fb2db)

もしインストールが止まった場合は、[こちら](https://www.suzu6.net/posts/261-stoped-vue-add-electron-builder/)に対処を載せました。

## 確認しよう

### 実行してみる

```sh
# 実行
> yarn run electron:serve
```
ウィンドウが出ればOK！
同時にChromeのDevToolが開いて、ウェブのように確認できます。

![electron](/images/posts/260/electron.png)

### テストしてみる

この時点で２つのテストが出来てるはず。
- [/tests/unit/electron.spec.js](https://github.com/suzu6/programmable-calculator/blob/596cb9905d9862d2591cfbf3b949d6d0810fb2db/tests/unit/electron.spec.js)
 - ウィンドウを閉じたり開いたりと操作するテスト。
- [/tests/unit/example.spec.ts](https://github.com/suzu6/programmable-calculator/blob/596cb9905d9862d2591cfbf3b949d6d0810fb2db/tests/unit/example.spec.ts)
 - HelloWorld.vueでメッセージが表示できるかのテスト。

```sh
>yarn run test:unit
yarn run v1.22.5
$ vue-cli-service test:unit
 PASS tests/unit/example.spec.ts 
 PASS tests/unit/electron.spec.js (44.968s)

Test Suites: 2 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 45.955s
Ran all test suites.
Done in 49.00s.
```
２つともテストに成功しました！

`tests/unit/electron.spec.js`がタイムアウトする場合は、`jest.setTimeout(50000);`のタイマーの値を増やす。
Electron を起動してウィンドウを色々操作するためけっこう時間がかかります。

### ビルドしてみる

そのままビルドしてアプリを実行すると、ナビゲーションだけ残して真っ白な画面になる。
ナビゲーションをクリックすると描画される。

![build](/images/posts/260/build.png)

これはVue Routerの**historyモード**が原因で、**hashモード**を利用すると回避できる。
以下のように書き換える。
もう少し詳しくは[こちら](https://www.suzu6.net/posts/262-vue-electron-builder-blank/)に書いた。

```diff
-- import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
++ import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router";

・・・省略

const router = createRouter({
-- history: createWebHistory(process.env.BASE_URL),
++ history: process.env.IS_ELECTRON
++ ? createWebHashHistory()
++ : createWebHistory(),
})
```
[差分 - github](https://github.com/suzu6/programmable-calculator/commit/25c5ee613b859dfeb6241c0555e682899db42b6a#diff-25a6634263c1b1f6fc4697a04e2b9904ea4b042a89af59dc93ec1f5d44848a26)


書き換えてからビルドを実行する。

```sh
# ビルド
>yarn run electron:build

...
 DONE Build complete!
Done in 102.37s.
```

`/dist_electron`にビルドしたものが出てくる。Windowsでビルドしてます。

- インストーラー : `/dist_electron/programmable-calculator Setup 0.1.0.exe`
- アプリ : `/dist_electron/win-unpacked/programmable-calculator.exe`

![build-fix](/images/posts/260/build-fix.png)

以上で、一通りの開発するベースを作ることができました。

## エラーの対応

- [vue add electron-builderを実行してインストールが止まったとき - suzu6](https://www.suzu6.net/posts/261-stoped-vue-add-electron-builder/)
- [Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる - suzu6](https://www.suzu6.net/posts/262-vue-electron-builder-blank/)
- [Electron-builderでパスに日本語を含んでいる場合はビルド出来ない - suzu6](https://www.suzu6.net/posts/259-electron-build-utf8/)
- [Electron-Builderでビルドのエラー　The process cannot access the file because it is being used by another process. - suzu6](https://www.suzu6.net/posts/263-electron-builder-being-used-by-another-process/)

## 参考

- [Vue-CLI](https://cli.vuejs.org/)
- [Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)

ElectronとVue3 + TypeScriptでデスクトップアプリを作る 環境構築編


[Vue + Electron + TypeScriptでアプリをつくる](https://www.suzu6.net/posts/260-electron-vue-develop/)ときのエラー対処。

[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を導入していた時にインストールが止まることがあった。
これの対処を残します。

## 環境

- Windows 10
- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5
- @vue/cli 4.5.9
- vue-cli-plugin-electron-builder ~2.0.0-rc.5

## Electron-Builderの導入でインストールが止まる

Electron-Builderの導入でインストールが止まることがあった。
`yarn install`して、`background.js`を`background.ts`にリネームして動きました。

```sh
> vue add electron-builder

…インストール中

info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[-/3] ⠂ waiting...
[2/3] ⠂ electron-chromedriver
[-/3] ⠄ waiting...バッチ ジョブを終了しますか (Y/N)? Y

```
途中で止まったので`yarn install`でパッケージの整合させる
```
> yarn install
```

この後、`yarn run electron:serve` をすると `background.js` がないとエラーが出る。

```sh
 ERROR  Failed to compile with 1 errors                                    17:13:17
This dependency was not found:

* C:\git\popup\src\background.ts in multi ./src/background.ts
```

`./src/background.js`は存在します。
どうやら、拡張子が ts でないといけなかったようでリネームして解決しました。

```sh
> mv ./src/background.js -> ./src/background.ts にリネーム

>yarn run electron:build
```
OK