「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】

前回は、Electronの環境を作ったのですが、既存のソースからのビルドはうまくいきませんでした。

前回は、Electronの環境を作ったのですが、既存のソースからのビルドはうまくいきませんでした。というのも、設定が中途半端で fsやpathのライブラリがうまく読み込めないようです。そこで、原点に帰って、改めてElectronのひな形をビルドしてみました。 Electronクイックスタート Electronの公式ドキュメント「クイックスタート」に沿って、アプリを作成します。クイックスタート | Electron MacBookでチュートリアル通りにそのままできるか、...

というのも、設定が中途半端で fsやpathのライブラリがうまく読み込めないようです。

そこで、原点に帰って、改めてElectronのひな形をビルドしてみました。

1. Electronクイックスタート

Electronの公式ドキュメント「クイックスタート」に沿って、アプリを作成します。

MacBookでチュートリアル通りにそのままできるか、確認していきます。

目次に戻る

2. ソースコードを書く前の準備

まずは、ソースコードを書く前に、作業フォルダにElectronパッケージを追加します。

目次に戻る

2-1. node -v（node.jsの確認）

まずは、nodeとnpmがインストールされているか、確認します。

node -v
npm -v

過去の記録をたどってみると、このPCでは「Node.js」からダウンロードしたインストーラを使って、インストールしました。

MacにNode.jsをインストールした

MacでローカルにJavaScriptを使うために、Node.jsをインストールしました。手順をメモしておきます。「Node.js」からMac用インストーラをダウンロードして、インストールします。 LTS（長期間サポート版）をダウンロードしました。あとは、通常のインストール操作です。 Node.js v12.16.3と、npm v6.14.4をインストールできました。続きはこちらからこちらもどうぞ

目次に戻る

2-2. npm init（package.jsonを生成）

次は、初期設定。「npm init」は、対話型コマンドで package.jsonを生成します。

mkdir my-electron-app && cd my-electron-app
npm init

何も指定しないと、こんなコードになります。

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

entry point を既定（index.js）のままにしたのですが、後ほど main.jsに修正しました。

「npm init」の対話インターフェイスで、指定しておけばよかったです。

目次に戻る

2-3. npm i -D electron（node_modulesを追加）

次は、アプリに electron パッケージをインストールします。

npm install --save-dev electron

npmのオプション

「npm install –save-dev electron」は、
「npm i -D electron」でも同じ意味になる。

-D, --save-dev: devDependenciesにパッケージを追加する。

「package-lock.json」ファイルと、「node_modules」が追加されました。

node_modulesを見ると、81のフォルダがあり、中にはjsファイルなどが入っています。

また、package.jsonにも、devDependenciesの項目が追加されました。

npm installでは、
パッケージをnode_modulesに追加して、
package.jsonに記録してくれるんだね。

目次に戻る

2-4. package.jsonの編集

ここで、package.jsonから2箇所を編集しました。

package.jsonのscriptsに
「”start”: “electron .”」を追加したので、
「npm start」と実行すると
「electron .」と入力したのと同じことになります。

ただし、まだエントリ・ポイントにあたるmain.jsがないので、エラーが表示されます。

Error Launching app
Unable to find Electron app at 〜

目次に戻る

2-5. 空のmain.jsを作成する

とりあえず、空のテキストファイルをmain.jsとして保存して、起動してみます。

今度は、起動エラーは表示されませんでしたが、ウィンドウは表示されません。

このままでは、ターミナルが操作できないので、表示されているアイコンから「終了」しました。

目次に戻る

3. サンプルプログラムを作成していく

下準備ができたので、いよいよコードを書いていきます。

目次に戻る

3-1. index.htmlのひな形

Electronアプリがウインドウを表示するために、読み込むHTMLファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

目次に戻る

3-2. preload.jsを作成

main.jsから呼ばれるプリロードプロセスを記述します。

主な内容

electronからバッケージ情報を読み込み、HTMLのspanに書き込む

// preload.js

// Node.js の全 API は、プリロードプロセスで利用可能です。
// Chrome 拡張機能と同じサンドボックスも持っています。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

目次に戻る

3-3. main.jsからウィンドウを表示する

main.jsを開いて、サンプルコードを入力します。

コードの主な内容

ウィンドウを作成する
const createWindow = () => {
プリロード処理のスクリプトを指定する
preload: path.join(__dirname, ‘preload.js’)
HTMLファイルを読み込む
mainWindow.loadFile(‘index.html’)
ウィンドウ操作に対応する処理を記述する
app.whenReady().then(() => {

// main.js

// アプリケーションの寿命の制御と、ネイティブなブラウザウインドウを作成するモジュール
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // ブラウザウインドウを作成します。
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // そしてアプリの index.html を読み込みます。
  mainWindow.loadFile('index.html')

  // デベロッパー ツールを開きます。
  // mainWindow.webContents.openDevTools()
}

// このメソッドは、Electron の初期化が完了し、
// ブラウザウインドウの作成準備ができたときに呼ばれます。
// 一部のAPIはこのイベントが発生した後にのみ利用できます。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // macOS では、Dock アイコンのクリック時に他に開いているウインドウがない
    // 場合、アプリのウインドウを再作成するのが一般的です。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// macOS を除き、全ウインドウが閉じられたときに終了します。 ユーザーが
// Cmd + Q で明示的に終了するまで、アプリケーションとそのメニューバーを
// アクティブにするのが一般的です。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// このファイルでは、アプリ内のとある他のメインプロセスコードを
// インクルードできます。 
// 別々のファイルに分割してここで require することもできます。

目次に戻る

3-4. npm start（アプリを起動する）

無事にウィンドウが表示され、バージョン情報を表示できました。

「クイックスタート」の画面と比較すると、Electronのバージョンがだいぶ進んでいることがわかります。

「Electron リリースタイムライン | Electron」によると、バージョン8は2020年2月ごろなので、チュートリアルはそのころに書かれたことになります。

Electron	アルファ	ベータ	安定版	Chrome	ノード
2.0.0	—	2018-Feb-21	2018-May-01	M61	v8.9
3.0.0	—	2018-Jun-21	2018-Sep-18	M66	v10.2
4.0.0	—	2018-Oct-11	2018-Dec-20	M69	v10.11
5.0.0	—	2019-Jan-22	2019-Apr-24	M73	v12.0
6.0.0	—	2019-May-01	2019-Jul-30	M76	v12.4
7.0.0	—	2019-Aug-01	2019-Oct-22	M78	v12.8
8.0.0	—	2019-Oct-24	2020-Feb-04	M80	v12.13
9.0.0	—	2020-Feb-06	2020-May-19	M83	v12.14
10.0.0	—	2020-May-21	2020-May-21	M85	v12.16
11.0.0	—	2020-Aug-27	2020-Nov-17	M87	v12.18
12.0.0	—	2020-Nov-19	2021-Mar-02	M89	v14.16
13.0.0	—	2021-Mar-04	2021-May-25	M91	v14.16
14.0.0	—	2021-May-27	2021-Aug-31	M93	v14.17
15.0.0	2021-Jul-20	2021-Sep-01	2021-Sep-21	M94	v16.5
16.0.0	2021-Sep-23	2021-Oct-20	2021-Nov-16	M96	v16.9
17.0.0	2021-Nov-18	2022-Jan-06	2022-Feb-01	M98	未定

Electron リリースタイムライン | Electron

年に4回のペースでバージョンアップしているんですね。

目次に戻る

4. アプリケーションのビルド

あとは、独立した「.app」の形にすることです。

目次に戻る

4-1. electron-forgeをインストールしておく

公式サイトのチュートリアルでは、アプリのリリース方法として、「electron-forge」が紹介されていました。

まず npmでインストールして、

npm install --save-dev @electron-forge/cli

npxでコマンドなどをインポートします。

npx electron-forge import

npx

「npx」は、「npm exec」。
ローカル・リモートのnpmパッケージからコマンドを実行する。
・npx | npm Docs

「package.json」を確認すると、electron-forgeに関する部分が増えています。

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.61",
    "@electron-forge/maker-deb": "^6.0.0-beta.61",
    "@electron-forge/maker-rpm": "^6.0.0-beta.61",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.61",
    "@electron-forge/maker-zip": "^6.0.0-beta.61",
    "electron": "^16.0.5"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "test_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

この時点でnode_modulesを見てみると、249個に増えていました。