ElectronによるWebベースデスクトップアプリ開発

Electronとは

Web開発の技術を活かしてクロスプラットフォームのデスクトップアプリを効率的に開発できる

クロスプラットフォーム: Windows、macOS、Linuxで動作するデスクトップアプリケーションを作成できる
Webと同じ技術 (HTML、CSS、JavaScript) を使用して、デスクトップアプリのUIを構築できる
ネイティブのメニューバーや通知、システムトレイアイコンの操作など、デスクトップアプリの開発に必要な多くのAPIが含まれている。
Node.jsを統合しているため、ファイルシステム操作やネットワーク通信など、Node.jsモジュールを利用できる
アプリケーションの自動更新機能を簡単に実装できる。
オープンソースプロジェクト

開発例

このZIPファイルは、本Webサイトのトップページプログラム情報－智慧とデータが拓くエレクトロニクス新材料開発拠点をデスクトップアプリ化したものです。
注意: localファイルへのリンクがありますが、optimize以下 (optimize_flex - D2MatE) のファイルしか入れていませんので、その他のページにはアクセスできません。
　外部URLにリンクをつなげる場合は、リンクURLを書き換える必要があります。
一括で書き換える場合は、次のプログラムが参考になります。

　リンクを書き換えるプログラム:

Electronのインストール方法: ページ最後にあります

一般的なElectronアプリの作成手順

プロジェクトのセットアップ
・ Node.jsのインストール
> mkdir my-electron-app
> cd my-electron-app
> npm init -y
> npm install electron --save-dev
メインスクリプト main.js の作成
main.js:
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile('index.html'); // ここを別のHTMLに変えると別のアプリを作れる
　　　　　　　　　　　　　　　　　　　　 // 上のd2mateapp.exeでは、D2MatE_programs_main.html に変更
}
app.whenReady().then(createWindow);
　
メインウインドウのHTMLファイルの作成
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
</body>
</html>
　　
動作確認: コンパイルせずアプリを実行
> npx electron .
ビルド (コンパイル) の実行
・Electron Builderのインストール
> npm install --save-dev electron-builder

・package.jsonに追加
{
"name": "d2mateapp",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"electron": "^33.2.1",
"electron-builder": "^25.1.8"
},

"scripts": {
"build": "electron-builder"
},
"build": {
"appId": "com.example.myapp",
"mac": {
"category": "public.app-category.utilities"
},
"win": {
"target": "nsis"
},
"linux": {
"target": "AppImage"
}
}
}

> npm run build
インストールと実行
> "dist\d2mateapp Setup 1.0.0.exe"
　
次回からの実行
> dist\win-unpacked\d2mateeapp.exe

Electronのインストール方法

Node.js をインストール
Window: > npm install -g electron
Linux: % sudo npm install -g electron
動作テスト
> electron

Node.jsのインストール方法

Node.js: https://nodejs.org/en(https://nodejs.org/en

Windowsの場合
１．公式サイトからインストーラーをダウンロード
　　Node.jsの公式サイト（nodejs.org）にアクセスし、ダウンロードページからLTS（Long-Term Support）バージョンのインストーラーをダウンロード。
２．インストーラーを実行
　ダウンロードしたインストーラーを実行し、セットアップウィザードの指示に従います。
　
AlmaLinuxの場合
% sudo dnf update
(失敗したらsudo dnf update --skip-broken --nobest)
% curl -fsSL https://rpm.nodesource.com/setup_22.x | sudo bash -
% sudo dnf install -y nodejs
動作確認
% node -v
% npm -v

Node.jsアプリの実行
% node app.js

Node.jsアプリの実行可能ファイル作成

pkgのインストール
> npm install -g pkg
package.jsonの作成
package.json:
{
"name": "my-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node index.js"
}
}
　
実行可能ファイルの作成
% pkg . --targets node14-win-x64,node14-macos-x64,node14-linux-x64
　
実行
% ./my-app.exe