phoenix-powerElectronでGUIアプリ開発

ElectronでHello Worldするまで

Electronは、Javascript, HTML, CSSなどでGUIアプリを開発する補助を行う感じのツールで、テンプレートやクロスコンパイルを用意してくれるので、各種OSのGUIアプリを開発するのがすごく楽な感じです。あくまで使ってみた印象ですが。

調べてみると、クロスプラットフォームデスクトップアプリケーションエンジンというらしいです。なるほど、わからん。

今回は、ElectronのHello Worldするまでと、サンプルアプリをクロスコンパイルされたパッケージを使って配布するまでをやってみたいと思います。

1
2
3
4
5
6
7
$ brew install node

$ npm -g install electron-prebuilt

$ mkdir electron-hello; cd electron-hello

$ npm init -y

package.jsonは最初に読み込むファイルを指定します。

electron-hello/package.json
1
2
3
4
5
{
  "name": "electron-hello",
  "version": "0.0.1",
  "main": "main.js"
}

次に、main.jsを読み込むよう指定したので、そこに基本的な処理を書いていきます。

electron-hello/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var app = require('app');  // アプリケーション作成用モジュールをロード
var BrowserWindow = require('browser-window');

//  クラッシュレポート
require('crash-reporter').start();

var mainWindow = null;

// 全てのウィンドウが閉じたらアプリケーションを終了します。
app.on('window-all-closed', function() {
    app.quit();
});

// アプリケーションの初期化が完了したら呼び出されます。
app.on('ready', function() {
  // メインウィンドウを作成します。
  mainWindow = new BrowserWindow({width: 600, height: 400});

  // メインウィンドウに表示するURLを指定します。
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

ここで、メインウィンドウにindex.htmlを読み込んでいるので、それを作成していきます。

electron-hello/index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Read Us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>

ディレクトリ構造は以下の様な感じ。

1
2
3
4
.
├── main.js
├─index.html
└── package.json

そこで、electron .を実行すると、アプリというか、electronでパッケージが実行されます。

この場合、electronをインストールしているパソコンでは、これで使えますが、そうでない場合は起動しません。

したがって、Electronは、Electronを実行するための各種環境でコンパイルされたパッケージ群をダウンロードして、そこにElectron用にアーカイブ化したファイルを所定の場所に配置することで、アプリとして配布可能にします。クロスコンパイル(正確には違うけど)は、Golangよりも面倒なので、誰か、この処理を簡単にするスクリプト作ってないかな…。

Electron用にアーカイブ化するコマンド

1
2
3
$ npm install -g asar

$ asar pack app.asar

各種環境でコンパイルされたパッケージのダウンロード

https://github.com/atom/electron/releases

1
2
3
4
$ cp app.asar ~/Downloads/electron-v0.33.4-darwin-x64/Electron.app/Contents/Resources/

# これで起動するはずです
$ open ~/Downloads/electron-v0.33.4-darwin-x64/Electron.app

Darwin(Mac)の場合

Darwin(Mac)の場合は、解凍したフォルダ内のElectron.app/Contents/Resources/に置きます。

Linux(Linux)とWin32(Windows)の場合

解凍したフォルダのresources/に置きます。

Electronでサンプルアプリ

既存のTodoアプリでコード・リーディングしてみます。

1
2
3
4
5
6
7
$ git clone https://github.com/k-yamada/todos

$ cd todos

$ npm install

$ electron .

Windowsで実行してみました。

参考:

http://ics-web.jp/lab/archives/7298

http://www.sonix.asia/rd-reports/electron1

http://qiita.com/Quramy/items/a4be32769366cfe55778

今後の方向性としては、React.js, Angular, Mithrilのうちどれか一つと、 Sass, Slim, Bootstrap, Font-Awesomeなどで外観を整えながら、Grunt, Bowerなどで補助しながら使っていきたい感じがします。

https://github.com/sindresorhus/awesome-electron