Electronの仕組み
ElectronはNode.jsでプログラミングできるChromiumブラウザです。初期化プロセスもブラウザと同じような手順を踏みます。
Electronが起動すると、一番大本のBrowserプロセスが呼び出されます。
次に、Browserプロセスが各ウィンドウ（Rendererプロセス）を生成します。各RendererプロセスとはIPC（プロセス間通信）でやりとりします。BrowserプロセスからRendererプロセスへ、「file:// からはじまるこのHTMLを呼びなさい」という命令が伝えられ、RendererプロセスがGUIをHTMLで描画するというのが一連の初期化プロセスです。Renderer1プロセスが、ブラウザでいう1つのタブにあたります。
Node.jsとElectronの統合
ElectronはどのようにNode.js[1]をChromiumを動かしているのでしょうか。ちょっと詳しく見てみましょう。Node.jsのイベントループは以下のようになります。
対する、WindowsやMacのGUIのイベントループはこのようになっています。
ElectronはNode.jsのイベントループを各プラットフォーム（Win、Mac、Linux）のGUIイベントループと統合し、IO pollだけ外部に出し、IPCで通信するようにChromiumにハックを仕込んでJavaScriptでGUIウィンドウを操作出来るようにしているのです。
さらに、Electronはビルド高速化のために、様々な工夫をしています。ChromiumはChromeのオープンソース版で、非常に大きく複雑なプロジェクトなので、ビルドするだけで数十分かかってしまいます。そのため、Electronは、Chromiumをモジュール単位であらかじめビルドしておいて、libchromiumcontentという単一の共有ライブラリから、Chromium Content APIへのバインディングを用意することで、ビルドの高速化とクロスプラットフォームビルドを実現しています。
[1] Electronで動いているのは実はNode.jsのフォーク版のio.jsですが、今回はNode.jsで統一しています。
Electronの問題
Electronは開発が非常に活発です。ほぼ3日ごとに新しいバージョンがリリースされます。バグはまだまだありますが、基本的な部分は安定して動きます。
Electronでは、JavaScriptはNode.js上で動作します。common-jsスタイルのrequireが使えるため、ライブラリによっては、Node.jsで動くことを想定してない場合があるかもしれません。そういう場合はnode-integration: falseを指定するとよいでしょう。
デフォルトでは、HTMLをfile:// スキーマで表示するため、Chromeのサンドボックス機能がoffになり、ローカルのファイルにアクセスできてしまいます。外部のウェブサイトにアクセスする場合は、
また、配布バイナリサイズが結構大きいです。ZIPで30MB、バイナリ単体が100MBのファイルサイズになります。
まとめ
Electronは開発元が有名なGitHub社であり、AtomやSlackなどの有名プロダクトに採用され非常に注目度が高く、開発も盛んです。
クロスブラウザに対応しなくてはならないWebアプリとは違って、Chromiumだけを対象にすれば良いため、HTML5の機能をフルに使えます。また、ビルドも速く、ランタイムも不要なため、気軽にデスクトップアプリを作って配布できます。バイナリ連携が出来るため、社内用開発ツールを作るのにもよいでしょう。
Node.jsを使ったことがある人にとってはすごく簡単です。逆に使ったことがない人にとってはNode.jsが邪魔になることもあるかもしれません。ファイルサイズが大きい問題もありますが、インターネットが高速化した時代なら問題にならないのかもしれません。
Webアプリケーションをそのままクロスプラットフォームのデスクトップアプリにできるというのは、プロダクションアプリに限らず、ゲームや、業務アプリなど、幅広い活用法があります。
次回からは、Electronの実行環境構築と簡単なサンプルアプリを作っていきます。それでは、良いElectronライフを！
