Electron (エレクトロン)とは、Webの技術でデスクトップアプリケーションを作成できるテクノロジーです。HTML5とCSS3、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを一つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。

Electron製のアプリケーションはChromiumクロミウム（Chromeブラウザの元）とNode.jsノードジェイエスがランタイムとなっています。Webコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリとしてブラウザだけで実現できない機能を組み込めるのが特徴です。

利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツール、インスタレーションやサイネージの分野でも活用が考えられます。

本記事では、Electron (エレクトロン)の紹介と、Electronを使用してHTML+Node.jsでデスクトップアプリケーションを作るまでの手順を説明します。

※ 本記事はElectron v1.4.15（2017年1月19日リリース）を対象に解説しています

Electronの紹介と採用事例

Electronは、Windows、macOS、Linuxのデスクトップアプリケーションを作成するためのフレームワークです。Electronを使うことで、Webの技術であるHTML5やCSS3、JavaScriptで作ったコンテンツをデスクトップアプリケーションにすることができます。

採用事例には「Visual Studio Code (Microsoft)」や「Kobito for Windows (Increments)」などがあり、開発元のGitHub社では「Atom」の開発に使用しています。Web開発者にとって便利なアプリケーションの開発に採用が見られます。

▼ Visual Studio Code – Microsoft社が提供しているコードエディター

Visual Studio Code

▼ Kobito for Windows – Increments社が提供しているソフトウェア開発者のためのMarkdownによる情報記録・共有ソフト

Kobito for Windows

▼ Atom – GitHub社が提供しているコードエディター

Atom

▼ Avocode – PSDファイル等を解析して画像の切り出しやCSS書き出しをなど、デザインフローを改善するツール

Avocode

弊社の事例としてLINEアニメスタンプが制作できる「アニメ画像に変換する君」を開発しました。Mac App StoreでElectronを公開した数少ない国内事例です。

▼アニメ画像に変換する君 – APNGやWebP画像形式に変換するツール

アニメ画像に変換する君

他にもどんなアプリが作成されているのか気になったときは「Electron Awesome」に情報がまとまっているので、確認されるとよいでしょう。

類似技術との比較から見えてくるElectronの利点

Electron以外にもさまざまなデスクトップアプリケーション用のフレームワークがあります。簡単な比較用の表を作成したのでご確認ください。

表にある通り、HTMLやJavaScriptでデスクトップアプリを開発できるフレームワークはいくつかあります。ElectronやNW.jsはChromiumをベースとしているため、ブラウザー依存を気にせずに最新のWeb技術を使用できます。Web技術者にとっては今まで作成してきた資産を再利用するといったこともできるでしょう。

この表だとElectronとNW.jsは全く同じに見えるのですが、ElectronはJavaScriptファイルがエントリーポイントのためHTMLファイルを用意しなくても実行できる点でNW.jsとの違いがあります。その他の詳しい違いについては「Technical differences to NW.js」にまとまっています。

名前対応プラットフォーム言語等ランタイム費用
ElectronWindows / macOS / LinuxNode.js + HTML (※1)内蔵 (Chromium)無償
NW.jsWindows / macOS / LinuxNode.js + HTML (※1)内蔵 (Chromium)無償
PhoneGap (Cordova)Windows 8 / iOS / AndroidJavaScript + HTML不要 (OS提供のブラウザー)有償プラン有り
Adobe AIRWindows / macOS / iOS / AndroidJavaScript + HTML (※2) / ActionScript内蔵可 (Adobe AIR)無償
QtWindows / macOS / Linux / iOS / AndroidC++ / QML不要有償プラン有り

※1 ChromiumのBlinkエンジン ※2 Webkitエンジン

それではデスクトップアプリケーションを実際に作りながら、開発手順を学んでいきましょう。

Electronでデスクトップアプリを作成しよう

Electronでデスクトップアプリケーションを作成していきましょう。予め準備しておく必要があるのは、macOSかWindowsのパソコンのみ。操作にはOSにもともとに入っているコマンドラインツールを使います。

手順は動画に撮影していますので、わからない箇所があれば動画を確認ください。

1. Node.jsのインストール

Electronを開発するためには「Node Package Manager(npm)」が必要となるため、まずは「Node.js」をインストールしましょう。Node.jsをインストールすれば、npmコマンドが使用可能となります。

Node.jsのダウンロード

▲Node.jsは公式サイトから無料でダウンロードできる。今回はLTS版（長期安定版）の「v6.9.4LTS」を使って解説する。

2. Electronのインストール

コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル.app)を立ち上げ、以下のコマンドを実行します。成功するとElectronをコンパイルできる環境が整います。

npm install electron -g

※macOSで「npm ERR! Error: EACCES: permission denied」のエラーが発生した場合、管理者権限（sudo）で試してみてください。

3. アプリケーション実行用のファイルの用意

今回アプリケーションを作成するために、3つファイルを用意しました。以下にて、それぞれどのようなファイルなのかを説明していきます。

FirstApp Files

▼ package.json

package.jsonは必ず必要なファイルです。ここにはエントリーポイントとなるJavaScriptのファイル名を指定します。アプリケーション名とバージョンを指定すると、のちほど管理しやすくなります。

{
  "name": "FirstApp",
  "version": "0.1.0",
  "main": "main.js"
}

▼ main.js

main.jsはエントリーポイント（アプリケーションの実行開始場所）となるJavaScriptファイルです。ここからアプリケーションのウィンドウを開く実装を行っていきます。ElectronはECMAScript 2015の対応が進んでいるので、新しい記法を使ったJavaScriptで記載しています。積極的に新しい記法を使っていくといいでしょう。

// アプリケーション作成用のモジュールを読み込み
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
 
const path = require('path');
const url = require('url');
 
// メインウィンドウ
let mainWindow;
 
function createWindow () {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({width: 800, height: 600});
 
  // メインウィンドウに表示するURLを指定します
  // （今回はmain.jsと同じディレクトリのindex.html）
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));
 
  // デベロッパーツールの起動
  mainWindow.webContents.openDevTools();
 
  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}
 
//  初期化が完了した時の処理
app.on('ready', createWindow);
 
// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', function () {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
app.on('activate', function () {
  /// メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

▼ index.html

今回メインウィンドウとして開くHTMLファイルです。main.jsの19行目でメインウィンドウとして指定しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>

  <body>
    <h1>初めてのElectron</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

4. アプリケーションの実行

上記のファイルが配置してあるフォルダー「FirstApp」にコマンドラインで移動しましょう（srcフォルダの上位のフォルダーです）。次にコマンドラインからelectronコマンドを実行します。成功するとアプリケーションとしてHTMLが表示されます。

Electronコマンドの入力方法

Windowsの場合

electron.exe src

macOSの場合

electron src

Electronコマンド実行後の画面

次のページでは、ここまで作成したElectronを配布できるようにパッケージにします。また、Electronのデバッグ方法についても解説します。