SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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がエントリーポイントになるため細かい制御がやりやすいなどの違いがあります。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Electronの仕組み

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

森 和之(モリ カズユキ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8782 2015/07/02 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング