Electronの仕組みに迫る！？

8/26/2021

Electronの仕組みに迫る！？

2021年8月26日

Electron の仕組みに迫る！？

Vue のフレームワークを利用して、拡張機能を追加すると Electron のアプリも簡単に作成できます。この記事ではそうした拡張機能を利用しないで Electron の設定は行う例を紹介します。少し面倒ですが、それほど難しい物ではありません。自分で設定すると Electron の仕組みの一部が見えてきます！

基本設定の手順

Electron の設定は難しくありません。基本要素は、Web ページの作成とほぼ同じです。
Javascript / Typescript の設定
基本の Web ページの準備
Electron のエントリーポイント（初期化）ファイルの作成
スクリプトの設定
という感じです。Javascript でプログラムを記述する場合には事前のコンパイルは不要なので特別な設定は不要です。しかし、Typescript で記述したい場合には、Web ブラウザで実行できるように、Javascript に変換する必要があります。従って、Typescript をコンパイルするための設定が必要になります。

プロジェクトフォルダの作成

最初にやることは、Electron のアプリのプロジェクトのフォルダを作成してその設定を行います。フォルダを作成して、そのフォルダに移動します。その上で、npm のパッケージ管理機能を利用できるように、「npm init -y」を実行してフォルダを初期化します。

$ mkdir xxxx
$ cd xxxx
$ npm init -y

基本パッケージのインストール

Electron アプリの基本パッケージをインストールします。今回は Typescript で開発する前提にしているので、Typescript のパッケージもインストールします。

$ npm install --save-dev typescript electron

Typescript の設定の初期化を行います。

# npx tsc --init

初期化を行うとプロジェクトフォルダに「tsconfig.json」が作成されます。「tsconfig.json」の例です。

{
  "compilerOptions": {
    "target": "es6",
    //"module": "none",
    "outDir": "dist",
    //"jsx": "react",
    "strict": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

「src」フォルダの下の Typescript のファイルをコンパイルして、「dist」フォルダに保存します。

Web ページの準備

Electron のアプリのベースになる Web ページ（ HTML ファイル）を準備します。とりあえず、Electron のメインの Winodow の表示のベースになる記述（index.html）を作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>Electron React & TypeScript Example</title>
  </head>
  <body>
    <h1>Hello electron</h1>
  </body>
</html>

「src」フォルダの作成

Typescript のソースコードを置くフォルダ「src」をプロジェクトフォルダに作成します。その上で「index.ts」を作成します。このファイルが Electron アプリのエントリーポイント（初期化ファイル）になります。

「index.ts」の例です。

import { app, BrowserWindow } from "electron";

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // this line is very important as it allows us to use 'require' syntax in our html file.
    },
  });
  mainWindow.loadFile(`index.html`);
}
app.whenReady().then(createWindow);

Electron アプリのためのスクリプトの準備

「package.json」に Electron アプリの管理のためのスクリプトを追加します。

{
  …
　"main": "dist/index.js",
  "scripts": {
    "start": "npm run build && electron .",
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  ...
}

これで、開発用の実行や、配布用のパッケージの作成ができます。

「npm run start」で開発用の Electron アプリが実行されます。

「ブラウザ」を作っているエントリーポイントのプログラム

Electron アプリのポイントは、エントリーポイント（初期化）のプログラムにあります。本来は、Web ブラウザで表示する部分を、デスクトップアプリのウインドウで表示しているのが Electron アプリです。このWeb ブラウザの代わりのウインドウを立ち上げる処理を行なっているのがこのファイルです。

簡単に言うと、 Electron アプリ専用の「ブラウザ」を立ち上げるためのプログラムという事になります。 Web ブラウザでは URL を指定する入力フィールドがありますが、通常のアプリの場合には決まった表示しかしないために、URL を入力する部分は持っていません。従って、このエントリーポイントのプログラムで指定しています。それが

mainWindow.loadFile(`index.html`)

の部分です。この例では最小限の記述だけにしているのでシンプルです。

要は Typescript の指定がなければ、Electrion のパッケージをインストールして、このエントリーポイントのページを作るだけで最小限のアプリができてしまうという仕掛けです。

簡単に設定するには？

基本的にエントリーポイント（初期化）のプログラムを作れば Electron のアプリは作れるという事です。 Vue の拡張機能はこうした作成をほぼ自動でやってくれるので仕組みがわからなくても、デスクトップのアプリが作れます。それ以外に簡単に設定する方法としては、スクリプトでサンプルプロジェクトを作ってしまうという方法があります。

これは、React や Vue のサンプルプロジェクトを作成するのと同じ仕組みで npm のスクリプトで作成する方法です。

$ sudo npm install -g crate-electron-app

（＊）Windows の場合には、「sudo」は不要です

インストールができたら以下のコマンドを実行すれば、上の一連の処理を自動でやってくれます。

$ npx create-electron-app [プロジェクト名]

配布用のパッケージの作成は？

Web ベースの実装から、デスクトップのアプリを作成するには、別のパッケージが必要です。

$ npm install electron-builder --save-dev

で配布用パッケージを作成するパッケージをインストールします。あとは、「package.json」に必要な記述を追加すれば、配布用のパッケージを作成出来るようになります。

"scripts": {
   "start": "npm run build && electron .",
   "build": "tsc",
   "create": "electron-builder",
   "win": "electron-builder --win --x64",
   "mac": "electron-builder --mac --x64",
   "linux": "electron-builder --linux --x64"
},
"build": {
   "extends": null,
   "files": [
     "build/**/*",
     "*.js"
   ],
   "directories": {
     "output": "dist"
   },
   "mac": {
     "target": [
       "dmg"
     ]
   },
   "win": {
     "target": [
       "portable"
     ]
   },
   "linux": {
     "target": [
       "AppImage",
       "deb"
     ]
   },
 },

（＊）MacOS の配布パッケージの作成には Mac が必要です。

まとめ

今回は、Electron の仕組みを理解する目的で、拡張機能を利用しないで、Electron のアプリを作成する手順を紹介してみました。
これを見るとわかりやすいですが、アプリ専用の「ブラウザ」を作って、それに Web ページを表示させるというのが Electron の仕組みというのがわかります。配布用パッケージの作成のメッセージを見ているとなんとなくわかりますが、基本は各 OS に対応した、Web ブラウザ（Chronium）のパッケージをダウンロードしてきて、デスクトップのウインドウを作るようになっています。
実際の配布用パッケージを作るためのモジュール（パッケージ）は、「electron-build」でこのモジュールが Web ブラウザをダウンロードしてきて、アプリに仕上げてくれるという仕組みです。
実際には、Vue や React を利用して Web ベースのアプリを作成して、デスクトップ化するという方法の方が便利ですが、自分で設定すると Electron の仕組みを理解しやすくなります。試しに、一度やってみると Electron の仕組みに対する理解が深まります。

このブログを検索

シリコンバレースーパーウエア

Electronの仕組みに迫る！？

Electronの仕組みに迫る！？

2021年8月26日

Electron の仕組みに迫る！？

基本設定の手順

プロジェクトフォルダの作成

基本パッケージのインストール

Web ページの準備

「src」フォルダの作成

Electron アプリのためのスクリプトの準備

「ブラウザ」を作っているエントリーポイントのプログラム

簡単に設定するには？

配布用のパッケージの作成は？

まとめ

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

足し算以外もできるようにする

改良版足し算プログラム