Electron WindowsでインストールからHello World, ビルドまで 

必要ファイルの説明、保存場所、実行場所等も説明。

Node.Jsのインストール

コマンドプロンプトで以下のコマンドでバージョンが表示されなければ、Mode.Jsがインストールされていないので、Node.Jsのインストールが必要です。

node -v

nvm (NodeJs Version Manager) for Windows を先にインストール

  1. https://github.com/coreybutler/nvm-windows/releases からnvm-setup.zipをダウンロード。
  2. nvm-setup.zipをダウンロードフォルダ内で展開
  3. nvm-setupフォルダ内のnvm-setup.exeを右クリックして『管理者として実行』
  4. warningが表示された場合は、そのままRun、Installを選択してインストール。
    *1.1.8はWindowsのSiging Certificateが入っていないのでWarningが出るようです。1.1.9はCertificateが入っているようです。。
  5. インストールが完了したらコマンドプロンプトで以下を実行して動作確認してみてください。 nvmのバージョンが表示されるはずです。
  6. *LinuxやMacOSではnodebrewでインストールやバージョン管理をするので、nvmはありません。

Node.Jsのインストール

> nvm install 16.14.2  //LTSの最新バージョンをインストール。
// nvm install latest これは最新バージョンをインストールしますが、LTS版でないかもしれません。
// nvm list availableでLTS最新バージョンの確認ができます。 出来ない場合は、ここで確認https://nodejs.org/ja/download/

nvmでインストールできない場合は、『nvmに対応したNode.Jsマニュアルインストール方法』をご参照ください。

Electronのインストール

  1. 右の図の様にフォルダ・ファイル構成になります。
  2. electronのプロジェクトを入れるmy_electronフォルを入れるフォルダに移動。
> cd C:\Users\<user_name>\your directory
  1. my_electronフォルダ作成
  2. npm init -yでpackage.jsonがmy_electronに作成されます。
  3. my_electronに移動
  4. my_electronでElectronをローカルインストール(グローバルにはインストールすると後々トラブります。)
  5. srcフォルダ作成
> mkdir my_electron
> npm init -y
> cd my_electron
> npm install electron
> mkdir src

Electron確認

> cd ./node_modules/.bin
> electron
Electron 18.2.3 - Build cross platform desktop apps with JavaScript, HTML, and CSS
Usage: electron [options] [path]

A path to an Electron app may be specified. It must be one of the following:
  - index.js file.
  - Folder containing a package.json file.
  - Folder containing an index.js file.
  - .html/.htm file.
  - http://, https://, or file:// URL.

Options:
  -i, --interactive     Open a REPL to the main process.
  -r, --require         Module to preload (option can be repeated).
  -v, --version         Print the version.
  -a, --abi             Print the Node ABI version.

  • こんな画面が表示されるはずです。
  • 表示されたら、右上のxをクリックして停止。

初期ファイル作成

以下のファイルは2つ目のpackage.json以外全てmy directory/my_electron/srcフォルダ内に入れます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My electron</title>
</head>

<body>
    <div>
        <h1>Hello World!</h1>
    </div>
    <script src="renderer.js"></script>
</body>
</html>

main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

let mainWindow;

const createWindow = () => {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // プリロードスクリプトは、レンダラープロセスが読み込まれる前に実行され、
      // レンダラーのグローバル(window や document など)と Node.js 環境の両方にアクセスできます。
      preload: path.join(__dirname, "preload.js"),
      contextIsolation:true
    },
  });

  // メインウィンドウに表示するhtmlファイルを指定します
  mainWindow.loadFile("index.html");
  // メニュー表示
  // Menu.setApplicationMenu(true);

  // デベロッパーツールの起動
  mainWindow.webContents.openDevTools();

  // メインウィンドウが閉じられたときの処理
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
};

