Electronを動かしてみる

13122 ワード
MacOSX electron-builder Electron MacOSX テキストリンク

（ 参考にしたQiita記事 ）

（ 資源配置構成 ）

1. main.js ファイル

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 ファイル

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 ）

Terminal で electron を実行

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

（ 開かれた画面 ）

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

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記事

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

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

electron の現在の最新バージョンは、ｖ９．３．４

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

・ （参考） @takepanさんのQiita記事

成功！

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ファイルができている。

$ 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ファイル）を起動すると、立ち上がった画面に以下が表示される。 

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ページなどを参考に、さらにデバッグをしていきたい。