HTML5でクロスプラットフォームなデスクトップアプリケーションができてしまう、Electron(atom-shell)。
SlackのWindows版なんかでも使われているという噂のElectron。
Quick stratを日本語訳してみました。Have Fun!!
Quick start
イントロダクション
ElectronではリッチなネイティブAPIを持ったランタイムを提供することでピュアなJavaScriptでデスクトップアプリケーションの開発を可能にします。Webサーバーの代わりにデスクトップアプリケーションにフォーカスしたio.jsランタイムであるといえばおわかりになるかもしれません。
ElectronはJavaScriptをGUIライブラリにバインディングするものではなく、ElectronはWebページをGUIとして使用します。ですので、ElectronはJavaScriptによってコントロールされる最小のChromiumブラウザでもあるともいえます。
メインプロセス
Electronプロセスはpackage.jsonのメインスクリプトを実行するプロセスをメインプロセスと呼びます。メインスクリプトではGUIにWebページを表示することができるプロセスを実行します。
レンダラープロセス
atom-shellではChromiumをWebページを表示するのに使用しますので、Chromiumのマルチプロセス・アーキテクチャーが使用されることになります。atom-shellで実行されるWebページはそれぞれ自身のプロセスで実行されます。それをレンダラープロセスと呼びます。
標準的なブラウザーはWebページはサンドボックス化された環境の中で実行され、ネイティブなリソースへはアクセスすることができません。atom-shellではWebページからio.jsのAPIを使って、ネイティブリソースへの権限が与えられます。そのことによってWebページの中からJavaScriptを使って、低レベルなオペレーティングシステムとのインタラクションが可能になります。
メインプロセスとレンダラープロセスの違い
メインプロセスはブラウザウィンドウのインスタンスを生成することにより、Webページを生成します。それぞれのブラウザウィンドウのインスタンスはWebページを自身のレンダラープロセスで実行します。ブラウザウィンドウのインスタンスが破棄されると、レンダラープロセスも終了されます。
つまり、メインプロセスはすべてのWebページ、相当するレンダラープロセスを管理し、レンダラープロセスはそれぞれ分離され、レンダラープロセスの中で実行されているWebページについてのみ処理を行います。
Webページの中ではネイティブGUIに関係するAPIを呼び出すことは許されていません。というのも、Webページの中でネイティブGUIのリソースはとても危険で簡単にリークしてしまうからです。もし、GUI操作をWebページの中で行いたい場合、メインプロセスとやり取りする必要があります。
atom-shellではメインプロセスとレンダラープロセスの間を通信するためにipcモジュールが提供されています。それと、RPC形式の通信を行うリモートモジュールもあります。
初めてのatom-shellアプリを書く
一般的にatom-shellアプリの構成は以下のようになります。
your-app/
├── package.json
├── main.js
└── index.html
package.jsonのフォーマットはNodeモジュールのものと全く同じです。スクリプトではmainフィールドでアプリを起動するためのスクリプトを特定し、メインプロセスで実行します。あなたのアプリのpackage.jsonの例は以下のようになります。
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
main.jsではウィンドウを作成し、システムイベントを処理します。典型的な例は次の通りです。
var app = require('app'); // Module to control application life.
var BrowserWindow = require('browser-window'); // Module to create native browser window.
// Report crashes to our server.
require('crash-reporter').start();
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
// This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});
最後に表示したいindex.htmlです。
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script>
and atom-shell <script>document.write(process.versions['atom-shell'])</script>.
</body>
</html>
アプリの実行
アプリを書き終えたら、アプリケーション配布ガイドに従ってディストリビューションを作成し、パッケージされたアプリケーションとして配布できます。またダウンロードしたElectron(atom-shell)バイナリをアプリケーション・ディレクトリを実行するために利用することもできます。
※要するにアプリは後できちんとパッケージにできるし、開発中はダウンロードしてきたのを、そのまま使えばよいって話です。単にatom.exeに上で説明した各種ファイルのサンプルを突っ込んだappフォルダを作って実行すれば動きます。（筆者注）
Windowsでは、
$ .\atom-shell\atom.exe your-app\
Linuxでは、
$ ./atom-shell/atom your-app/
OS Xでは
$ ./Atom.app/Contents/MacOS/Atom your-app/
ここでのAtom.appはatom-shellのリリースパッケージに含まれており、ここからダウンロードできます。