Electronを動かしてみる


####__（ 参考にした*Qiita*記事 ）__

* [@umamichiさんの*Qiita*記事「ようこそ！Electron入門」](https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc)

##__（ 資源配置構成 ）__

![スクリーンショット 2020-11-13 21.01.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/5ccf0fde-7a83-670f-ac1f-56b7ca6ee317.png)


---

## 1. *main.js* ファイル

```javascript:main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成（windowの大きさや、Kioskモードにするかどうかなどもここで定義できる）
  mainWindow = new BrowserWindow({width: 1000, height: 700});
  // Electronに表示するhtmlを絶対パスで指定（相対パスだと動かない）
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
```

## 2. *index.html* ファイル

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Afo guard Lover</title>
  </head>
  <body>
    <h1>We love Afo guard !!</h1>
	<h2>One afo guard picture</h2>
	<p>以下は、フリー画像素材サイトよりダウンロードしたイラスト画像です。</p>
	<p>（URL: https://illust.download/archives/21043）</p>
	<img src="./afoguard.png" alt="アフォガードのイラスト画像" title="アフォアードのイラスト" width="300" height="200">
  </body>
</html>
```

####__*index.html* と同じディレクトリに格納した画像ファイル__

####__（ *afoguard.png* ）__
![afoguard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/7618ef61-2095-4a59-df80-136c840194bc.png)

####__Terminal で *electron* を実行__

```bash:Terminal
$ pwd
/Users/Afoguard/Desktop/chrome_diver/electron_sample
$
$ ls main.js
main.js
$
$ electron main.js
$
```

####__（ 開かれた画面 ）__
![スクリーンショット 2020-11-13 21.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/ad2cff52-c921-2e19-98fe-ed8417f4785b.png)

##__上記を、Mac OSで実行可能な*dmg*ファイルに焼く__


```bash:Terminal
$ electron-builder --mac --x64
  • electron-builder  version=22.9.1 os=15.6.0
  • description is missed in the package.json  appPackageFile=/Users/Afoguard/Desktop/chrome_diver/electron_sample/package.json
  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed.
See https://github.com/electron-userland/electron-builder/issues/3984#issuecomment-504968246
$
```

####__*Cannot compute electron version from installed node modules*エラーが発生__

---

###__以下の解決索を試してみる__

・ （参考） [@takepanさんのQiita記事](https://qiita.com/takepan/items/1012b0b67ef6a81e1612)

####*main.js* のファイル名を *index.js* に変更

```bash:Terminal
$ mv main.js index.js
$ ls -lt *.js
-rw-r--r--@ 1 Afoguard  staff  649 11 13 13:23 index.js
$
```

####*electron* の現在の最新バージョンは、_ｖ９．３．４_
* https://github.com/electron/electron/releases/tag/v9.3.4

![スクリーンショット 2020-11-13 14.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/0e501882-203f-036d-a732-2e6025dbc464.png)

__以下のサイトを参考に、*electron-packager*コマンドの*electron-version*引数のバージョン番号を、*9.3.4* に変更する。__

・ （参考） [@takepanさんのQiita記事](https://qiita.com/takepan/items/1012b0b67ef6a81e1612)

###成功！

```bash:Terminal
$ electron-packager . electropn_desktopapp_sample --platform=darwin --arch=x64 --electron-version=9.3.4
Packaging app for platform darwin x64 using electron v9.3.4
Wrote new app to /Users/Afoguard/Desktop/chrome_diver/electron_sample/electropn_desktopapp_sample-darwin-x64
$
```

###*electropn_desktopapp_sample-darwin-x64* ディレクトリが、生成され、その中に*electron_desktopapp_sample* という名前の*dmg*ファイルができている。

![スクリーンショット 2020-11-13 21.36.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/b0110bd6-df9a-3d8f-48b5-bbca2e6f1d35.png)



```
$ ls -lt
total 888
drwxr-xr-x    7 Afoguard  staff     238 11 13 14:50 electropn_desktopapp_sample-darwin-x64
drwxr-xr-x  162 Afoguard  staff    5508 11 13 14:05 node_modules
-rw-r--r--    1 Afoguard  staff  133047 11 13 14:05 package-lock.json
-rw-r--r--    1 Afoguard  staff     290 11 13 14:05 package.json
-rw-r--r--@   1 Afoguard  staff     649 11 13 13:23 index.js
-rw-r--r--@   1 Afoguard  staff     513 11 13 13:22 index.html
-rw-r--r--@   1 Afoguard  staff  295321 11 13 13:09 afoguard.png
$
$ tree electropn_desktopapp_sample-darwin-x64/ | head
electropn_desktopapp_sample-darwin-x64/
├── LICENSE
├── LICENSES.chromium.html
├── electropn_desktopapp_sample.app
│   └── Contents
│       ├── Frameworks
│       │   ├── Electron\ Framework.framework
│       │   │   ├── Electron\ Framework -> Versions/Current/Electron\ Framework
│       │   │   ├── Helpers -> Versions/Current/Helpers
│       │   │   ├── Libraries -> Versions/Current/Libraries
$
```

###__上記のデスクトップアプリケーション（*dmg*ファイル）を起動すると、立ち上がった画面に以下が表示される。__

```bash
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module '/Users/Afoguard/Desktop/chrome_diver/electron_sample/electropn_desktopapp_sample-darwin-x64/electropn_desktopapp_sample.app/Contents/Resources/app/main.js'
    at Module._resolveFilename (internal/modules/cjs/loader.js:797:17)
    at Function.o._resolveFilename (electron/js2c/browser_init.js:281:681)
    at Object.<anonymous> (electron/js2c/browser_init.js:205:3333)
    at Object../lib/browser/init.ts (electron/js2c/browser_init.js:205:3577)
    at __webpack_require__ (electron/js2c/browser_init.js:1:128)
    at electron/js2c/browser_init.js:1:1200
    at electron/js2c/browser_init.js:1:1267
    at NativeModule.compile (internal/bootstrap/loaders.js:287:5)
    at NativeModule.compileForPublicLoader (internal/bootstrap/loaders.js:222:8)
    at loadNativeModule (internal/modules/cjs/helpers.js:23:9)
```

##__以下のWebページなどを参考に、さらにデバッグをしていきたい。__

* [Electronのアプリが落ちたり、画面がまっしろになっってしまった時の、問題の追い方](https://taku-o.hatenablog.jp/entry/20181017/1539778856)