初心者がElectron(NW.js)を始めてみて分かったことまとめ

#目次
1. [はじめに](#a1)
2. [個人的にHTA(WSH?)とNW.jsはオススメしません](#a2) 
3. [electron開発の流れ](#a3)
    1. [プロジェクトフォルダ（名前は何でもOK：ここではmoge）の準備](#a31)
    2. [中身を編集する](#a32)
    3. [moge/package.jsonを編集する](#a33)
    4. [electronとelectron-builderのインストール](#a34)
    5. [ビルド](#a35)
4. [electron-builderでビルドしようとすると`このシステムではスクリプトの実行が無効になっているため、～～～`というエラーが出るとき](#a4)
5. [1つのプロジェクトを再ビルドしたいとき](#a5)
6. [おわりに](#a6)

<!--##################################################-->

<a id="a1"></a>
#はじめに

突然ですが、絵を描く用の画像資料が10GBを超えてしまいました。
何かいい画像ビューアないかなと探していたのですがイマイチだったので、自分で作ってみようと思いました。
HTML/CSSは少しやったことがあったので、ちょうどいいやということでelectronを始めてみました。🤯

あとこの記事では**windows10のみを対象**にしています。
macとかlinuxは使ったことがないので分かりません。すみません。
もちろんプログラム初心者です。**間違いがあったら教えてください。**

さて、googleでelectronについて検索してもヒットするのは古い情報が多いですよね。
~~（そのせいで合計2日分くらい無駄にしてしまいました）~~
私みたいな人を増やさないために、今の時点で分かったことを初心者目線でまとめておきます。
（あと頭の中身を整理して今抱えているエラーを解決するため）

<!--##################################################-->

<a id="a2"></a>
# 個人的にHTA(WSH?)とNW.jsはオススメしません

画像ビューアを作ろうとしたとき、まずは[こちらの記事（簡単なウインドウアプリ(GUI)開発のまとめ(Windows偏)）](https://qiita.com/yosgspec/items/810843f863075d33a093)を参考にさせていただきました。

まずは一番上にあった**HTA(WSH?)**を試してみたのですが、

- 古い技術だからサポート切ってるブラウザが多いらしい？（要検証）
    - 私が試したときはIEでだけ動きました。
    - しかも毎回ポップアップで出てくるやつを許可しなきゃダメでちょっとメンドイ
- ネット文献はそこそこヒットするけど、どれも文が硬く初心者向けではない

次に**NW.js**を使ってみたのですが、

- electronに比べユーザーが少ない
    - つまり文献も少ない（こういうエラーが出ました、など）
- electronに比べてお手軽とあるが、やってみるとほとんど同じくらいの労力がかかる
- なぜかビルドできない（これは個人の能力不足）

で、**electron**に至りました。electronは、

- そこそこ文献がある
    - あるけどどれもレベルが高くて初心者が理解するには苦労する必要がある（でもないよりマシ！）
    - あと書籍としての文献もそこそこあるらしい（少し古いけど）
- バージョンによって有効な書き方が違うことがあって少し大変

みたいな感じです。
個人的に積極的に使いたい子ではないです。
他のはウーンって感じだしC#はハードル高そうだしってなって消極的に採用しました。

他に何かよさげなのあったら教えてください！

<!--##################################################-->

<a id="a3"></a>
# electron開発の流れ

まずはNode.jsをインストールしてください。

1. [ダウンロード](https://nodejs.org/ja/download/)する（私はWindows Installer (.msi)の64-bitをダウンロードしました）
2. インストーラの指示に従ってインストールする
3. 完了！

次におおまかにelectron開発の流れをなぞるとこんな感じです。

1. プロジェクトフォルダ（名前は何でもOK：ここでは`moge`）を作る
2. `moge`の中に必要なフォルダとファイルを作る（`main.js`, `index.html`, `src/package.json`など）
3. `moge/package.json`を編集する
4. electronとelectron-builderをインストールする
5. ビルドする

次で詳しく触れていきます。

<!--##################################################-->

<a id="a31"></a>
# プロジェクトフォルダの準備（名前は何でもOK：ここでは`moge`）

適当なとこに`moge`ファイルを作ります。
`moge`の中に`src`という名前のフォルダと`package.json`を作ります。
この段階では中身は空でOKです。
`src`の中に、`main.js`, `index.html`, `package.json`を作ります。
これも中身は空でOKです。

```:プロジェクトフォルダ
moge
 ├ src
 │ ├ main.js
 │ ├ index.html
 │ └ package.json
 └ package.json
```

`package.json`が2つありますが、**`src`直下の方を`src/package.json`、`moge`直下の方を`moge/package.json`と呼ぶことにします。**
（これ何で名前同じの2つ作らせる仕様なんですかね？ややこしい！）

色んなの資料読んでるとどっちの`package.json`を指してるのか分かりにくくて初心者的には大変です。
体感ですが、`moge/package.json`の方を指してることが多いと思います。ていうか多分そう。

<!--##################################################-->

<a id="a32"></a>
# 中身を編集する

まずは**`main.js`**からです。
`main.js`は、どのプロジェクトでもほとんど同じようなものになるらしいです。
必要に応じて書き足したりするらしいですが、私にはよく分かりません。

公式ドキュメントの読み方が分からない...！🤷‍♀️

```javascript:main.js
const { // アプリ作成用のモジュールを読み込む
  app,
  BrowserWindow,
  Menu
} = require('electron');

let mainWindow;  // メインウィンドウ

function createWindow() {
  mainWindow = new BrowserWindow({  // メインウィンドウを作成する
    width: 960, // 横幅
    height: 540,  // 縦幅
    alwaysOnTop: true,  // 常に最前面
    webPreferences: {
      nodeIntegration: true // 必要なものらしい
    }
  });

  process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1'; // 警告(Electron Security Warning)が出なくなる
  mainWindow.loadFile('./src/index.html'); // メインウィンドウに表示するやつを指定する
  Menu.setApplicationMenu(null); // メニューバー削除
  mainWindow.webContents.openDevTools(); // デベロッパーツールの起動

  mainWindow.on('closed', function() {
    mainWindow = null; // ×が押されたらメインウィンドウを閉じる
  });
}
app.on('ready', createWindow);  // 初期化が完了したらcreateWindow()を呼び出す
app.on('window-all-closed', function() {  // 全てのウィンドウが閉じたら
  if (process.platform !== 'darwin')
    app.quit();  // macでない限りアプリを終了させる
});
app.on('activate', function() { // アプリがアクティブになったら
  if (mainWindow === null)
    createWindow(); // メインウィンドウが消えてたらもう一回メインウィンドウを作る
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
```
次は**`index.html`**です。
今回はCSSで装飾してJSのログとHTMLのpを使ってみました。

```html:html
<!DOCTYPE html>

<html>

<head>
  <title>moge</title>
  <style>
    body {
      background-color: #e5ddb0;
      padding: 20px;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
  </style>
  <script>
    // メイン
    function main() {
      console.log("JSのテスト");
    }
  </script>
</head>

<body onLoad="main()">
  <p>HTMLのテスト</p>
</body>

</html>
```
最後に**`src/package.json`**です。
エッこれだけ！？って感じですよね。
`src/package.json`も、どのプロジェクトでもほとんど同じようなものになるらしいです。

```json:src/package.json
{
  "main": "main.js"
}
```

<!--##################################################-->

<a id="a33"></a>
# `moge/package.json`を編集する

基本的にはこんな感じらしいです。

```json:moge/package.json
{
  "name": "moge",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "build": {
    "productName": "moge",
    "appId": "moge",
    "win": {
      "target": "portable"
    }
  }
}
```
`"target": "portable"`は、ビルドするときはポータブルアプリになるようにしてねって意味らしいです。
ポータブルアプリは、インストールしなくても使える.exeのことらしいです。

これでファイルの準備はおしまいです！

<!--##################################################-->

<a id="a34"></a>
# electronとelectron-builderをインストールする

エクスプローラで`moge`フォルダの余白を`shift + 右クリック`して、`PowerShell ウィンドウをここで開く(S)`を選択してください。
（どうでもいいですけど`PowerShell ウィンドウ「で」ここ「を」開く(S)`じゃないですかね？）

そしたら紺色のウィンドウが出てくるはずです。
これはPowerShellというもので、コマンドを打ち込むとwindowsに命令を下せます。
electronの母体であるNode.jsは、モジュール？をインストールするのにこのPowerShellを使う必要があります。
よく見る.exeのインストーラーは使わないらしいです。

**そしたら、まずは`node -v`を実行してください。**
下みたくなったらNode.jsのインストールに成功していることが確認できます。

```powershell:node　-v
PS D:\electron\moge> node -v
v12.16.0
```
**確認できたら、`npm i -D electron`と`npm i -D electron-builder`を実行してください。**
どちらも少し時間がかかります。
これは、electronとelectron-builderを`moge`フォルダにインストールするという工程です。
`-D`を`-g`にすることで、グローバルなインストールができるらしいですが、electronはローカルにインストールするのがいいらしいです？
下みたくなったらOKです。

```powershell:npm　i　-D　electron
PS D:\electron\moge> npm i -D electron

+ electron@8.0.2
added 85 packages from 93 contributors and audited 102 packages in 10.474s
```

```powershell:npm　i　-D　electron-builder
PS D:\electron\moge> npm i -D electron-builder

+ electron-builder@22.3.2
added 138 packages from 107 contributors and audited 770 packages in 15.356s
```
このとき、プロジェクトフォルダは次みたくなってるはずです。
追加された`node_modules`と`package-lock.json`は何もしなくてOKです。

```:プロジェクトフォルダ
moge
 ├ node_modules
 ├ src
 │ ├ main.js
 │ ├ index.html
 │ └ package.json
 ├ package.json
 └ package-lock.json
```

**確認できたら、`npm start`を実行してください。**

```powershell:npm　start
PS D:\electron\moge> npm start

> moge@1.0.0 start D:\electron\moge
> electron .
```

少し待つとこんな感じのウィンドウが出てくるはずです！
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593118/44c365b1-95df-d838-a4e5-214530a63630.png)

テンション上がりますね！うおおお😭
このままだとNode.jsやelectronがインストールされている環境でPowerShellから呼び出さないと起動できませんが、ビルドするとダブルクリックひとつ（？）で起動できるようになります！
次でビルドしていきます。

<!--##################################################-->

<a id="a35"></a>
# ビルドする

[ここ](https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750)によると、PowerShellはセキュリティの都合でよく分からないコマンドを実行できないような設定になってるらしいです。
electron-builderはその「よく分からないコマンド」に属しているらしく、初期設定のままだと実行できません。
なので、**さっきの記事に従って設定を変更しましょう。**
ちなみに私は`Set-ExecutionPolicy RemoteSigned`を実行しました。

**そしたら、`electron-builder build --win`を実行しましょう。**
この処理は1~2分くらいかかります。
下みたくなったら成功です。

```powershell:electron-builder　build　--win
PS D:\electron\moge> electron-builder build --win
  ・electron-builder  version=22.3.2 os=10.0.17763
  ・loaded configuration  file=package.json ("build" field)
  ・description is missed in the package.json  appPackageFile=D:\electron\moge\package.json
  ・writing effective config  file=dist\builder-effective-config.yaml
  ・packaging       platform=win32 arch=x64 electron=8.0.2 appOutDir=dist\win-unpacked
  ・default Electron icon is used  reason=application icon is not set
  ・building        target=portable file=dist\moge 1.0.0.exe archs=x64
```
`このシステムではスクリプトの実行が無効になっているため、~~~`みたいなエラーが出た方は、上の記事に従って再度PowerShellの設定を変更してみてください。

ビルドに成功したら、`moge`フォルダに`dist`というフォルダが追加されているはずです。

```:プロジェクトフォルダ
moge
 ├ dist
 ├ node_modules
 ├ src
 │ ├ main.js
 │ ├ index.html
 │ └ package.json
 ├ package.json
 └ package-lock.json
```

**そしたら`dist`の中の`moge 1.0.0.exe`を起動してみましょう！**
さっきの`npm start`と同じウィンドウが出てきましたね！
![ddba20001abfb7f026aa13144984f2de.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593118/c07e1fa2-70db-2d27-9e87-fcd2b12177e7.jpeg)

成功です👺

以上がelectron開発の流れになります。
（長かった…）

<!--##################################################-->

<a id="a5"></a>
# 1つのプロジェクトを再ビルドしたいとき

単純にもう一回`electron-builder build --win`を実行するとエラーが出ることがあります。
そのときは、

- `dist`フォルダを削除する
- `C:/Users/(Username)/AppData/Roaming/moge`を削除する

で再ビルドできます。
もしフォルダを削除しようとして使用中なので削除できませんというエラーが出たときは、

- `moge 1.0.0.exe`を閉じる
- タスクマネージャーでelectronアイコンのやつを全て閉じる

をするとフォルダを削除できるようになります。
（electron-rebuilderとかいうやつがあるとかないとか聞きますが、使い方が分かりません🤷‍♀️）

<!--##################################################-->

<a id="a6"></a>
# おわりに

私が分かっていることは以上です。

こうして頭の中を整理してみましたが、今抱えている
**「ビルドしたあとに外部ファイルを読み込ませるにはどうしたらいいか」**
を解決する糸口は全くつかめませんでした💥

どなたか助けていただけると幸いです…
「公式ページのここに書いてありそう」とかでも構わないので教えてください…

で、初心者の方にも分かりやすい構成を目指して書いてみたのですが、どうだったでしょうか（冗長すぎたかも）。
こんな記事でしたが、最後まで読んでいただいてありがとうございました！🍣

<!--##################################################-->