developers blog

  1. TOP
  2. Electronでクロスプラットフォームのアプリケーションを作成する
windowsタグ：electron

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.json
1{
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.html
1<!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.js
1const { app, BrowserWindow } = require('electron');

先ほど作成したindex.htmlファイルを読み込み表示するための関数を作成します。

  1. BrowserWindowのインスタンスを作成する
  2. BrowserWindowにindex.htmlファイルを読み込む
index.js
1const createWindow = () => {
2  const win = new BrowserWindow({
3    width: 800,
4    height: 600
5  });
6
7  win.loadFile('index.html');
8}

次に作成した関数を、アプリケーションが起動した後に実行するように以下のように追記します。

  1. アプリケーションを起動したとき、appモジュールのwhenReadyイベントが呼ばれる
  2. whenReadyイベントが正常の場合、createWindowを実行する
index.js
1app.whenReady().then(() => {
2  createWindow();
3});

macOS以外では全てのウィンドウが閉じた場合にアプリケーションを終了するため、そのロジックを追加します。

  1. window-all-closedイベントが発生した時、platformがdarwin(ダーウィン)以外の場合アプリケーションを終了する
index.js
1app.on('window-all-closed', () => {
2  if (process.platform !== "darwin") app.quit();
3});

WindowsおよびLinuxでは、ウィンドウが開いていないとアプリケーションは終了しますが、macOSではウィンドウが開いていない時も実行を継続しているため、ウィンドウが開いていない場合はcreateWindowを実行します。
これを実現するにはactiveteイベントを設定する必要がありますが、ready以前にウィンドウを作成することはできないため、whenReadyコールバック内でイベントをアタッチします。

index.js
1app.whenReady().then(() => {
2  createWindow();
3
4  app.on('activate', () => {
5    if (BrowserWindow.getAllWindows().length === 0) createWindow();
6  });
7});

完成したスクリプトは以下のようになります。

index.js
1const { 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ごとにアプリケーションを別々に作成するのではなく、一つのソースで作成できるようになれば、クロスプラットフォームのアプリケーションの作成も増えていくと思います。