Electronでクロスプラットフォームのアプリケーションを作成する
はじめに
Electronを使用し、Hello World
を表示するだけのクロスプラットフォームデスクトップアプリを作成します。
※この記事は、過去の記事を最新の環境に合わせて書き直したものです。
目次
環境
- node.js : v14.15.3
- electron : 13.1.7
Electronとは
Electron
はクロスプラットフォームアプリケーション開発のためのフレームワークです。Electron
自体はオープンソースとなっていて、これを利用して作成されたアプリケーションの代表的なものにVisual Studio Code
があります。
Electronは、JavaScript、HTML、およびCSSを使用してデスクトップアプリケーションを構築するためのフレームワークです。ChromiumとNode.jsをバイナリに埋め込むことで、Electronは1つのJavaScriptコードベースを維持し、Windows、macOS、Linuxで動作するクロスプラットフォームアプリを作成できます。ネイティブの開発経験は必要ありません。
対応するOSは以下のようになっています。
- macOS : 64ビットのバイナリのみ用意されています。サポートされているmacOSの最小バージョンは
macOS 10.11
です。 - Windows : Windows7以降サポートされています。
ia32(x86)
とx64(amd64)
は両方バイナリが用意されています。 - Linux : Electronのビルド済みバイナリは
Ubuntu 18.04
で構築されています。
Electronのインストール
実際にElectron
をインストールしてアプリケーションを作成していきます。
package.jsonの作成
Electron
をインストールするまえに、npm
コマンドを使用してpackage.json
ファイルを作成します。
npm init
コマンドで対話形式で設定ファイルを作成します。
1> npm init
main
フィールドに書いてあるファイルが、アプリケーションのスタートアップスクリプトになります。description
およびauthor
を空の場合、パッケージングの時にエラーが発生します。
package.json1{ 2 "name": "my-app", 3 "version": "1.0.0", 4 "description": "hello world!", 5 "main": "index.js", 6 "author": "My Name", 7 "license": "MIT" 8}
Electronのインストール
次にElectron
をローカルにインストールします。
1> npm install --save-dev electron
これでElectron
を使用する準備はできました。次は実際にアプリケーションの中身を作成していきます。
Hello Worldアプリの作成
画面にHello World
と表示するだけのアプリケーションを作成していきます。
フォルダ構成
フォルダ構成は以下のようになります。
package.json
ファイルのmain
に書かれているファイルをロードします。main
がない場合はindex.js
という名前のファイルをロードします。
1/ 2 ┣ node_modules/ 3 ┣ index.html 4 ┣ index.js 5 ┗ package.json
htmlファイルの作成
アプリケーションのコンテンツには、読み込んだhtmlファイルを表示することができます。
そこで、Hello World!
と表示するために、以下のようなindex.htmlファイルを作成します。
index.html1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> 6 <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> 7 <title>Hello World!</title> 8</head> 9<body> 10 <h1>Hello World!</h1> 11</body> 12</html>
スクリプトファイルの作成
実際のアプリケーションのスクリプトを作成していきます。package.json
ファイルで指定したindex.js
という名前のファイルを作成し、そこに記述していきます。
まずは、必要なモジュールを読み込みます。
- app : アプリケーションのイベントサイクルを制御するためのモジュール
- BrowserWindow : ウィンドウを制御するためのモジュール
index.js1const { app, BrowserWindow } = require('electron');
先ほど作成したindex.html
ファイルを読み込み表示するための関数を作成します。
BrowserWindow
のインスタンスを作成するBrowserWindow
にindex.html
ファイルを読み込む
index.js1const createWindow = () => { 2 const win = new BrowserWindow({ 3 width: 800, 4 height: 600 5 }); 6 7 win.loadFile('index.html'); 8}
次に作成した関数を、アプリケーションが起動した後に実行するように以下のように追記します。
- アプリケーションを起動したとき、
app
モジュールのwhenReady
イベントが呼ばれる whenReady
イベントが正常の場合、createWindow
を実行する
index.js1app.whenReady().then(() => { 2 createWindow(); 3});
macOS
以外では全てのウィンドウが閉じた場合にアプリケーションを終了するため、そのロジックを追加します。
window-all-closed
イベントが発生した時、platform
がdarwin(ダーウィン)
以外の場合アプリケーションを終了する
index.js1app.on('window-all-closed', () => { 2 if (process.platform !== "darwin") app.quit(); 3});
Windows
およびLinux
では、ウィンドウが開いていないとアプリケーションは終了しますが、macOS
ではウィンドウが開いていない時も実行を継続しているため、ウィンドウが開いていない場合はcreateWindow
を実行します。
これを実現するにはactivete
イベントを設定する必要がありますが、ready
以前にウィンドウを作成することはできないため、whenReady
コールバック内でイベントをアタッチします。
index.js1app.whenReady().then(() => { 2 createWindow(); 3 4 app.on('activate', () => { 5 if (BrowserWindow.getAllWindows().length === 0) createWindow(); 6 }); 7});
完成したスクリプトは以下のようになります。
index.js1const { app, BrowserWindow } = require('electron'); 2 3const createWindow = () => { 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600 7 }); 8 9 win.loadFile('index.html'); 10} 11 12app.whenReady().then(() => { 13 createWindow(); 14 15 app.on('activate', () => { 16 if (BrowserWindow.getAllWindows().length === 0) createWindow(); 17 }); 18}); 19 20app.on('window-all-closed', () => { 21 if (process.platform !== "darwin") app.quit(); 22});
アプリケーションの起動
npx electron .
コマンドを入力してアプリケーションを起動します。
1> npx electron .
アプリケーションが起動し、Hello World!
と表示されたら成功です。
アプリケーションのパッケージング
今回作成したアプリケーションの実行ファイルを作成するために、Electron Forge
を使用します。
今回はWindows用のexeファイルを作成するだけなので、Electron Forge
のCLIのみインストールします。
1> npm install --save-dev @electron-forge/cli
次に作成したアプリケーションとForgeを紐づけるためimport
を実行します。
1> npx electron-forge import
package.json
に必要な設定が上書きされます。
npm run make
コマンドを実行すると、out/
フォルダに実行ファイルが作成されます。
1> npm run make
- 引数になにも指定がない場合は、実行環境のプラットフォーム用の実行ファイルが作成されます。
おわりに
今回はhtmlファイルを読み込み表示するだけのアプリケーションを作成しました。
Electron
をうまく活用し、OSごとにアプリケーションを別々に作成するのではなく、一つのソースで作成できるようになれば、クロスプラットフォームのアプリケーションの作成も増えていくと思います。