クイックスタート

Electron ではリッチなネイティブ API を持ったランタイムを提供することによってピュアな JavaScript でデスクトップアプリケーションをつくることができます。ウェブサーバーの代わりにデスクトップアプリケーションに焦点をあてた Node.js ランタイムであるといえばわかりやすいかもしれません。

Electron は JavaScript を GUI ライブラリにバインディングしません。その代わりに、Electron はウェブページを GUI として使用します。なので Electron は JavaScript によってコントロールされる最小のChromium ブラウザでもあるともいえます。

メインプロセス

Electron では、package.json の main スクリプトで実行されるプロセスを メインプロセス と呼びます。メインプロセスで実行されるスクリプトがウェブページを作ることによって GUI を表示することができます。

レンダラープロセス

Electron はウェブページを表示させるために Chromium を使用しているので、Chromium のマルチプロセスアーキテクチャも使用されることになります。Electron で実行されるウェブページはそれぞれ自身のプロセスで実行されます。それを レンダラープロセス と呼びます。

通常のブラウザでは、ウェブページはサンドボックス環境で実行されネイティブなリソースへのアクセスができません。Electron ではウェブページから Node.js の API を使えるためオペレーティングシステムと低レベルなやりとりが可能です。

メインプロセスとレンダラープロセスの違い

メインプロセスは BrowserWindow インスタンスを作ることによってウェブページをつくります。それぞれの BrowserWindow インスタンスはそれ自身のレンダラープロセス上でウェブページを実行します。BrowserWindow インスタンスが破棄されると、対応するレンダラープロセスも終了されます。

メインプロセスはすべてのウェブページとそれに対応するレンダラープロセスを管理しています。それぞれのレンダラープロセスは隔離されているので、自身の中で実行されているウェブページの面倒だけをみます。

ウェブページでは、GUI 関連の API を呼ぶことはできません。なぜならば、ウェブページからネイティブ GUI リソースを扱うことは非常に危険であり、簡単にリソースをリークしてしまうからです。もしウェブページ内でGUI を操作したい場合には、ウェブページのレンダラープロセスはメインプロセスにそれらの操作をするように伝える必要があります。

Electron では、メインプロセスとレンダラープロセスとのコミュニケーションをするために ipc モジュールを提供しています。またそれと、RPC 形式の通信を行う remote モジュールもあります。

Electron では、メインプロセスとレンダラープロセスとのコミュニケーションをするには幾つかの方法があります。メッセージを送信するipcRendererモジュールとipcMainモジュールのように、RPC 形式の通信を行うremoteモジュールです。ウェブページ間のデータを共有する方法にFAQエントリーがあります。

Electronアプリを作成する

一般的に Electron アプリの構成は次のようになります：

your-app/
├── package.json
├── main.js
└── index.html

package.json の形式は Node モジュールとまったく同じです。 main フィールドで指定するスクリプトはアプリの起動スクリプトであり、メインプロセスを実行します。 package.json の例は次のようになります：

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注記： package.json に main が存在しない場合、Electron は index.js のロードを試みます。

main.js ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります：

const electron = require('electron')
// アプリケーションを操作するモジュール
const {app} = electron
// ネイティブブラウザウィンドウを作成するモジュール
const {BrowserWindow} = electron

// ウィンドウオブジェクトをグローバル参照をしておくこと。
// しないと、ガベージコレクタにより自動的に閉じられてしまう。
let win

function createWindow () {
  // ブラウザウィンドウの作成
  win = new BrowserWindow({width: 800, height: 600})

  // アプリケーションのindex.htmlの読み込み
  win.loadURL(`file://${__dirname}/index.html`)

  // DevToolsを開く
  win.webContents.openDevTools()

  // ウィンドウが閉じられた時に発行される
  win.on('closed', () => {
    // ウィンドウオブジェクトを参照から外す。
    // もし何個かウィンドウがあるならば、配列として持っておいて、対応するウィンドウのオブジェクトを消去するべき。
    win = null
  })
}

// このメソッドはElectronが初期化を終えて、ブラウザウィンドウを作成可能になった時に呼び出される。
// 幾つかのAPIはこのイベントの後でしか使えない。
app.on('ready', createWindow)

// すべてのウィンドウが閉じられた時にアプリケーションを終了する。
app.on('window-all-closed', () => {
  // macOSでは、Cmd + Q(終了)をユーザーが実行するまではウィンドウが全て閉じられても終了しないでおく。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // macOS では、ドックをクリックされた時にウィンドウがなければ新しく作成する。
  if (win === null) {
    createWindow()
  }
})

// このファイルでアプリケーション固有のメインプロセスのコードを読み込むことができる。
// ファイルを別に分けておいてここでrequireすることもできる。

最後に、表示するウェブページ index.html は次のようになります：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

アプリを実行する

最初の main.js、index.html、package.json を作ったら、手元でアプリを実行し、思った通りに動くのを確認したいでしょう。

electron-prebuilt

electron-prebuiltは、コンパイル済みのElectronを含んだnpmモジュールです。

npmでグローバルインストールをしているなら、下記のコマンドをアプリケーションのソースディレクトリで実行するだけで済みます。

electron .

ローカルにインストールしているなら以下を実行してください：

./node_modules/.bin/electron .

手動ダウンロードした Electron バイナリを使う場合

もしも Electron を手動ダウンロードしているなら、同梱されているバイナリであなたのアプリを直接実行できます。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app は Electron のリリースパッケージの一部で、ここ からダウンロードできます。

Run as a distribution

アプリケーションを作り終えたら、Application distribution ガイドにしたがってディストリビューションを作成し、そしてパッケージされたアプリケーションとして実行することが可能です。

試してみよう

このチュートリアルのコードは atom/electron-quick-start リポジトリから clone して実行できます。

注記：例を試すには、Git と Node.js (npm もこれに含まれています) が必要です。

# Clone the repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start

results matching ""

    No results matching ""