131 lines
6.3 KiB
Markdown
131 lines
6.3 KiB
Markdown
# クイックスタート
|
||
|
||
## 導入
|
||
|
||
ElectronではリッチなネイティブAPIを持ったランタイムを提供することによってピュアなJavaScriptでデスクトップアプリケーションをつくることができます。ウェブサーバーの代わりにデスクトップアプリケーションに焦点をあてたio.jsランタイムであるといえばわかりやすいかもしれません。
|
||
|
||
ElectronはJavaScriptをGUIライブラリにバインディングしません。その代わりに、ElectronはウェブページをGUIとして使用します。なのでElectronはJavaScriptによってコントロールされる最小のChromiumブラウザでもあるともいえます。
|
||
|
||
### メインプロセス
|
||
|
||
Electronでは、`package.json` の `main`で実行されるプロセスを __メインプロセス__ と呼びます。メインスクリプトではGUIにウェブページを表示することができるプロセスを実行します。
|
||
|
||
### レンダラープロセス
|
||
|
||
Electronはウェブページを表示させるためにChromiumを使用しているので、Chromiumのマルチプロセスアーキテクチャが使用されることになります。Electronで実行されるウェブページはそれぞれ自身のプロセスで実行されます。それを __レンダラープロセス__ と呼びます。
|
||
|
||
通常、ブラウザのウェブページはサウンドボックス環境で実行されネイティブなリソースへのアクセスができません。Electronではウェブページからio.jsのAPIを使って、ネイティブリソースへの権限が与えられます。そのおかげでウェブページの中からJavaScriptを使って低レベルなオペレーティングシステムとのインタラクションが可能になります。
|
||
|
||
### メインプロセスとリレンダラープロセスの違い
|
||
|
||
メインプロセスは `BrowserWindow` インスタンスを作ることによってウェブページをつくります。それぞれの `BrowserWindow` インスタンスはそれ自身の リレンダラープロセス上でウェブページを実行します。`BrowserWindow` インスタンスが破棄されると、対応するリレンダラープロセスも終了されます。
|
||
|
||
メインプロセスはすべてのウェブページとそれに対応するリレンダラープロセスを管理しています。それぞれのリレンダラープロセスは分離しているのでウェブページで実行されていることだけを気に留めておいてください。
|
||
|
||
ウェブページでは、GUI関連のAPIを呼ぶことはできません。なぜならば、ウェブページで管理しているネイティブのGUIリソースは非常に危険で簡単にリークしてしまうからです。もしウェブページ内でGUIを操作したい場合には、メインプロセスと通信をする必要があります。
|
||
|
||
Electronでは、メインプロセスとリレンダラープロセスとのコミュニケーションをするために[ipc](../api/ipc-renderer.md)モジュールを提供しています。またそれと、RPC形式の通信を行う[remote](../api/remote.md)モジュールもあります。
|
||
|
||
## Electronアプリを作成する
|
||
|
||
一般的に Electronアプリの構成は次のようになります：
|
||
|
||
```text
|
||
your-app/
|
||
├── package.json
|
||
├── main.js
|
||
└── index.html
|
||
```
|
||
|
||
`package.json`の形式はNodeモジュールとまったく同じです。 `main` フィールドでアプリを起動するためのスクリプトを特定し、メインプロセスで実行します。 `package.json`の例は次のようになります：
|
||
|
||
```json
|
||
{
|
||
"name" : "your-app",
|
||
"version" : "0.1.0",
|
||
"main" : "main.js"
|
||
}
|
||
```
|
||
|
||
`main.js` ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります：
|
||
|
||
```javascript
|
||
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 Electron 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');
|
||
|
||
// Open the devtools.
|
||
mainWindow.openDevTools();
|
||
|
||
// 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`は次のようになります：
|
||
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Hello World!</title>
|
||
</head>
|
||
<body>
|
||
<h1>Hello World!</h1>
|
||
We are using io.js <script>document.write(process.version)</script>
|
||
and Electron <script>document.write(process.versions['electron'])</script>.
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## アプリを実行する
|
||
|
||
アプリケーションを作り終えたら、[Application distribution](./application-distribution.md)ガイドにしたがってディストリビューションを作成します、そしてパッケージされたアプリケーションとして配布することが可能です。またダウンロードしたElectronのバイナリをアプリケーション・ディレクトリを実行するために利用することもできます。
|
||
|
||
Windowsの場合：
|
||
|
||
```bash
|
||
$ .\electron\electron.exe your-app\
|
||
```
|
||
|
||
Linuxの場合：
|
||
|
||
```bash
|
||
$ ./electron/electron your-app/
|
||
```
|
||
|
||
OS Xの場合：
|
||
|
||
```bash
|
||
$ ./Electron.app/Contents/MacOS/Electron your-app/
|
||
```
|
||
|
||
`Electron.app` はElectronのリリースパッケージに含まれており、[ここ](https://github.com/atom/electron/releases) からダウンロードできます。
|