スポンサーリンク

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

ニッチな話題プログラミング

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

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

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

スポンサーリンク

Electronクイックスタート

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

クイック スタート | Electron

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

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

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

node -v(node.jsの確認)

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

node -v
npm -v

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

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」の対話インターフェイスで、指定しておけばよかったです。

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に記録してくれるんだね。

package.jsonの編集

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

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

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

Error Launching app

Unable to find Electron app at 〜

空のmain.jsを作成する

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

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

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

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

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

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>

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])
  }
})

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 することもできます。

npm start(アプリを起動する)

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

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

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

Electronアルファベータ安定版Chromeノード
2.0.02018-Feb-212018-May-01M61v8.9
3.0.02018-Jun-212018-Sep-18M66v10.2
4.0.02018-Oct-112018-Dec-20M69v10.11
5.0.02019-Jan-222019-Apr-24M73v12.0
6.0.02019-May-012019-Jul-30M76v12.4
7.0.02019-Aug-012019-Oct-22M78v12.8
8.0.02019-Oct-242020-Feb-04M80v12.13
9.0.02020-Feb-062020-May-19M83v12.14
10.0.02020-May-212020-May-21M85v12.16
11.0.02020-Aug-272020-Nov-17M87v12.18
12.0.02020-Nov-192021-Mar-02M89v14.16
13.0.02021-Mar-042021-May-25M91v14.16
14.0.02021-May-272021-Aug-31M93v14.17
15.0.02021-Jul-202021-Sep-012021-Sep-21M94v16.5
16.0.02021-Sep-232021-Oct-202021-Nov-16M96v16.9
17.0.02021-Nov-182022-Jan-062022-Feb-01M98未定
Electron リリースタイムライン | Electron

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

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

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

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個に増えていました。

npm run make(プログラムを出力)

npmでmakeコマンドでElectron Forgeを使ったビルドができます。

npm run make

生成されたアプリケーションは、outフォルダにあります。

「test-app.app」ファイルを作成することができました。

npmの操作で、package.jsonとnode_modulesが追加されていくので、ファイルだけをコピーしても、うまくビルドできないことがわかりました。

QRコードを読み込むと、関連記事を確認できます。
「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】
タイトルとURLをコピーしました