2015-06-07 06:52:19 +00:00
# クイックスタート
2016-01-10 18:59:05 +00:00
Electron ではリッチなネイティブ API を持ったランタイムを提供することによってピュアな JavaScript でデスクトップアプリケーションをつくることができます。ウェブサーバーの代わりにデスクトップアプリケーションに焦点をあてた Node.js ランタイムであるといえばわかりやすいかもしれません。
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
Electron は JavaScript を GUI ライブラリにバインディングしません。その代わりに、Electron はウェブページを GUI として使用します。なので Electron は JavaScript によってコントロールされる最小のChromium ブラウザでもあるともいえます。
2015-06-07 06:52:19 +00:00
### メインプロセス
2016-01-10 18:59:05 +00:00
Electron では、`package.json` の `main` スクリプトで実行されるプロセスを __メインプロセス__ と呼びます。メインプロセスで実行されるスクリプトがウェブページを作ることによって GUI を表示することができます。
2015-06-07 06:52:19 +00:00
### レンダラープロセス
2016-01-10 18:59:05 +00:00
Electron はウェブページを表示させるために Chromium を使用しているので、Chromium のマルチプロセスアーキテクチャも使用されることになります。Electron で実行されるウェブページはそれぞれ自身のプロセスで実行されます。それを __レンダラープロセス__ と呼びます。
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
通常のブラウザでは、ウェブページはサンドボックス環境で実行されネイティブなリソースへのアクセスができません。Electron ではウェブページから Node.js の API を使えるためオペレーティングシステムと低レベルなやりとりが可能です。
2015-06-07 06:52:19 +00:00
2015-09-03 08:19:12 +00:00
### メインプロセスとレンダラープロセスの違い
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
メインプロセスは `BrowserWindow` インスタンスを作ることによってウェブページをつくります。それぞれの `BrowserWindow` インスタンスはそれ自身のレンダラープロセス上でウェブページを実行します。`BrowserWindow` インスタンスが破棄されると、対応するレンダラープロセスも終了されます。
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
メインプロセスはすべてのウェブページとそれに対応するレンダラープロセスを管理しています。それぞれのレンダラープロセスは隔離されているので、自身の中で実行されているウェブページの面倒だけをみます。
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
ウェブページでは、GUI 関連の API を呼ぶことはできません。なぜならば、ウェブページからネイティブ GUI リソースを扱うことは非常に危険であり、簡単にリソースをリークしてしまうからです。もしウェブページ内でGUI を操作したい場合には、ウェブページのレンダラープロセスはメインプロセスにそれらの操作をするように伝える必要があります。
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
Electron では、メインプロセスとレンダラープロセスとのコミュニケーションをするために [ipc ](../api/ipc-renderer.md ) モジュールを提供しています。またそれと、RPC 形式の通信を行う [remote ](../api/remote.md ) モジュールもあります。
2015-06-07 06:52:19 +00:00
2017-01-23 02:35:06 +00:00
Electron では、メインプロセスとレンダラープロセスとのコミュニケーションをするには幾つかの方法があります。メッセージを送信する[`ipcRenderer`](../api/ipc-renderer.md)モジュールと[`ipcMain`](../api/ipc-main.md)モジュールのように、RPC 形式の通信を行う[remote](../api/remote.md)モジュールです。[ウェブページ間のデータを共有する方法][share-data]にFAQエントリーがあります。
2016-02-21 15:59:18 +00:00
2015-06-07 06:52:19 +00:00
## Electronアプリを作成する
2016-01-10 18:59:05 +00:00
一般的に Electron アプリの構成は次のようになります：
2015-06-07 06:52:19 +00:00
```text
your-app/
├── package.json
├── main.js
└── index.html
```
2016-01-10 18:59:05 +00:00
`package.json` の形式は Node モジュールとまったく同じです。 `main` フィールドで指定するスクリプトはアプリの起動スクリプトであり、メインプロセスを実行します。 `package.json` の例は次のようになります：
2015-06-07 06:52:19 +00:00
2016-10-03 22:48:04 +00:00
```javascripton
2015-06-07 06:52:19 +00:00
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
```
2016-01-10 18:59:05 +00:00
__注記__： `package.json` に `main` が存在しない場合、Electron は `index.js` のロードを試みます。
2015-06-07 06:52:19 +00:00
`main.js` ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります：
```javascript
2016-10-03 03:47:16 +00:00
const electron = require('electron')
2016-05-20 12:20:53 +00:00
// アプリケーションを操作するモジュール
2016-10-03 03:47:16 +00:00
const {app} = electron
2016-05-20 12:20:53 +00:00
// ネイティブブラウザウィンドウを作成するモジュール
2016-10-03 03:47:16 +00:00
const {BrowserWindow} = electron
2016-05-20 12:20:53 +00:00
// ウィンドウオブジェクトをグローバル参照をしておくこと。
// しないと、ガベージコレクタにより自動的に閉じられてしまう。
2016-10-03 03:47:16 +00:00
let win
2016-05-20 12:20:53 +00:00
2016-10-03 03:47:16 +00:00
function createWindow () {
2016-05-20 12:20:53 +00:00
// ブラウザウィンドウの作成
2016-10-03 03:47:16 +00:00
win = new BrowserWindow({width: 800, height: 600})
2016-05-20 12:20:53 +00:00
// アプリケーションのindex.htmlの読み込み
2016-10-03 03:47:16 +00:00
win.loadURL(`file://${__dirname}/index.html`)
2016-05-20 12:20:53 +00:00
// DevToolsを開く
2016-10-03 03:47:16 +00:00
win.webContents.openDevTools()
2016-05-20 12:20:53 +00:00
// ウィンドウが閉じられた時に発行される
win.on('closed', () => {
2016-10-03 22:48:04 +00:00
// ウィンドウオブジェクトを参照から外す。
// もし何個かウィンドウがあるならば、配列として持っておいて、対応するウィンドウのオブジェクトを消去するべき。
2016-10-03 03:47:16 +00:00
win = null
})
2016-05-20 12:20:53 +00:00
}
// このメソッドはElectronが初期化を終えて、ブラウザウィンドウを作成可能になった時に呼び出される。
// 幾つかのAPIはこのイベントの後でしか使えない。
2016-10-03 03:47:16 +00:00
app.on('ready', createWindow)
2016-05-20 12:20:53 +00:00
// すべてのウィンドウが閉じられた時にアプリケーションを終了する。
app.on('window-all-closed', () => {
2016-06-18 13:26:26 +00:00
// macOSでは、Cmd + Q(終了)をユーザーが実行するまではウィンドウが全て閉じられても終了しないでおく。
2016-05-20 12:20:53 +00:00
if (process.platform !== 'darwin') {
2016-10-03 03:47:16 +00:00
app.quit()
2015-06-07 06:52:19 +00:00
}
2016-10-03 03:47:16 +00:00
})
2015-06-07 06:52:19 +00:00
2016-05-20 12:20:53 +00:00
app.on('activate', () => {
2016-06-18 13:26:26 +00:00
// macOS では、ドックをクリックされた時にウィンドウがなければ新しく作成する。
2016-05-20 12:20:53 +00:00
if (win === null) {
2016-10-03 03:47:16 +00:00
createWindow()
2016-05-20 12:20:53 +00:00
}
2016-10-03 03:47:16 +00:00
})
2016-05-20 12:20:53 +00:00
// このファイルでアプリケーション固有のメインプロセスのコードを読み込むことができる。
// ファイルを別に分けておいてここでrequireすることもできる。
2015-06-07 06:52:19 +00:00
```
2016-05-20 12:20:53 +00:00
最後に、表示するウェブページ `index.html` は次のようになります：
2015-06-07 06:52:19 +00:00
```html
<!DOCTYPE html>
< html >
< head >
2016-01-10 18:59:05 +00:00
< meta charset = "UTF-8" >
2015-06-07 06:52:19 +00:00
< title > Hello World!< / title >
< / head >
< body >
< h1 > Hello World!< / h1 >
2016-01-10 18:59:05 +00:00
We are using node < script > document . write ( process . versions . node ) < / script > ,
Chrome < script > document . write ( process . versions . chrome ) < / script > ,
and Electron < script > document . write ( process . versions . electron ) < / script > .
2015-06-07 06:52:19 +00:00
< / body >
< / html >
```
## アプリを実行する
2016-01-10 18:59:05 +00:00
最初の `main.js` 、`index.html`、`package.json` を作ったら、手元でアプリを実行し、思った通りに動くのを確認したいでしょう。
### electron-prebuilt
2016-05-20 12:20:53 +00:00
[`electron-prebuilt` ](https://github.com/electron-userland/electron-prebuilt )は、コンパイル済みのElectronを含んだ`npm`モジュールです。
`npm` でグローバルインストールをしているなら、下記のコマンドをアプリケーションのソースディレクトリで実行するだけで済みます。
2015-06-07 06:52:19 +00:00
2016-01-10 18:59:05 +00:00
```bash
electron .
```
ローカルにインストールしているなら以下を実行してください：
```bash
./node_modules/.bin/electron .
```
### 手動ダウンロードした Electron バイナリを使う場合
もしも Electron を手動ダウンロードしているなら、同梱されているバイナリであなたのアプリを直接実行できます。
#### Windows
2015-06-07 06:52:19 +00:00
```bash
$ .\electron\electron.exe your-app\
```
2016-01-10 18:59:05 +00:00
#### Linux
2015-06-07 06:52:19 +00:00
```bash
$ ./electron/electron your-app/
```
2016-06-18 13:26:26 +00:00
#### macOS
2015-06-07 06:52:19 +00:00
```bash
$ ./Electron.app/Contents/MacOS/Electron your-app/
```
2016-03-31 23:49:59 +00:00
`Electron.app` は Electron のリリースパッケージの一部で、[ここ](https://github.com/electron/electron/releases) からダウンロードできます。
2016-01-10 18:59:05 +00:00
### Run as a distribution
アプリケーションを作り終えたら、[Application distribution](./application-distribution.md) ガイドにしたがってディストリビューションを作成し、そしてパッケージされたアプリケーションとして実行することが可能です。
### 試してみよう
2016-03-31 23:49:59 +00:00
このチュートリアルのコードは [`atom/electron-quick-start` ](https://github.com/electron/electron-quick-start ) リポジトリから clone して実行できます。
2016-01-10 18:59:05 +00:00
**注記**：例を試すには、[Git](https://git-scm.com) と [Node.js ](https://nodejs.org/en/download/ ) ([npm](https://npmjs.org) もこれに含まれています) が必要です。
```bash
# Clone the repository
2016-03-31 23:49:59 +00:00
$ git clone https://github.com/electron/electron-quick-start
2016-01-10 18:59:05 +00:00
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install & & npm start
```
2016-02-21 15:59:18 +00:00
[share-data]: ../faq/electron-faq.md#how-to-share-data-between-web-pages
