
仕事で使うので React に入門する。
いつかは React と TypeScript でアプリを作れるようになって設計も考えられるようになるところまで目指すが、今回はチュートリアルだけやりつつメモをするだけの記事。

読まなくていいので[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を進めた方がいい。

## 前提

Vue + TypeScript でアプリを開発した経験はある。
React の方が TypeScript できちんと型を定義して開発できるため相性が良く開発しやすいことを期待している。

## React

https://ja.reactjs.org/

サンプルを見た感じ、コンポーネントをクラスで扱えるのがわかりやすそう。
前に Vue と比較したときは JavaScript の中に HTML がある JSX が変な感じがしたが、慣れたら問題なさそうに思う。

```jsx:jsx
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
)
```

このブログでマークダウンのパーサーとして使ってる [remark](https://github.com/remarkjs/remark#syntax) でも jsx のハイライトが対応していたのは嬉しい。

### React のチュートリアル

https://ja.reactjs.org/tutorial/tutorial.html

React でインタラクティブな三目並べゲーム (tic-tac-toe) を作るチュートリアル。

ブラウザでの実行環境も用意されているが、ローカル開発環境作ることから進めてみる。

作ったものの[リポジトリ github](https://github.com/suzu6/react-typescript-test/tree/main/my-app)

### ローカル開発環境

- node v16.13.0
- npm v8.1.0
- os Windows11
- yarn -v

```bash
npx create-react-app my-app
```

これでアプリの土台を作成して、`my-app/src/*`を削除する。
src/に index.js, index.css を追加。

```bash
> npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\git\suzu6\react-typescript-test\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

略

Success! Created my-app at C:\git\suzu6\react-typescript-test\my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  yarn start

Happy hacking!
```

インストール終わり。
yarn がインストールされていたためか、yarn のコマンドが表示された。

アプリが実行確認と src にあるファイルを削除を進めた。

index.js と index.css の追加も行い実行する。

![picture 1](/images/posts/338-react-typescript/1639287302648.png)

### Developer Tools

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

途中で紹介されていた React Developer Tools を Chrome に追加した。

Developer Tools のメニューに`components`が追加され、React コンポーネントの状態までわかるようになった。これいいね。

![picture 2](/images/posts/338-react-typescript/1639288365306.png)

同じく追加された profiler はまだ使い方がわからない。

### 制作時のメモ

タイムトラベル機能の追加が変更箇所が大きくて迷った。
履歴を残すために state を Board から Game に移す作業で onclick が動かなくなったが、props の onClick か自身のものかで考えて解決した。

### マス目を for 文で書いてみる

チュートリアルが終わったので適当に改造する。

マス目の数を増やせるように Board のレンダーを for 文で表現してみる。

```jsx
render() {
  return (
    <div>
      <div className="board-row">
        {this.renderSquare(0)}
        {this.renderSquare(1)}
        {this.renderSquare(2)}
      </div>
      <div className="board-row">
        {this.renderSquare(3)}
        {this.renderSquare(4)}
        {this.renderSquare(5)}
      </div>
      <div className="board-row">
        {this.renderSquare(6)}
        {this.renderSquare(7)}
        {this.renderSquare(8)}
      </div>
    </div>
  );
}
```

▼ こんな感じで書き換えることができた。

```jsx
render() {
  const [width, height] = [3, 3];
  const rows = [];
  for (let i = 0; i < width; i++) {
    const cells = [];
    for (let j = 0; j < height; j++) {
      cells.push(this.renderSquare(i * 3 + j));
    }
    rows.push(<div className="board-row">{cells}</div>);
  }
  return <div>{rows}</div>;
  );
}
```


Reactに入門するよ


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の最大化と最小化のイベントを制限する方法


TypeScriptでGenericsな配列を扱う関数を試してみた。
引数の型が`T`の例は多くあるけど`Array<T>`は無かったのでメモしておく。

## Genericsな配列を扱う関数

重複を除いたユニークなリストを返す関数を考えてみる。

```ts
/**
  * 重複を除いたユニークなリストを返す
  * @param Array<T> src
  * @return Array<T> 要素がユニークなリスト
  */
function uniqueList<T>(src: Array<T>): Array<T> {
  return src.filter(function (elem, index, self) {
    return self.indexOf(elem) === index
  })
}
```

関数名のあとにジェネリクス`<T>`を定義して、あとは引数と返り値の型で`Array<T>`と利用することができる。

実行するとstring型とnumber型もunionでも利用できた。

```ts
const chars = ['A', 'B', 'A', 'B', 'C', 'A']
const numbers = [0, 1, 2, 2, 1, 3, 1]
const unions: Array<number|string> = [1, 2, 2, 'A', 'A', 'B']

console.log(uniqueList(chars))
// ['A', 'B', 'C']
console.log(uniqueList(numbers))
// [0, 1, 2, 3]
console.log(uniqueList(unions))
// [1, 2, 'A', 'B']
```

【TypeScript】ジェネリックスな配列Array<T>を扱う関数を定義する


TypeScriptのプロジェクトにJestを追加してテストを書いていくと、`describe`や`expect`などテスト用の関数が読み込めていなかった。

![picture 1](/images/posts/326-ts-jest-not-find-describe/1633874097427.png)  

以下のコマンドで定義はインストール済だがエラーが出ている。
```bash
yarn add jest @types/jest ts-jest
```

## 解消方法

[こちらのstackoverflow](https://stackoverflow.com/questions/54139158/cannot-find-name-describe-do-you-need-to-install-type-definitions-for-a-test)で解決した。

```diff:tsconfig.json
{
  "compilerOptions": {
--    "types": ["webpack-env"],
++    "types": ["webpack-env", "jest", "node"],
  }
}
```
このようにコンパイルオプションでjestの型の読み込みこみが必要だったようだ。

## 参考
- [Jest - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/intro-1/jest)

【TypeScript】Jestでdescribeなどの関数がnot findになってるのを解消する


TypeScriptのjestで用意したテストで、自作のモジュールをインポートしようとすると`Cannot find module`となってしまう。

例として次のテストを実行してみる。

```ts:Login.test.ts
import LoginService from "@/app/Services/LoginService";
import auth from "@/Domain/Repositories/AuthRepository";

describe("LoginService", () => {
  it("LoginSuccess", () => {
    // ...
    expect(result).toBe('success');
  });
});
```

`@/`は`tsconfig.json`で定義してある。エディタ（VSCode）のIDEではパスが通っているようでエラーは出ない。


実行した結果がこちら。
テストを実行したときだけパスが通らない。

```bash
  ● Test suite failed to run

    Cannot find module '@/app/Services/LoginService' from 'tests/app/Services/Login.spec.ts'

    > 1 | import LoginService from "@/app/Services/LoginService";
        | ^
      2 | import auth from "@/Domain/Repositories/AuthRepository";
      3 |
      4 | describe("LoginService", () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (tests/app/Services/Login.spec.ts:1:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        17.456 s
Ran all test suites.
```

## 解決方法

テストは`jest.config.js`で`@/`の定義が必要。

`@/`など`tsconfig.json`で定義してあるとVSCodeのIDEとアプリのコンパイルには成功する。

▼ `tsconfig.json`のパスの定義
```json:tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
}
```

テストでは`tsconfig.json`とは別に`jest.config.js`で`@/`などのマッパーを定義する必要がある。


混乱しないよう`tsconfig.json`と同じパスの定義をするといい。

```js:jest.config.js
module.exports = {
  preset: "ts-jest",
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
    },
  },
  roots: ["<rootDir>/"],
  testMatch: ["**/?(*.)+(spec|test).+(ts|tsx|js)"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // 追加
  },
};
```

以上でテストの実行時にパスが通った。

【TypeScript】JestでインポートしたモジュールがCannot find moduleとなるエラー


デスクトップアプリを作るなら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のスリープと起動イベントを検知する


Node.js (electron)で作成していたアプリでHTTPリクエスト中の処理をキャンセルして再度リクエストなどする必要があったため、Axiosでリクエスト中の処理をキャンセルする実装をしました。

リクエストを出した側からキャンセルすることができます。

## Axios

**Axios**はnode.jsとブラウザのための[promiseベース](https://javascript.info/promise-basics)のHTTPクライアント。

- [Axios - GitHub](https://github.com/axios/axios)
- ドキュメント [axios-http.com](https://axios-http.com/)

キャンセル処理についてはドキュメントの[Cancellation](https://axios-http.com/docs/cancellation)に書いてあります。

## コードサンプルと解説
ドキュメントのコードサンプルです。
```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // キャンセルのトークン
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
```

`CancelToken.source`を利用してキャンセルトークンを作成してリクエストのオプションに設定します。
そして`source.cancel()`でリクエストをキャンセルできる。

`CancelToken.source()`が返す`source`は独立しているので、▼のようにリクエスト別にキャンセルできます。
```js
// キャンセルトークンが独立している
const source1 = CancelToken.source();
const source2 = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source1.token
})
axios.get('/user/12345', {
  cancelToken: source2.token
})
```

## 動かして確認してみる

確認しやすいようにドキュメントのコードサンプルを拡張しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。


```js
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const source2 = CancelToken.source();

const start = Date.now();
console.log("start: ", start)

// ①レスポンスがそんなかからないリクエスト
axios.get('http://localhost:3000/', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// ②レスポンスに３秒かかるリクエスト
axios.get('http://localhost:3000/delay', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})


// ③レスポンスに３秒かかるリクエスト（キャンセルしない）
axios.get('http://localhost:3000/delay', {
  cancelToken: source2.token
})
.then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// 1秒後にキャンセルリクエスト
setTimeout(() => {
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');
}, 1000);
```
３つのリクエストを用意してキャンセルしています。
-  ①レスポンスがそんなかからないリクエスト
-  ②キャンセルするレスポンスに３秒かかるリクエスト
-  ③キャンセルしないレスポンスに３秒かかるリクエスト

これを実行すると▼のログが出ます。数字はミリ秒です。

```bash
> node .\cancellation.js
start:  1630385223319
71 Hello World!
1021 Request canceled:  Operation canceled by the user.
3081 3 seconds delay
```

- ①はキャンセル前にリクエストが終了しているため正常終了。
- ②は３秒かかる処理の途中でキャンセルが実行されたことがわかる。
- ③はキャンセルしたトークンと別のキャンセルトークンが設定されていたため、キャンセルされず正常終了しました。

### サーバ側のコード
リクエストキャンセルの確認のためのサーバを[Express](https://expressjs.com/ja/)で再現しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

// リクエスト返答まで時間がかかるエンドポイント
app.get('/delay', (req, res) => {
  setTimeout(()=>{
    res.send('3 seconds delay');
  }, 3000);
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
```

コードサンプルは[Github](https://github.com/suzu6/trial-code/tree/master/JS/delay_server)に登録しています。

axiosでリクエスト中の処理をキャンセルする


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}`|インストーラのファイル名<br>変数については[File Macros](https://www.electron.build/file-patterns#file-macros)を参照|
|`include`|string|`build/installer.nsh`|NSISスクリプトのパス<br>`build/installer.nsh`といったファイルを用意してインストーラを拡張できる。|
|`script`|string|`build/installer.nsi`|NSISスクリプトのパス<br>拡張子が`.nsi`|
|`allowToChange`<br>`Installation`<br>`Directory`<br>長いので分割|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でアプリの２重起動を防ぐためのコード


[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

## Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる

[Vue CLI Plugin Electron BuilderのCommon Issues](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve)に載ってました。

Vue Routerのヒストリーモードが原因です。

**history**モードはページのリロード無しにURL遷移を実現する`history.pushState`APIを使っています。

Electron では完全なURLをhashを使ってシミュレートする**hash**モードを使う必要がある。


`/src/router/index.ts`を以下のように修正する。
### If using Vue 2:
```diff
export default new Router({
- mode: 'history',
+ mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
```

### If using Vue 3:
```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)

詳しくは[Vue RouterのHTML5 History モード](https://router.vuejs.org/ja/guide/essentials/history-mode.html)を参照。