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

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

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

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

※ 本記事はElectron v1.1.3を対象に解説しています

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エンジン

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