JavaScriptなどWebの技術を利用して、デスクトップアプリを開発できるElectronをご存じでしょうか。Electronを使うと手軽にWindowsやmacOS、Linuxで動くデスクトップアプリを作ることができます。つい先日、9月1日にElectronのバージョン10.1.1が公開されました。本稿では最新バージョン10を使って簡単にアプリを作ってみましょう。

○Electronとは?代表アプリは?

『Electron』とは、HTML/CSS/JavaScriptといったWebの技術を利用して、デスクトップアプリを作ることができるフレームワークです。Windows/macOS/Linux上で動くデスクトップアプリを開発できます。

ElectronのWebサイト

Electronを使って作られた代表的なアプリには、GitHubが開発しているテキストエディタの「Atom」や、マイクロソフトが開発している「Visual Studio Code」など、本格的なアプリがあります。

ATOMエディタはElectronで作られている

Visual Studio CodeもElectronで作られている

なお、8月末に公開されたv10.0.0では、ブラウザのChromium 85.0.4183.84、JavaScriptエンジンのNode v12.16.3、V8 v8.5に対応した機能が搭載されました。そして、最新版のv10.1.1ではmacOSのダイアログフィルタの問題や、ネットワーク許可エラーの問題、Windowsで最大化した際の問題などの不具合が修正されています。

○Electronのインストール

Electronをインストールするには、Node.jsが必要となります。まずは、Node.jsのWebサイトからNode.jsをインストールしましょう。

・Node.js ダウンロード

[URL] https://nodejs.org/ja/download/

そして、Node.jsをインストールしたら、コマンドラインを起動します。

【Windowsの場合】

WindowsならPowerShellを起動しましょう。PowerShellを起動するには、Windowsメニューから『Windows PowerShell』をから起動します。

【macOSの場合】

macOSならターミナル.appを起動しましょう。ターミナル.appを起動するには、Finderの「アプリケーション」を開き、「ユーティリティ」というディレクトリにターミナル.appがあります。

そして、プログラムを作成しようと思っているフォルダに移動します。そして、以下のコマンドを入力します。なお、「cd 」と入力して、フォルダをPowerShellにドラッグすると手軽にパスを入力できます。

cd (フォルダのパス)

そして、以下のコマンドを実行します。Electronフレームワークはサイズが大きいので、インターネットが遅い環境だと、インストールにしばらく時間がかかります。

npm init -y

npm install electron

Windowsで実行すると、以下のような画面になります。

Windowsでnpmコマンドを実行してElectronをインストールしているところ

○Electronの一番簡単なプログラム

Electronで一番簡単なプログラムを作ってみましょう。最初に、npm initで自動生成されたpackage.jsonを開いて編集してみましょう。このファイルを以下のように書き換えます。

{

"name": "test",

"version": "1.0.0",

"description": "",

"scripts": {

"start": "electron index.js"

},

"keywords": [],

"dependencies": {

"electron": "^10.1.1"

}

}

続いて『index.js』というJavaScriptのプログラムを作成します。このプログラムは、以下のように記述します。これがメインプログラムとなります。

// 必要なライブラリを取り込む --- (*1)

const {app, BrowserWindow} = require('electron')

let mainWindow = null // メインウィンドウ

// ウィンドウを作成する関数を定義 --- (*2)

function createWindow() {

mainWindow = new BrowserWindow({

webPreference: {

nodeIntegration: true,

},

width: 800, // ウィンドウの幅 --- (*3)

height: 600, // ウィンドウの高さ

})

// メインウィンドウのHTMLを指定 --- (*4)

mainWindow.loadFile('index.html')

// ウィンドウを閉じた時の処理

mainWindow.on('closed', () => {

mainWindow = null

})

}

// アプリのイベントを設定 --- (*5)

app.on('ready', createWindow)

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

if (mainWindow === null) {

createWindow()

}

})

このメインプログラムは、Electronでウィンドウを作成して表示する、最も簡単なプログラムです。(*1)ではElectronを使うためのライブラリを取り込みます。そして、(*2)ではウィンドウを作成する関数createWindowを定義します。ここでポイントとなるのが、(*3)の部分で作成するウィンドウの幅(width)と高さ(height)を指定している部分と、(*4)でウィンドウ内に表示するHTMLファイルを読み込んでいます。そして、(*5)ではアプリ内で起きるイベントを指定します。

そして、ウィンドウ内に表示するHTML「index.html」を以下のように用意しましょう。

Electron最初のアプリ

こんにちは

最初のアプリ

以上、Node.jsのプロジェクトの設定を記述する「package.json」、メインプログラムの「index.js」、ウィンドウ内に表示するHTML「index.html」と、三つのファイルを用意します。

そして、コマンドラインから以下のコマンドを実行すると、Electronのアプリが表示されます。

npm start

Windowsだと以下のように表示されます。

WindowsでElectronアプリを実行したところ

macOSだと以下のように表示されます。

macOSでElectronアプリを実行したところ

全く同じプログラムですが、WindowsとmacOSで全く同じように実行することができました。

○まとめ

以上、今回は、Electronのインストールと簡単なプログラムの作り方を紹介しました。HTMLやJavaScriptなどWebの技術を利用して、デスクトップアプリを開発できるのはとても気分の良いものです。また、ここで紹介したように、全く同じコードでWindows/macOS/Linuxのそれぞれのアプリが開発できるのも便利です。本稿がElectronをはじめるきっかけになれば幸いです。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。