Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは

Electron基礎入門 ~HTML5でWin/Mac/Linuxのデスクトップアプリを作ろう 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/02 14:00

 本連載は、HTML5でデスクトップアプリを作れる「Electron」の基礎について解説するものです。今回は、実際にElectornを採用しているプロダクトの紹介から、Electornの特徴や、他のクロスプラットフォーム実行環境との比較などについて解説します。

目次

Electronとは

 Electron(旧Atom-Shell)とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。

 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。

 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChromeブラウザやランタイムへの依存なしで、配布してすぐに実行できるネイティブのバイナリを簡単に提供することが出来ます。しかも、単一のソースコードからMac、Windows、Linux対応まで出来てしまいます。

 今回は、そんなElectronの基礎、および他の実行環境との違いを説明したいと思います。

Electronを採用したアプリケーション

 Electronは、GitHub社が開発したWeb開発向けエディタ「Atom」の、ネイティブ部分をSDKとして公開したプロジェクトです。

 また、採用企業が増えているチャットサービス 「Slack」は、Windows版にElectronを採用しています。また、Markdownエディタの 「Kobito」 のデスクトップアプリとしてElectronの採用実績があります。

 SlackやKobitoの他にも、Docker社のDocker GUIや、Microsoft社のVisual Studio Codeなどがユーザー向けに既にElectronを使ったデスクトップアプリを提供しています。他にも、日本で有名ではないですが、以下のプロダクトもElectronを採用しています。

Electronを採用したデスクトップアプリ
Electronを採用したデスクトップアプリ

Electronの特徴

 GUIの制御はJavaScript、GUIの記述はHTML+CSSで、Electron特有の書き方などはありません。普段のHTMLアプリケーションを書くのと同じ書き方ができるので、Web開発者にとってなじみやすいです。さらに、JavaScriptの実行環境はNode.jsなので、npmのパッケージを利用することが出来ます。デバッグは、Chrome上での開発で使い慣れているDevTools(デベロッパーツール)を使えます。

 メニュー、クリップボード、ファイル、オートアップデート(Macのみ)などのネイティブとの連携も用意されています。

 Shellで動くようなバイナリとの連携も出来るため、プログラマーが片手間に作った自動化ツールを、デスクトップアプリに簡単に変換して、プログラマー以外でも自動化の恩恵を得るような社内ツールを作ってみるのもいいでしょう。

 普通のウェブアプリケーションでは、一部のブラウザでHTML5の特定の機能が使えない場合がありますが、ElectronはChromiumを内蔵しているため、他のブラウザの制限や制約を気にする事なく、Chromiumだけを対象に思う存分HTML5の機能を使うことが出来ます。

 例えば、ECMAScript 6を今すぐ使えるようにするBabelやTraceurでコードを書いたり、WebGLをバリバリ使ったり出来ます。

他のフレームワークとの違い

 WindowsとMacとLinux向けのアプリケーションを同じソースコードから作る、いわゆるクロスプラットフォーム実行環境として代表的なものは、いくつかの選択肢があります。

 代表的なQt、Adobe AIRをElectronと比べてみましょう。

Qt、Adobe AIR、Electronの比較
名前 対応プラットフォーム 言語 ランタイム
Qt Win、Mac、Linux C++ ランタイム不要
Adobe AIR Win、Mac ActionScript+MXML Adobe AIRが必要
Electron Win、Mac、Linux JavaScript+HTML+CSS ランタイム不要

 Qtはランタイムが不要の代わりに、C++で記述します。C++はちょっとしたツールを作る用途には向きません。GUIデザインも独自ツールを使用します。デザイナーにQtのツールを覚えてもらう必要があるため、デザイナーとの分業も難しいです。

 この他にも、HTML5で作られたアプリケーションの実行環境として、Chrome Apps、nw.js(旧node-webkit)があります。

 Chrome Appsは、Chrome上で動作するため、あらかじめChromeのインストールが必須となります。また、あらかじめ許可されたドメインにしかアクセス出来ず、バックグラウンドタスクでもChromeのフルセットが動作している必要があるためメモリ消費が激しいという欠点があります。一方、Electronでは、最小環境に固めたChromiumを内蔵しているため、ランタイムのいらない独立したアプリとして動作します。また、あらかじめ許可されたドメイン以外にもアクセスすることが出来ます。

 nw.jsは、Electronの兄弟のようなプロジェクトです。nw.jsの開発者がElectronにもコミットしており、コミュニケーションも活発なようです。ほとんど相違点は無いですが、nw.jsでは、アプリのビルド時に毎回Chromiumにパッチを当てるためビルドが遅い、エントリーポイントがnw.jsではHTMLになるが、ElectronではJavaScriptがエントリーポイントになるため細かい制御がやりやすいなどの違いがあります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 森 和之(モリ カズユキ)

     フロントエンドからバックエンドまで開発する猫エンジニア。  2007年に株式会社ミクシィに最初の新卒として入社。mixiアプリ・mixiプラットフォームのプロジェクト立ち上げから開発に携わった。  スタートアップに関わった後、トップゲート社に転職し、ユーザーに一番近いところから世界の見方が変わ...

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5