//  初期化が完了した時の処理
app.whenReady().then(() => {
  createWindow();

  // アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時)
  app.on("activate", () => {
    // メインウィンドウが無いメインウィンドウを作成する
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 全てのウィンドウが閉じたときの処理
app.on("window-all-closed", () => {
  // macOSの時以外はアプリケーションを終了
  if (process.platform !== "darwin") {
    app.quit();
  }
});

preload.js

console.log('this is from preload');

renderer.js

console.log('this is from renderer');
document.write("<P>It's a beautiful day, today!</p>");

package.json

package.jsonは2つあります。これは/my_electron/srcの下にあり、メインプロセスの担当するjsファイルを指定します。

{
  "main": "main.js"
}

package.json

2つめのpackage.jsonはnpm init -yで/my_electronの下に作られ、プロジェクト全体について記したファイルです。

{
  "name": "my_electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "electron --trace-warnings ./src"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^18.2.3"
  }
}

再度ファイルの場所確認用

Electron Hello World起動

コマンドプロンプト(かPowershell)で/my_electron2で実行

\my_electron2> npx electron ./src

下の様にHello Worldが立ち上がる筈です。

  • 青枠の様にDevToolが立ち上がっています。 メニューが表示されている時はCtrl + Shift + Iで表示非表示の切替が出来ます。
  • preload.jsにより『this is from preload』がconsoleに出力されています。
  • renderer.jsにより『this is from renderer』がconsoloe出力されています。
  • renderer.jsにより『It’s a beautiful day, today!』がhtml上に出力されています。

ファイルの説明

ファイル説明
Index.htmlElectronで作られるアプリの画面。
main.jsで読み込まれる。
メインウィンドウ用、子ウィンドウ用など複数存在しても良い。
main.js
/my_electron/src
  • メインプロセスの記述。
  • main.js以外のファイル名でもOK。
  • ウィンドウの設定や作成。
  • ウィンドウが開いたり閉じたりした時の処理を記述する。
  • Node.Jsにアクセスできる。
  • console.log出力するとエディタのconsoleに出力される。

prelaod.js
  • レンダラープロセスの前に読み込まれて、Node.Jsにアクセスできない、レンダラープロセスがメインにアクセスできるようにcontextBrigetとしてApiを準備する。
  • レンダラープロセスのwindow、documentオブジェクトとメインプロセスのNode.Jsの両方にアクセスできる。
  • main.jsで各ウィンドウに読み込む。
  • ウィンドウが複数ある場合は、それぞれプレローダーを読み込ます必要がある。
  • ファイル名はpreload.jsでなくても良い。
  • Apiの作成にはcontextBridgeとipcRendererが使われる
  • remoteはセキュリティ上廃止となった。
renderer.js
  • windowやdocumento(html画面)とやり取り(アクセス)するレンダラープロセス。
  • クリック等のイベントを受取ったり、画面表示を変更したりする。
  • アプリの画面操作用。
  • セキュリティリスクでメインプロセスのNode.Jsには直接アクセスできない。
  • ファイル保存などメインプロセスのNode.Jsにアクセスするには、プレローダ(preload,js)で定義されたipcRendererのコマンドを使用する。 (ipc: Inter Process Communication 内部プロセス間通信
  • 対象となるhtmlファイルのの直前に読み込まれるようにする。
  • <script src="./renderer.js"></script>
package.json
/my_electron/src
  • メインプロセスのファイルを宣言するファイル。
  • メインプロセスのファイルと同じフォルダに入れる。
  • ファイル名はpackage.jsonでないといけない。
package.json
/my_electron
  • プロジェクト全体を管理するファイル。
  • アプリ名、バージョン、著者名、説明、ライセンス等を記載しておく。
  • デバッグやビルド用に長いコマンドやオプションをスクリプトとして記述も出来る。
  • ファイル名はpackage.jsonでないといけない。

アプリのビルド

electron-builderを使って.exe形式にしてみます。 インストーラーも作れelectron-packageより高機能のようです。

electron-builderのインストール

/my_electronで実行

\my_electron > npm install electron-builder --save-dev

ビルド

ビルド用に/my_electron/package.jsonを書き換えました。

  1. main:./src/main.js
  2. scriptsの中にbuild-winを記述
  3. electronをdevDependencies内に移動。 electron-builderはelectronがdevDependencies内に無いとビルドできません。
  4. buildの中に色々記述しています。
{
  "name": "my_electron",
  "version": "1.0.1",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "test": "electron --trace-warnings ./src",
    "start": "electron ./src",
    "build-mac": "electron-builder --mac --x64",
    "build-win": "electron-builder --win --x64"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^18.2.3",
    "electron-builder": "^23.0.3"
  },
  "build":{
    "appId": "biz.ichiri.my_electron.1.0.0",
    "files": [
      "package.json",
      "package-lock.json",
      "./src/main.js",
      "./src/renderer.js",
      "./src/preload.js",
      "/src/index.html"
    ],
    "mac":{
      "target": "dmg"
    },
    "win":{
      "target": "nsis"
    },
    "nsis":{
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}
\my_electron > npm run build-win

> my_electron@1.0.1 build-win
> electron-builder --win --x64

  • electron-builder  version=23.0.3 os=10.0.19043
  • loaded configuration  file=package.json ("build" field)
  • description is missed in the package.json  appPackageFile=C:\Users\9033113\Desktop\Nodejs\Test\my_electron2\package.json
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=18.2.3 appOutDir=dist\win-unpacked
  • default Electron icon is used  reason=application icon is not set
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=16.715s
  • building        target=nsis file=dist\my_electron Setup 1.0.1.exe archs=x64 oneClick=false perMachine=false
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z duration=12.655s
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=5.009s
  • building block map  blockMapFile=dist\my_electron Setup 1.0.1.exe.blockmap

/distフォルダにインストーラ(my_electron Setup 1.0.1.exeが出来て、/dist/win-unpackedフォルダにクリックしたらすぐ動くexeファイルが出来ています。 

実行を簡単にscript化

ビルドのオプションは色々ありコマンドが長くなってきて間違える事も起こります。 そこで/my_electron/package.jsonにscriptsを追記します。(上記package.jsonに記載済み)

以下のコマンドで、簡単に起動ができます。

//ビルドする時はこれを使う
\my_electron > npm run build-win

//ビルドせずにデバッグする時はstartかtestを使う
\my_electron > npm start

これで一連のElectronが使えます。 次はipc(Inter Process Communication)を使ってプリローダーにApiを作成し、レンダラープロセスから読み出し、メインプロセスにアクセスして、メインからレンダラープロセスに値を受け渡す方法を掲載します。

コメント

タイトルとURLをコピーしました