シェルスクリプトを実行した際に`$'\r': command not found` が出た。

これは Windows の改行コードが原因であり、スクリプトを Linux/unix の改行コードに変換する必要がある。

## dos2unix

https://docs.oracle.com/cd/E19253-01/819-1210/6n3j74jn0/index.html

改行コードを変換するツール dos2unix で変更する。

```bash
$ dos2unix <対象のファイル>
```

インストール方法

```bash
# redhat系
$ yum install dos2unix

# Debian系
$ apt-get install dos2unix

# Mac
$ brew install dos2unix
```

### 他に試したこと

sed での変換はうまくいかず、実行結果は変わらなかった。

```bash
$ sed "s/^M//g" <変換前のファイル> <変換後のファイル>
```

シェルスクリプトの実行で$'\r' command not found が出る場合

Windows 11 に Docker 環境を構築するのでその手順をメモ。
Windows 10 も同様の手順です。

**Docker Desktop on Windows**と**WSL2**で Docker 環境を作ります。
新しい Windows 11 ですのでどちらもこれからインストールしていきます。

[Install Docker Desktop on Windows](https://docs.docker.com/desktop/windows/install/)の通りに作っていきます。

## Contents

## おおまかな手順

ちょっと長くなるのでここで大まかな手順をまとめておきます。

1. [システム要件](https://docs.docker.com/desktop/windows/install/#system-requirements)を確認する
2. [WSL2 を導入する](https://docs.microsoft.com/en-us/windows/wsl/install)
3. [Docker Desktop on Windows を導入する](https://docs.docker.com/desktop/windows/install/)

リンクは Docker と Microsoft 公式の手順です。

また、[docker-compose](https://docs.docker.jp/compose/index.html)は Docker Desktop on Windows に含まれています。

## 1. システム要件を確認する

### 環境

今回利用する OS とバージョンです。

- Windows 11
 - Home バージョン 21H2
 - OS ビルド　 22000.318
 - 64bit

### Docker Desktop on Windows のシステム要件

Docker Desktop on Windows は**WSL2**または**Hyper-V**を必要とします。

今回利用するのは Windows の Home 版ですので WSL2 を必要とします。
Pro 版では Hyper-V と WSL2 のどちらでも利用できます。

以下、Home 版と WSL2 で進めます。

### Docker Desktop on Windows のシステム要件（Home 版）

- Windows 11 64-bit: Home version 21H2 or higher
- Windows 10 64-bit: Home 2004 (build 19041) or higher,
- WSL2 の機能を有効にしていること

バージョンが足りていなければ OS のアップデートが必要です。

### WSL2 のシステム要件（Home 版）

- [第 2 レベルのアドレス変換（SLAT）](https://en.wikipedia.org/wiki/Second_Level_Address_Translation)を備えた 64 ビットプロセッサ
- 4GB システム RAM
- BIOS レベルのハードウェア仮想化サポート
- [Linux カーネル更新プログラム パッケージをダウンロードすること](https://docs.microsoft.com/ja-jp/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package)

SLAT はよくわからない。
WSL2 に関してはインストールしてみれば可能かわかる。

## 2. WSL2 をインストールする

<https://docs.microsoft.com/en-us/windows/wsl/install>

管理者権限で PowerShell を開いて次のコマンドを実行する。
**Linux OS のインストールや WSL2 の設定、Linux カーネルのアップデートなど必要なすべてはこのコマンドで完了します**。

インストールされるは`Ubuntu 20.04 LTS`でした。
変更する場合はディストリビューションを指定してください。

```bash:管理者権限のPowerShell
# WSLとOSのインストール
> wsl --install

# インストールするディストリビューションを変更したい場合
> wsl --install -d <Distribution Name>
```

コマンドが完了したら PC を再起動する。
起動すると WSL が立ち上がりユーザ名とパスワードを入力してインストール完了です。

▼ 初回起動した WSL
![picture 1](/images/posts/337-windows11-docker-desktop-wsl2/1636983087058.png)

Ubuntu のバージョンは 20.04 LTS でした。

```bash
# WSLのバージョン確認
> wsl --list --verbose
 NAME STATE VERSION
* Ubuntu Stopped 2
```

以上で WSL2 が有効になっており Ubuntu がインストールできました。
[以前](https://docs.microsoft.com/en-us/windows/wsl/install-manual)と比べるとめっちゃ簡潔になってた！

### WSL のディストリビューション

上のコマンドでインストールすると、デフォルトのディストリビューションは Ubuntu です。
インストールできるディストリビューションの確認と、インストールするディストリビューションを変更するコマンドは、次のように入力します。

```bash
# インストールできるディストリビューションの確認
> wsl --list --online
インストールできる有効なディストリビューションの一覧を次に示します。
既定の分布は ' * ' で表されます。
 'wsl --install -d <Distro>'を使用してインストールします。

 NAME FRIENDLY NAME
* Ubuntu Ubuntu
 Debian Debian GNU/Linux
 kali-linux Kali Linux Rolling
 openSUSE-42 openSUSE Leap 42
 SLES-12 SUSE Linux Enterprise Server v12
 Ubuntu-16.04 Ubuntu 16.04 LTS
 Ubuntu-18.04 Ubuntu 18.04 LTS
 Ubuntu-20.04 Ubuntu 20.04 LTS

# インストールするディストリビューションを変更
> wsl --install -d <Distribution Name>
```

Ubuntu 　がインストールされました。
デフォルトの Ubuntu は最新のものっぽいです。

## 3. Docker Desktop on Windows を導入する

続いて Docker Desktop on Windows を導入していきます。

[Install Docker Desktop on Windows](https://docs.docker.com/desktop/windows/install/)に戻ってこのボタンからインストーラーをダウンロードする。

![picture 1](/images/posts/337-windows11-docker-desktop-wsl2/1637065266463.png)

[この段落](https://docs.docker.com/desktop/windows/install/#install-docker-desktop-on-windows)の手順を進める。

### Docker Desktop on Windows をインストールする

1. Docker Desktop Installer.exe をダブルクリックしてインストーラーを起動する。
2. **Install required Windows components for WSL 2**のオプションをチェックしてインストールを進める。

![picture 2](/images/posts/337-windows11-docker-desktop-wsl2/1637065417253.png)

3. インストールが成功したら、close をクリックしてインストールプロセスを完了します。一旦ログアウトする。
 ![picture 3](/images/posts/337-windows11-docker-desktop-wsl2/1637065589940.png)

4. ログインすると承認画面が出てるので Accept で Docker Desktop が無事起動します。
 ![picture 1](/images/posts/337-windows11-docker-desktop-wsl2/1637065859482.png)

あとは、チュートリアルもあるので Docker 使えるよね？って確認してみてください。

![picture 2](/images/posts/337-windows11-docker-desktop-wsl2/1637066013088.png)

以上

WSL2とDocker Desktop on WindowsでDocker環境を構築する


新しく用意したWidows11の環境で、Nodeのアプリを実行しようと`yarn install`を実行したら以下のようなエラーが出た。

`Error: Could not find any Visual Studio installation to use at VisualStudioFinder.fail`

これの前にPythonがないよってエラーが出たので、そちらはPythonをインストーラーからインストールしたことで解決している。
このエラーはメモし忘れた。

Pythonをインストールしたら、以下のエラーが出た。

```bash
warning " > vue-jest@3.0.7" has unmet peer dependency "vue@^2.x".
warning " > vue-jest@3.0.7" has unmet peer dependency "vue-template-compiler@^2.x".       
[4/4] Building fresh packages...
[1/6] ⠠ node-sass
[-/6] ⠠ waiting...
[-/6] ⠠ waiting...
[4/6] ⠠ deasync
error C:\git\suzu6\myblog\node_modules\deasync: Command failed.
Exit code: 1
Command: node ./build.js
Arguments:
Directory: C:\git\suzu6\myblog\node_modules\deasync
Output:
C:\git\suzu6\myblog\node_modules\deasync>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp info it worked if it ends with ok
gyp info using node-gyp@8.2.0
gyp info using node@16.13.0 | win32 | x64
gyp info find Python using Python version 3.10.0 found at "C:\Users\81905\AppData\Local\Programs\Python\Python310\python.exe"
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack     at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:404:5)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! System Windows_NT 10.0.22000
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\git\suzu6\myblog\node_modules\deasync
gyp ERR! node -v v16.13.0
```

## node-gypのエラーとWindowsでのセットアップ方法

https://github.com/nodejs/node-gyp#on-windows

エラー内の上のリンクに詳細とMac, Unix, Windowsでの解決方法がある。

…ただ、残念ながら上記のリンクでは解決しなかった。

https://github.com/Microsoft/nodejs-guidelines/blob/master/windows-environment.md#compiling-native-addon-modules

こっちのVisual Studio 2017のビルドツールとPython2.7を利用する方法で進めてやっとできた。3時間くらいかかって中々つらい。

以下はうまくいった方の手順を説明する。

### node-gypとは
node-gypについてgoogle翻訳すると、
> node-gypはNode.jsのネイティブアドオンモジュールをコンパイルするためにNode.jsで記述されたクロスプラットフォームのコマンドラインツールです。
> 
> 特徴
> - 同じビルドコマンドは、サポートされているプラ​​ットフォームのいずれでも機能します
> - Node.jsのさまざまなバージョンのターゲティングをサポートします

とのことです。

```bash
npm install -g node-gyp
```
node-gypのインストールはこれで、私が利用したパッケージのどこかで利用していたのだと思う。

## エラーの解決とWindowsでのセットアップ方法 

Mac, Unixも解決方法があるが、Windowsについてだけ書く。


1. Python2.7をインストールしてnpm configに設定する
2. Visual Studio 2017の"Desktop development with C++"をインストールする
3. コマンドプロンプトで `npm config set msvs_version 2017`を実行する。

### 1. Python2.7をインストールしてnpm configに設定する

https://www.python.org/downloads/release/python-2715/

からPython2.7をインストールする。
インストーラーは「Windows x86-64 MSI installer」を利用した。

`npm config set python python2.7`でnpmでPyhton2.7を利用することを設定します。

```bash
>npm config set python python2.7

>npm config get python python2.7 
python=python2.7
python2.7=undefined
```

最新の`3.10`をインストールした場合はエラーが解決しなかった。謎。

### Visual Studioビルドツールをインストールする

Visual Studioの**Desktop development with C++**をインストールします。

最新の`2022`をインストールしたがエラーを解決できなかった。
**Build Tools for Visual Studio 2017**をインストールしました。

https://visualstudio.microsoft.com/ja/vs/older-downloads/#visual-studio-2017-and-other-products

![picture 1](/images/posts/334-yarn-error-node-gyp/1636876617146.png)  

何故かサインインすると別のページに連れていかれる。
戻ってもう一度ダウンロードボタンから次のページへ行ける。

![picture 2](/images/posts/334-yarn-error-node-gyp/1636876789776.png)  

vs_BuildTools.exe をダウンロードして実行する。

![picture 3](/images/posts/334-yarn-error-node-gyp/1636876899526.png)  

**Visual C++ Bild Tools**をチェックしてインストールする。

### 3. コマンドプロンプトで `npm config set msvs_version 2017`を実行する。

**Build Tools for Visual Studio 2017**をインストールしたのでバージョンは`2017`とする。



```bash
>npm config set msvs_version 2017

>npm config get msvs_version
2017
```

OK

PCを再起動する。

## yarn installを実行する

ビルド通ったぜ！

yarn installしたらnode-gnp ERRとError Could not find any Visual Studio installation to use at VisualStudioFinder.failが出た【Windows11】


 PowerShellでglobalでインストールしたyarnを実行する方法です。

Windows 11 (Windows 10も同様)のPowerShellで`npm install -g yarn`を実行すると
`このシステムではスクリプトの実行が無効になっているため、ファイルC:\Users\81905\AppData\Roaming\npm\yarn.ps1 を読み込むことができません。`とでる。

## 環境

- Windows 11
- Node v16.13.0
- npm 8.1.0
- インストールできた yarn : 1.22.17

## yarnのインストール方法

https://yarnpkg.com/getting-started/install

公式の手順通り進める。

posershellでnpmのglobalにインストールする。
```bash
> npm install -g yarn
```

yarnを実行すると次のエラーが出る。

```bash
PS C:\Users\81905> yarn -v
yarn : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\81905\AppData\Roaming\npm\yarn.ps1 を
読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170)
を参照してください。
発生場所 行:1 文字:1
+ yarn -v
+ ~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

![picture 3](/images/posts/333-setup-windows11-develop-environment/1636728518606.png)  

### 解決方法

こちらの記事を参考にスクリプトの実行ポリシーを変更する。

参考: https://labor.ewigleere.net/2020/06/04/yarn-powershell/

ポリシーを確認する。
```bash
PS C:\Users\81905> Get-ExecutionPolicy
Restricted
```
制限されてました。


スクリプトを実行できる`RemoteSigned`のポリシーに変更します。
```
# 管理者権限でPowerShellを実行する
PS C:\Users\81905> Set-ExecutionPolicy RemoteSigned
PS C:\Users\81905> Get-ExecutionPolicy
RemoteSigned
```

ポリシーを変えてから実行する。
```
PS C:\Users\81905> yarn -v
1.22.17
# OK!!
```

PowerShell の実行ポリシー についてはこちらを見てください。

[PowerShell - 実行ポリシーについて - Microsoft Docs](https://docs.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2)

> ## RemoteSigned
> - Windows server コンピューターの既定の実行ポリシー。
> - スクリプトを実行できます。
> - では、電子メールやインスタントメッセージングプログラムを含む、インターネットからダウンロードされるスクリプトと構成ファイルに対する信頼された発行元からのデジタル署名が必要です。
> - では、ローカルコンピューター上に記述され、インターネットからダウンロードされないスクリプトに対してデジタル署名は必要ありません。
> - コマンドレットなどを使用して、スクリプトのブロックが解除された場合に、インターネットからダウンロードされ、署名されていないスクリプトを実行し Unblock-File ます。
> - インターネット以外のソースからの署名されていないスクリプトや、悪意のあると考えられる署名済みスクリプトを実行するリスク。


> ## Restricted
> - Windows クライアントコンピューターの既定の実行ポリシー。
> - 個々のコマンドを許可しますが、スクリプトは許可しません。
> - 書式設定ファイル、構成ファイル () .ps1xml 、モジュールスクリプトファイル ()、PowerShell プロファイル () など、すべてのスクリプトファイルの実行を禁止 .psm1 .ps1 します。 

PowerShellでglobalでインストールしたyarnを実行する方法と、スクリプトの実行が無効になっているってエラーの解決方法


Windows 11で右クリックのメニューの仕様が変わったが、使いづらいので戻したい。

現在はレジストリを変更してWindows10の仕様に戻すことができる。
また、設定を変更後Windows 11の右クリックのメニューに戻すこともできる。

## Windows 11の右クリックのメニュー

エクスプローラーでファイルを右クリックして開くメニューが変わっている。
変わるのはいいけど、「VSCodeで開く」のように拡張したコマンドの利用に手間が増えてしまった。

例）フォルダをVSCodeで開くためには・・・

一旦メニューを開いてから「その他のオプション」を選択するとWindows10のメニューが出るのでそこから選ぶ。

![picture 11](/images/posts/333-setup-windows11-develop-environment/1636895823543.png)  

## Windows 10の右クリックのメニューに変更する

右クリックのメニューをWindows10の仕様に戻すにはレジストリをいじる必要がある。
GUIで設定するのは大変なのでコマンドを勧めます。

1. コマンドプロンプトを管理者権限で開く
2. 次のコマンドをコピペして実行する

```bash
reg.exe add “HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32” /f 
```

3. PCを再起動する

以上でWindows 10と同じ右クリックのメニューになりました。

設定で変更できるようになると嬉しい。

## 変更した右クリックのメニューをWindows 11のものに戻す

変更した右クリックのメニューをWindows 11のものに戻すコマンド。

1. コマンドプロンプトを管理者権限で開く
2. 次のコマンドをコピペして実行する

```bash
reg.exe delete “HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}” /f
```

3. PCを再起動する

Windows 10の右クリックのメニューに変更した際に追加したレジストリを削除するコマンドです。

## 参考

- [How to restore full context menus in Windows 11](https://www.pcgamer.com/windows-11-context-menu-fix-right-click/)
  - 英語でレジストリをUIで設定変更するときに参考になる
- [Windows11の右クリックメニューを以前の仕様に戻す設定方法](https://samurai-computer.com/how-to-get-the-old-right-click-context-menu-on-windows11/)
  - 日本語でレジストリをUIで設定変更するときに参考になる
- [Windows 11 Classic Context Menu v1.1](https://www.sordum.org/14479/windows-11-classic-context-menu-v1-1/)
  - レジストリの変更コマンドはこちらから


Windows11で右クリックのメニューをWindows10の仕様に戻す方法

とうとうWindows 11を手に入れたのでWEBシステムの開発環境をセットアップしていく。
開発に必要なアプリのリンクを貼ってます。

個人的に必要な項目を列挙していくので偏ってます。

随時更新する。

## Contents

## Windows 11全般の設定

### 不要なスタートアップアプリをオフにする

![picture 8](/images/posts/333-setup-windows11-develop-environment/1636879946413.png)

要らないものをオフにしておく。

### スクリーンショットをSnipping Toolに変更する

prtscrボタンで画面領域を切り取ることができるようにしていきます。

Snipping Toolを起動して設定を変更する。
![picture 4](/images/posts/333-setup-windows11-develop-environment/1636879489270.png)

![picture 5](/images/posts/333-setup-windows11-develop-environment/1636879563663.png)

![picture 6](/images/posts/333-setup-windows11-develop-environment/1636879583120.png)

プリントスクリーンのショートカットを設定で変更する。

![picture 7](/images/posts/333-setup-windows11-develop-environment/1636879708129.png)

**プリントスクリーンボタンを使用して画面切り取りを開く**をチェックする。

prtscrボタンで画面領域を切り取ることができるようになる。

### ファイルの拡張子を表示する

エクスプローラーのファイル拡張子を表示するようにする。
![picture 4](/images/posts/333-setup-windows11-develop-environment/1636727024853.png)

### 隠しファイルを表示する

エクスプローラーの隠しファイルを表示するようにする。
![picture 5](/images/posts/333-setup-windows11-develop-environment/1636727086953.png)

### エクスプローラーの右クリックをもとのメニューに戻す

エクスプローラーでファイルを右クリックして開くメニューが変わっている。
変わるのはいいけど、「VSCodeで開く」のように拡張したコマンドの利用に手間が増えてしまった。

例）フォルダをVSCodeで開くためには・・・

一旦メニューを開いてから「その他のオプション」を選択するとWindows10のメニューが出るのでそこから選ぶ。

![picture 11](/images/posts/333-setup-windows11-develop-environment/1636895823543.png)

これをWindows10の仕様に戻すにはレジストリをいじる必要がある。

1. コマンドプロンプトを管理者権限で開く
2. 次のコマンドをコピペして実行する

```
reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve
```

[Windows11で右クリックのメニューをWindows10の仕様に戻す方法](https://www.suzu6.net/posts/336-windows11-right-click-menue)

## アプリのインストール

## Git

<https://git-scm.com/>

設定はすべてデフォルトにしてあるが問題ない。

## GitHub Desktop

<https://desktop.github.com/>

### Visual Studio Code

<https://azure.microsoft.com/ja-jp/products/visual-studio-code/>

気に入っている拡張機能
-

この他の好きな拡張機能はまた別の機会に紹介する。

### Python

<https://www.python.org/downloads/>

Add Python 3.10 to PATHにチェックしてInstall Now

Disable path lenght limit

![picture 1](/images/posts/333-setup-windows11-develop-environment/1636729543058.png)

### Node.js

<https://nodejs.org/en/download/>

デフォルトでインストールする。

### yarn

<https://yarnpkg.com/getting-started/install>

posershellでnpmのglobalにインストールする。

```bash
> npm install -g yarn
```

```bash
PS C:\Users\81905> yarn -v
yarn : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\81905\AppData\Roaming\npm\yarn.ps1 を
読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170)
を参照してください。
発生場所 行:1 文字:1
+ yarn -v
+ ~~~~
 + CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
 + FullyQualifiedErrorId : UnauthorizedAccess
```

![picture 3](/images/posts/333-setup-windows11-develop-environment/1636728518606.png)

参考: <https://labor.ewigleere.net/2020/06/04/yarn-powershell/>

```bash
PS C:\Users\81905> Get-ExecutionPolicy
Restricted

# 管理者で実行する
PS C:\Users\81905> Set-ExecutionPolicy RemoteSigned
PS C:\Users\81905> Get-ExecutionPolicy
RemoteSigned

PS C:\Users\81905> yarn -v
1.22.17
# OK!!
```

#### node-gyp

もしnpmかyarnで次のようなエラーが出たら参考にしてほしい。

[yarn installしたらnode-gnp ERRとError Could not find any Visual Studio installation to use at VisualStudioFinder.failが出た【Windows11】](https://suzu6.net/posts/334-yarn-error-node-gyp)

## Dockerをインストールする

WindowsでのDocker環境の構築方法は次の記事にまとめました。

[WSL2とDocker Desktop on WindowsでDocker環境を構築する](https://www.suzu6.net/posts/337-windows11-docker-desktop-wsl2)

## その他

### エクスプローラーでSVGのサムネイルを表示する

前にWindows10向けに[エクスプローラーでSVGのサムネイルを表示する方法【Windows10】 - suzu6.net](https://www.suzu6.net/posts/248-svg-explorer-extension/)を書いた。
これがWindows 11でも問題なく動作します。

![picture 1](/images/posts/333-setup-windows11-develop-environment/1636727902915.png)

<https://github.com/tibold/svg-explorer-extension/releases>

svg_see_x64.exeをダウンロードしてインストールする。

![picture 2](/images/posts/333-setup-windows11-develop-environment/1636727993971.png)

Windows11でも問題なくSVGのサムネイルを表示できた。

Windows11でWEBシステムの開発環境に必要なセットアップを列挙していく


Github Desktopでコミットしようとすると次のようなエラーが出てコミットできなくなった。

![picture 2](/images/posts/323-github-desctop-commit-error/1632746597435.png)  


## 環境
- Windows 10 Home
- Github Desctop version 2.9.3

Github Desctopは現時点で最新のversion 2.9.3を利用しています。

コマンドやVSCodeでのコミットは通ります。
Github Desctopではコミット以外のプッシュやフェッチなどの機能は正常に動作しました。

## エラー内容
```bash
/c/Users/suzumura/AppData/Roaming/npm/yarn: line 5: cygpath: command not found
internal/modules/cjs/loader.js:892
  throw err;
  ^

Error: Cannot find module 'C:\Users\suzu6\AppData\Local\GitHubDesktop\app-2.9.3\resources\app\git\node_modules\yarn\bin\yarn.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
```

## エラーの原因

同じエラーがGitHub Desktopのissueに上がっていた。

https://github.com/desktop/desktop/issues/10326

まず、モジュールが無いと言われている`C:\Users\suzu6\AppData\Local\GitHubDesktop\app-2.9.3\resources\app\git\node_modules\yarn\bin\yarn.js`は無かった。
むしろ`C:\Users\suzu6\AppData\Local\GitHubDesktop\app-2.9.3\resources\app\git\`に** `node_modules`フォルダが存在しない**。

これがエラーの原因だと思われる。
何らかの要因で`node_modules`が消えたか、パス変数が変わってしまったのかもしれない。

最近yarnを入れ直したりしたためだろうか？

## 解消方法

[issueでは手動でnode_modulesをコピーすると直った](https://github.com/desktop/desktop/issues/10326#issuecomment-748219938)とあるので試す。

`C:\Users\suzu6\AppData\Roaming\npm\node_modules`にyarnがあるので、`C:\Users\suzu6\AppData\Local\GitHubDesktop\app-2.9.3\resources\app\git\`へコピーする。

![picture 1](/images/posts/323-github-desctop-commit-error/1632746581359.png)  

コピーしたら、コミットが通るようになりました！！！

Github DesktopでcommitするときにError Cannot find moduleとエラーがでる


昨夜まで問題なかったVPNが繋がらなくなった。

## 現象

VPNクライアントのログを見るとTAP-Windows adaptersとやらがなくアダプターを作成してほしいらしい。

```
2021/09/14 10:23:25 >FATAL:There are no TAP-Windows adapters on this system.  You should be able to create a TAP-Windows adapter by going to Start -> All Programs -> TAP-Windows -> Utilities -> Add a new TAP-Windows virtual ethernet adapter.
```
> FATAL:このシステムには、TAP-Windowsアダプターがありません。 スタート」→「すべてのプログラム」→「TAP-Windows」→「ユーティリティー」→「新しいTAP-Windows仮想イーサーネットアダプターを追加」でTAP-Windowsアダプターを作成できるはずです。


▼ インストール済のアプリにはTAP-Windowsがある。

![picture 1](/images/posts/322-vpn-no-tap-window/1631582899561.png)  

VPNクライアントは[vpnux Client](https://www.vpnux.jp/)を利用してます。
これをインストールした際にTAP-Windowsがインストールされていたはずです。

## 仮想イーサネットアダプターを作り直す

[【VPN】突然VPNがつながらなくなった（簡単なメモ程度）](https://shiroajisashi.hatenablog.com/entry/2017/12/26/202316)を参考にTAP-Windowsのバッチで仮想イーサネットアダプターを再度作成します。

1. まずは、アプリの実行ファイルのフォルダを開く。

![picture 2](/images/posts/322-vpn-no-tap-window/1631583407234.png)  


2. 「Delete ALL TAP virtual ethernet adapters」を管理者権限で実行して、現在の仮想イーサネットアダプターを削除します。

![picture 5](/images/posts/322-vpn-no-tap-window/1631598942769.png)  

▼ 実行したところ。
```bash
C:\WINDOWS\system32>echo WARNING: this script will delete ALL TAP virtual adapters (use the device manager to delete adapters one at a time)
WARNING: this script will delete ALL TAP virtual adapters (use the device manager to delete adapters one at a time)

C:\WINDOWS\system32>pause
続行するには何かキーを押してください . . .

C:\WINDOWS\system32>"C:\Program Files\TAP-Windows\bin\tapinstall.exe" remove tap0901
ROOT\NET\0000                                               : Removed
1 device(s) were removed.

C:\WINDOWS\system32>pause
続行するには何かキーを押してください . . .
```

3. 続いて、「Add a new TAP virtual ethernet adapter」を管理者権限で実行して、新しい仮想イーサネットアダプターを作成します。

![picture 6](/images/posts/322-vpn-no-tap-window/1631599047807.png)  

▼ 実行したところ。
```bash
C:\WINDOWS\system32>rem Add a new TAP virtual ethernet adapter

C:\WINDOWS\system32>"C:\Program Files\TAP-Windows\bin\tapinstall.exe" install "C:\Program Files\TAP-Windows\driver\OemVista.inf" tap0901
Device node created. Install is complete when drivers are installed...
Updating drivers for tap0901 from C:\Program Files\TAP-Windows\driver\OemVista.inf.
Drivers installed successfully.

C:\WINDOWS\system32>pause
続行するには何かキーを押してください . . .
```

以上で仮想イーサネットアダプターが作り直された。

VPNクライアントを起動してみると接続できた！！！！やったぜ！！

### 思い当たる原因

Adbe Reader DC を入れたら勝手にMacAfeeがインストールされた。
それが原因な気もする。

VPNが繋がらなくなったけどTAP-Windowsの入れ直しで直った件

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でインストーラにスタートアップのチェックボタンを付ける

分かりやすく操作を伝えるため、画面操作のGIFで記録できるソフトを探していました。
Windows10に対応しているツールの中で使いやすかった**ScreenToGif**を紹介します。

## ScreenToGif

![home](/images/posts/106/home.png)

[ScreenToGif](https://www.screentogif.com/)

ScreenToGifはGIFアニメ動画を作成する無料ツールです。
GIFの録画とエディタを兼ね備えています。

特に気に入っている点は、**UIがとてもシンプル**なところです。

![stg](/images/posts/106/stg.png)

無駄な機能がなく、ボタンと機能の対応がわかりやすくまとまっています。
Windows10でも問題なく使えました。

## GIFアニメを録画する

赤い丸の「レコーダー」ボタンを押すとキャプチャする枠が出てきます。

![capture](/images/posts/106/capture.png)

これもかなりシンプルなUIになっています。
枠はマウスで大きく小さく操作でき、「記録」と「停止」ボタンもあり直感的に操作できるはずです。

## GIFアニメを編集する

録画をするとGIFアニメーションの編集に移ります。

![edit](/images/posts/106/edit.png)

ここまで出来るのかと驚きました！

- コマの削除・複製・入れ替え
- フレーム数の調整
- 重複したコマの削除
- スケールの変更
- 文字や図形の挿入
- 反転・反復

などなど。

メニューのキャプチャも載せておきます。

![stg-home](/images/posts/106/stg-home.png)

![stg-play](/images/posts/106/stg-play.png)
![stg-edit](/images/posts/106/stg-edit.png)
![stg-image](/images/posts/106/stg-image.png)
![stg-tran](/images/posts/106/stg-tran.png)
![stg-static](/images/posts/106/stg-static.png)

## GIFアニメーションを保存する

GIFやAPNG形式に変換できます。

MP4やWEBM形式に変換する場合は、FFmpegというエンコーダを別途インストールしてください。
[こちら](https://github.com/NickeManarin/ScreenToGif/wiki/Help-%E2%96%AA-Options-%E2%9A%99%EF%B8%8F)に導入方法があります。

![save](/images/posts/106/save.png)

上の設定で録画したものが下のGIFです。
p5jsで作った[シェルソート](https://www.suzu6.net/posts/105-shell-sort)のアニメーションです。

![shell-sort](/images/posts/106/shell-sort.gif)

60秒のGIFで280KBほどになりました。

## おわりに

比較したGIFツールの[ShareX](https://getsharex.com/)と比べて、機能がシンプルで使いやすかったです。
ただ、[ScreenToGif](https://www.screentogif.com/)は数分程度の録画向けです。

長時間の録画や編集には、GOM Playerで定番のGOMから出ている
<a href="https://px.a8.net/svt/ejp?a8mat=35AWZM+1B19KI+1UTA+1HL85U" target="_blank" rel="nofollow">GOM Cam(ゴムカム)</a>
<img border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=35AWZM+1B19KI+1UTA+1HL85U" alt="">
が使いやすそうです。

Linuxでは[peek](https://github.com/phw/peek)というツールを愛用しています。
単一機能のシンプルなツールが個人的に好みなんだと思います。

画面操作を記録できるGIFツール ScreenToGif｜Windows

ScreenToGif

GIFアニメを録画する

GIFアニメを編集する

GIFアニメーションを保存する

おわりに