初めてのElectron

Electronを触ってみた。

インストール

npm install electron --save-dev --save-exact

とりあえず動かしてみる

すぐに動かせるelectron-quick-startリポジトリが用意されているので、そちらを使います。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

するとアプリが立ち上がる。

f:id:skanoemon:20170826191601p:plain

動いた。

もう少し深掘り

electron/docs-translations/jp at master · electron/electron · GitHub
公式の日本語ドキュメントを参考にします。

Electronアプリの構成

application-name/
├── LICENSE.md
├── README.md
├── renderer.js
├── package.json
├── main.js
└── index.html

main.js

アプリの起動スクリプト。
BrowserWindowインスタンスを生成してwebページを作る。

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

let mainWindow

function createWindow () {
  // ブラウザウインドウを作成する
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // index.htmlをロードする
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // ウインドウが閉じたら実行する
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

// Electronの初期化が終わったら実行される
app.on('ready', createWindow)

// 全てのwindowが閉じられたら終了する
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

index.html

表示するwebページ。cssも普通に使える。

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

package.json

形式はNodeモジュールと同じ。
mainにアプリの起動スクリプトを設定する。今回はmain.jsという名前のスクリプトがメインプロセスを実行する。

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
　…
}

アプリの実行

./node_modules/.bin/electron .

npmでグローバルインスールしているならelectron .で実行できる。

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

Electronは、メインプロセスとレンダラープロセスの2種類のプロセスがある。

メインプロセス

BrowserWindowインスタンスを作ってwebページを作る。

レンダラープロセス

画面のレンダリングを行う。

2つのプロセスを通信させるために、remoteモジュールが用意されている。 remoteモジュールを使うことで、メインプロセスで処理を実行させることができる。

触ってみた感想

チュートリアルぐらいのことしかしてませんが、すぐ動かせたことに感動。
気軽に導入できるのがいい。

darudaru

だるだるしてるエンジニア