Essential Electron

Electronについての簡潔で飾らない話

Background
Electronとは?
なぜ重要?
では、どうやって?
開発はどのように?
Development
前提条件
2つのプロセス
メインプロセス
レンダラプロセス
こう考えてみよう
Development Cont'd
通信を絶やさない
プロセスはひとまとめに
クイックスタート
パッケージ化
さらに

electronとは?

ElectronはJavaScript、HTML、CSSを使ってデスクトップアプリケーションを作ることができるライブラリです。作ったアプリケーションはMac、Windows、Linuxで動かせます。

次は:なぜ重要?

定義:

参考資料

なぜ重要?

一般に、デスクトップアプリケーションは各オペレーティングシステムのネイティブ言語で書かれています。ということは、アプリケーション1つに、3つのバージョンを書く3つのチームが必要になるかもしれません。ElectronならばWebページ用の言語を使って、アプリケーションを1回作れば済みます。

次は:では、どうやって?

定義:

では、どうやって?

ElectronはChromiumNode.jsを、ファイルオープンのダイアログボックス、通知、アイコンなどといったOS固有の機能向けの一連のカスタムAPIに、結びつけています。

Electron components 注釈: Chromium/Webページ作成用 Node.js/ファイルシステムとネットワーク用 ネイティブAPI/3つのOS用

次は: 開発はどのように?

定義:

参考資料:

開発はどのように?

Electronによる開発は、シームレスにNodeを利用できるWebページを構築するようなものです。あるいは、HTMLやCSSでインターフェースを作成できるようなNodeのアプリケーションを構築するようなものと言えます。その上、単一のブラウザ、つまり最新のChromeだけに対して設計すればよいようになっています。

次は:前提条件

定義:

参考資料:

前提条件

Electronには、WebサイトとJavaScriptという2つの構成要素があります。そのため、開発に着手する前に、その2つをよく知っておく必要があります。HTML、CSS、JavaScriptに関するチュートリアル等を確認して、自分のコンピュータにNodeをインストールしておいてください。

定義:

次は:2つのプロセス

参考資料:

2つのプロセス

Electronには、メインとレンダラという2種類のプロセスがあります。そして、それぞれ、または両方のプロセスで稼働するモジュールがあります。レンダラプロセスが、アプリケーションにおける各ウィンドウであるのに対して、メインプロセスは、どちらかというと背後に隠れているプロセスです。

定義:

次は:メインプロセス

参考資料:

メインプロセス

メインプロセス(一般的に、main.jsという名前のファイルです)は、あらゆるElectronアプリケーションにおけるエントリーポイントとなります。オープンからクローズまで、アプリケーションの生命を管理します。メインプロセスはまた、ネイティブな要素を呼び出し、それぞれの新たなレンダラプロセスをアプリケーション内に作成します。メインプロセスには完全なNode APIがビルトインされています。

main process diagram

注釈:メインプロセス 取得する内容

一般的なタスク

定義:

次は:レンダラプロセス

参考資料:

レンダラプロセス

レンダラプロセスは、アプリケーションにおけるブラウザウィンドウです。メインプロセスとは異なり、複数のプロセスの存在が可能で、それぞれが独立しています。またレンダラプロセスは隠すこともできます。通常レンダラプロセスはindex.htmlという名前です。これは典型的なHTMLのファイルのようですが、Webブラウザとは異なり、Electronでは全てのNode APIを利用できます。

renderer process diagram 注釈:レンダラプロセス

取得する内容

一般的なタスク:

定義:

次は:こう考えてみよう

参考資料:

こう考えてみよう

Chrome(または別のWebブラウザ)における各タブ・各Webページは、Electronにおけるレンダラプロセス1つに相当します。Chromeの全タブを閉じてもChromeが残っている状態がElectronのメインプロセスに似ていて、新しいウィンドウを開いたり、アプリケーションを終えたりすることができます。

Chrome comparison of the two processes 注釈:メインプロセス、レンダラプロセス

参考資料:

次は:通信を絶やさない

通信を絶やさない

メインプロセスとレンダラプロセスは、それぞれ違うタスクに責任を負っていることから、互いに通信可能であることが必要です。そのためにプロセス間通信(IPC)があります。IPCを用いて、メインプロセスとレンダラプロセス間でメッセージをやり取りします。

IPC diagram 注釈:プロセス間でメッセージを送る

定義:

次は:プロセスはひとまとめに

プロセスはひとまとめに

ElectronアプリケーションはNodeアプリケーションと同様に、package.jsonファイルを使います。そこでどのファイルがメインプロセスか、すなわち、どこでElectronにアプリケーションをスタートさせるかを定義させています。そしてメインプロセスはレンダラプロセスを作り、IPCを用いて2つのプロセス間でメッセージを送ることができます。

Electron app components diagram 注釈:1. アプリの開始ポイントを決める。2. アプリを起動し、レンダラプロセスを作成する。3. アプリのインターフェースをレイアウトし整える。4. IPCを用いてメインプロセスでタスクを実行し、情報を得る。

定義:

次は:クイックスタート

クイックスタート

Electronクイックスタートリポジトリはpackage.jsonmain.jsそしてindex.htmlによる最小構成のElectronアプリです。ここで学んできたもので、取りかかりには最適です。また選択したフレームワークでテンプレート用のボイラープレートをチェックしておきましょう。

次は:パッケージ化

参考資料:

パッケージ化

アプリをいったん構築したら、MacやWindowsあるいはLiux用にコマンドラインツールelectron-packagerでパッケージ化することができます。そのためにpackage.jsonにスクリプトを加えます。以下でMacやWindowsのアプリケーションストアでアプリを得るためのリソースを確認してください。

次は:さらに

定義:

参考資料:

さらに

ここでのコンセプトだけで十分、事足りるでしょうが、もちろんまだ学ぶべきことはあります。ここにさらに参考となる情報を記しておきます。

参考資料: