最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう

最新版で学ぶElectron入門
ウェブ技術でPCアプリを開発しよう

2019年9月30日メンテナンス済み / 株式会社ICS 野原のぞみ

Electron

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

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

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

本記事では、Electronエレクトロンの紹介と、デスクトップアプリケーションを作るまでの手順を説明します。

※本記事は2019年9月現在最新のElectron v6.0.10を対象に解説しています

Electronの紹介と採用事例

Electronは、Windows、macOS、Linuxのデスクトップアプリケーションを作成するためのフレームワークです。Electronを使うことで、ウェブ技術であるHTMLやCSS、JavaScriptで作ったコンテンツをデスクトップアプリケーションにできます。ワンソースでそれぞれのOS向けのアプリケーションを開発できることも魅力です。

採用事例には「Visual Studio Code (Microsoft)」や「Atom（GitHub）」があります。大企業も採用していることから、導入への不安が少なくなりますね。

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

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

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

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

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

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

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

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

手順は動画に撮影していますので、わからない箇所があれば動画を確認ください。わずか2分40秒の動画を見るだけで、今回の手順が理解できます。

また、今回のサンプルはGitHubにて公開しています。手順がわからなければダウンロードして参考にしてください。

サンプルファイル

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

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

▲Node.jsは公式サイトから無料でダウンロードできる。今回は「v9.7」を使って解説する。

2. Electronのインストール

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

npm i -D electron

※Electronを-gオプションを使ってグローバルにインストールするよう説明している解説記事もありますが、オススメできません。グローバルにインストールするとプロジェクト（案件）ごとに異なるElectronのバージョンが使えなかったり、開発者間でElectronのバージョンが異なるといったリスクが考えられます。環境構築はプロジェクトフォルダー単位で構築するのがいいでしょう。

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

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

▼ package.json

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

{
  "main": "main.js"
}

▼ main.js

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

// アプリケーション作成用のモジュールを読み込み
const {app, BrowserWindow} = require('electron');

// メインウィンドウ
let mainWindow;

function createWindow() {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 800, height: 600,
  });

  // メインウィンドウに表示するURLを指定します
  // （今回はmain.jsと同じディレクトリのindex.html）
  mainWindow.loadFile('index.html');

  // デベロッパーツールの起動
  mainWindow.webContents.openDevTools();

  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

//  初期化が完了した時の処理
app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
app.on('activate', () => {
  // メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

▼ index.html

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

<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>

たくさんファイルを作ったのでややこしいのでフォルダーを再確認しておきましょう。package.jsonが2つ存在しますが、それぞれ役割が異なります。

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

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

①フォルダーを移動するコマンドを入力

cd プロジェクトフォルダへのパス(FirstApp)

②実行するコマンドを入力

npx electron ./src

5. パッケージング

前章で HTMLをアプリケーションとして実行することが可能となりましたが、他の人へアプリとして配布するには.exeファイルや.appファイルにするためのパッケージング作業が必要となります。アプリケーションのパッケージングには「electron-packager」を使用すると簡単です。

1. コマンドラインを立ち上げ、以下のコマンドを実行してelectron-packagerをインストールします。コマンドラインを入力するのはFirstAppフォルダーの直下です。srcフォルダーでは実行しないようにしてください。

npm i -D electron-packager

2. パッケージングを実行します。

macOS(darwin)向けアプリケーションを作るときのコマンド

npx electron-packager src FirstApp --platform=darwin --arch=x64 --overwrite

Windows向けアプリケーションを作るときのコマンド

npx electron-packager src FirstApp --platform=win32 --arch=x64 --overwrite

上記のコマンドは、『srcというディレクトリに入っているソースコードをFirstAppというアプリケーション名で64ビット向けにパッケージングし、2回目以降は上書きを行う』という命令となります。アプリケーションのappファイルの作成にはmacOSを利用し、exeファイルの作成にはWindowsを利用するのがいいでしょう。

※ macOSからWindows向けのビルドを行う際はWineというmacOS上でWindowsアプリケーションを動かすためのプログラム群が必要です。
※ その他パラメーター・詳しい使い方はelectron-packager公式ページの「usage」をご参照ください。

3. パッケージングに成功すると、プラットフォームごとにフォルダーに入ったアプリケーションが作成されます。配布するときはこのフォルダーをZIPファイルに圧縮して提供するといいでしょう。

開発TIPS: コマンドはnpm scriptsに書くのがオススメ

コマンドを実行するときにnpx electron ./srcと毎回入力するのは手間なので、npm scriptsを使うことを強くオススメします。npm scriptsはコマンドのショートカットのようなもの。package.jsonファイルのscriptsの項目に次のようにコマンドを書いておきます。

▼package.json

{
  "scripts": {
    "start": "electron ./src",
    "build-macOS": "electron-packager ./src FirstApp --platform=darwin --arch=x64 --overwrite",
    "build-windows": "electron-packager ./src FirstApp --platform=win32 --arch=x64 --overwrite"
  },
  "devDependencies": {
    "electron": "^4.1.4",
    "electron-packager": "^13.1.1"
  },
  "private": true
}

※package.jsonファイル内のnameやlisenceなど不要な情報は消してしまって大丈夫です。

こうすればコマンドでnpm run startと入力するだけでElectronを実行できます。ビルドしたいときはnpm run build-macと入力するだけ。コマンドの引数など長くて入力するのは大変なので、package.jsonファイルに書くのがいいでしょう。npm scriptsの使い方は記事「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ」に詳しくまとめています。

おまけ - デバッグ方法

Chromiumクロミウムをベースとしているため、「Chrome Developer Tools」を使用できます。electronコマンドで実行した場合のメニューから[View]→[Toggle Developer Tools]を選択することでDevToolの表示を切り替えられます。

はじめて起動した場合、アプリケーションのウィンドウ内部にDeveloper Toolsが表示されて不便なので、右上の切り替えアイコンを長押しして別ウィンドウモードに切り替えておきましょう。また、詳しい使い方は「Chrome DevTools Overview」を確認すると良いでしょう。

まとめ

アプリケーション化まであっけなく実行できたのではないでしょうか。Electronを使用すればデスクトップアプリケーションをサクッと作れます。解説は続編記事「テキストエディターを作ってElectronの基礎を学ぼう」へ続きます。

参考情報：類似技術との比較から見えてくるElectronの利点

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

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

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

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

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

※この記事が公開されたのは4年12ヶ月前ですが、 2019年9月30日に内容をメンテナンスしています。