Japanese manual: Update tutorials and api

[ci skip]
This commit is contained in:
TAKAHASHI Kyohei 2016-05-20 21:20:53 +09:00
parent 6f3d0e1782
commit 77eb0e8e3f
No known key found for this signature in database
GPG key ID: 8C49E22DA193875B
7 changed files with 185 additions and 116 deletions

View file

@ -1,29 +1,32 @@
#サポートしているChromeコマンドラインスイッチ #サポートしているChromeコマンドラインスイッチ
ElectronでサポートしているChromeブラウザーで使用できるコマンドラインスイッチをこのページで一覧にしています。[app][app]モジュールの[ready][ready]イベントが出力される前にアプリのメインスクリプトに追加するために[app.commandLine.appendSwitch][append-switch]を使えます。 > Electronでサポートされているコマンドラインスイッチ
アプリケーションのメインスクリプトで[app.commandLine.appendSwitch][append-switch]を使うことで、[app][app]モジュールの[ready][ready]イベントが発行される前にコマンドラインスイッチを追加できます。
```javascript ```javascript
const app = require('electron').app; const {app} = require('electron');
app.commandLine.appendSwitch('remote-debugging-port', '8315'); app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1'); app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');
app.on('ready', function() { app.on('ready', () => {
// Your code here // Your code here
}); });
``` ```
## --client-certificate=`path`
クライアントの証明書ファイルの`path`を設定します。
## --ignore-connections-limit=`domains` ## --ignore-connections-limit=`domains`
接続数の制限を無視する`,`で分割した`domains`リスト `domains`で指定されたリストは接続数制限を無視します。リストは`,`で区切られます。
## --disable-http-cache ## --disable-http-cache
HTTPリクエストのディスクキャッシュの無効化。 HTTPリクエストのディスクキャッシュの無効化。
## --disable-http2
HTTP/2 と SPDY/3.1 プロトコルを無効にします。
## --remote-debugging-port=`port` ## --remote-debugging-port=`port`
`port`で指定したHTTP越しのリモートデバッグの有効化。 `port`で指定したHTTP越しのリモートデバッグの有効化。
@ -42,7 +45,8 @@ $ electron --js-flags="--harmony_proxies --harmony_collections" your-app
## --proxy-bypass-list=`hosts` ## --proxy-bypass-list=`hosts`
ホスト一覧をセミコロンで分割したプロキシサーバーをバイパスしてするためにElectronに指示します。このフラグは、`--proxy-server`と同時に使われるときのみに影響します。 プロキシを使用しないサーバーをセミコロンで区切って指定します。
このフラグは、`--proxy-server`と同時に使われるときのみに影響します。
例: 例:
@ -50,7 +54,7 @@ $ electron --js-flags="--harmony_proxies --harmony_collections" your-app
app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com;1.2.3.4:5678') app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com;1.2.3.4:5678')
``` ```
ールアドレス(`localhost`や`127.0.0.1`など)、`google.com`サブドメイン、`foo.com` サフィックスを含むホスト、`1.2.3.4:5678`を除いてすべてのホストでプロキシサーバーが使われます。 ロールアドレス(`localhost`や`127.0.0.1`など)、`google.com`サブドメイン、`foo.com` サフィックスを含むホスト、`1.2.3.4:5678`を除いてすべてのホストでプロキシサーバーが使われます。
## --proxy-pac-url=`url` ## --proxy-pac-url=`url`
@ -58,7 +62,7 @@ app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com
## --no-proxy-server ## --no-proxy-server
プロキシサーバーを使わず、常に直接接続します。遠輝ほかのプロキシサーバーフラグを上書きします。 プロキシサーバーを使わず、常に直接接続します。ほかのプロキシサーバーフラグを上書きします。
## --host-rules=`rules` ## --host-rules=`rules`
@ -105,17 +109,17 @@ TLSフォールバックを許可する最小のSSL/TLSバージョン ("tls1"
不可視のページのレンダラープロセスの優先度を下げることからChromiumを防ぎます。 不可視のページのレンダラープロセスの優先度を下げることからChromiumを防ぎます。
このフラグは、グローバルですべてのレンダラープロセスに有効で、一つのウィンドウだけで無効化したい場合、[playing silent audio][play-silent-audio]をハックして対応します。 このフラグは、グローバルですべてのレンダラープロセスに有効で、一つのウィンドウだけで無効化したい場合、[無音を再生する][play-silent-audio]というハックで対応します。
## --enable-logging ## --enable-logging
コンソールにChromiumのログを出力します。 コンソールにChromiumのログを出力します。
このスイッチは`app.commandLine.appendSwitch` で使えず、アプリがロードされるよりもパースしますが、同じ効果を受けるために`ELECTRON_ENABLE_LOGGING`を環境変数に設定します。 ユーザーのアプリが読み込まれる前に解析されるため、`app.commandLine.appendSwitch`では使用できませんが、`ELECTRON_ENABLE_LOGGING`を環境変数に設定すると同じ効果を得ることができます。
## --v=`log_level` ## --v=`log_level`
既定の最大アクティブなV-loggingレベルが付与されています。0が既定です。通常、正の値はV-loggingレベルに使用されます。 標準のloggingレベルを設定します。0が既定です。通常、V-loggingレベルには正の値が使用されます。
`--enable-logging` が渡された時だけ、このスイッチは動作します。 `--enable-logging` が渡された時だけ、このスイッチは動作します。

View file

@ -1,5 +1,7 @@
# 環境変数 # 環境変数
> アプリケーションの設定や動作を、コードの変更なしで制御します。
コマンドラインやアプリのコードよりも早く初期化されるために、Electronのいくつかの挙動は環境変数がコントロールしています。 コマンドラインやアプリのコードよりも早く初期化されるために、Electronのいくつかの挙動は環境変数がコントロールしています。
POSIX shellでの例: POSIX shellでの例:
@ -47,6 +49,3 @@ Electronがクラッシュしたとき、Windowsのクラッシュダイアロ
Linuxでグローバルメニューバーを使用できません。 Linuxでグローバルメニューバーを使用できません。
## `ELECTRON_HIDE_INTERNAL_MODULES`
`require('ipc')`のような古い組み込みモジュールとの互換モードを無効にします。

View file

@ -1,20 +1,16 @@
# process # process
Electronの`process`オブジェクトは上流nodeの1つから次のような違いがあります > processオブジェクトの拡張
* `process.type` String - プロセスの種類で、`browser` (例 メインプロセス)または `renderer`を設定できます。 Electronの`process`オブジェクトは次のようなAPIで拡張されています。
* `process.versions.electron` String - Electronのバージョン
* `process.versions.chrome` String - Chromiumのバージョン
* `process.resourcesPath` String - JavaScriptのソースコードのパスを設定します。
* `process.mas` Boolean - Mac app Store用のビルドで、値は`true`です。ほかのビルドの場合は`undefined`です。
## イベント ## イベント
### イベント: 'loaded' ### イベント: 'loaded'
Electronは内部の初期化スクリプトをロードしたとき出力され、ウェブページまたはメインスクリプトのロードが始まります。 このイベントはElectronが内部の初期化スクリプトをロードし、ウェブページまたはメインスクリプトのロードが始まるときに発行されます。
Node統合がオフになっているとき、削除したNodeグローバルシンボルをグローバルスコープへ戻してプリロードスクリプトで使用できます。 Node統合がオフになっているとき、削除したNodeグローバルシンボルをグローバルスコープへ戻すために、プリロードスクリプトで使用できます。
```js ```js
// preload.js // preload.js
@ -32,16 +28,73 @@ process.once('loaded', function() {
これを`true`に設定すると、Nodeのビルトインモジュールで、`asar`アーカイブのサポートを無効にできます。 これを`true`に設定すると、Nodeのビルトインモジュールで、`asar`アーカイブのサポートを無効にできます。
### `process.type`
現在のプロセスのタイプで、`"browser"`(例: メインプロセス) または `"renderer"`の値をとります。
### `process.versions.electron`
Electronのバージョン文字列です。
### `process.versions.chrome`
Chromeのバージョン文字列です。
### `process.resourcesPath`
リソースディレクトリのパスです。
### `process.mas`
Mac app Store用のビルドでは値は`true`になります。ほかのビルドの場合は`undefined`です。
### `process.windowsStore`
Windows Store App (appx)として動作中の場合は、値は`true`になります。それ以外では`undefined`です。
### `process.defaultApp`
アプリがdefault appのパラメータとして渡されて起動された場合は、値は`true`になります。
訳注: [issue #4690](https://github.com/electron/electron/issues/4690)が参考になります。
## メソッド ## メソッド
`process`オブジェクトは次のめっそどを持ちます。 `process`オブジェクトは次のメソッドを持ちます。
### `process.crash()`
このプロセスのメインスレッドをクラッシュさせます。
### `process.hang()` ### `process.hang()`
現在のプロセスがハングしているメインスレッドが原因で発生します。 このプロセスのメインスレッドをハングさせます。
### `process.setFdLimit(maxDescriptors)` _OS X_ _Linux_ ### `process.setFdLimit(maxDescriptors)` _OS X_ _Linux_
* `maxDescriptors` Integer * `maxDescriptors` Integer
現在のプロセスで、`maxDescriptors`またはOSハード制限のどちらか低いほうで、ソフトファイルディスクリプターを設定します。 ファイルデスクリプタの最大数のソフトリミットを、`maxDescriptors`かOSのハードリミットの、どちらか低い方に設定します。
### `process.getProcessMemoryInfo()`
本プロセスのメモリ使用統計に関する情報を得ることのできるオブジェクトを返します。全ての報告値はキロバイト単位であることに注意してください。
* `workingSetSize` - 実際の物理メモリに固定されているメモリサイズです。
* `peakWorkingSetSize` - これまでに実際の物理メモリに固定された最大のメモリサイズです。
* `privateBytes` - JS heapやHTML contentなど、他のプロセスに共有されていないメモリサイズです。
* `sharedBytes` - プロセス間で共有されているメモリサイズです。例えばElectronそのものにより使用されたメモリがこれに当たります。
### `process.getSystemMemoryInfo()`
システム全体で使用されているメモリ使用統計に関する情報を得ることのできるオブジェクトを返します。全ての報告値はキロバイト単位であることに注意してください。
* `total` - システムで使用可能な全ての物理メモリのサイズ(KB)です。
* `free` - アプリケーションやディスクキャッシュで使用されていないメモリのサイズです。
Windows / Linux用:
* `swapTotal` - システムで使用可能なスワップメモリの総サイズです。
* `swapFree` - システムで使用可能なスワップメモリの空きサイズです。

View file

@ -1,5 +1,7 @@
# 概要 # 概要
> どうやってNode.jsとElectronのAPIを使うか。
Electron では全ての [Node.js のビルトインモジュール](http://nodejs.org/api/) 利用可能です。また、サードパーティの Node モジュール ([ネイティブモジュール](../tutorial/using-native-node-modules.md)も含む) も完全にサポートされています。 Electron では全ての [Node.js のビルトインモジュール](http://nodejs.org/api/) 利用可能です。また、サードパーティの Node モジュール ([ネイティブモジュール](../tutorial/using-native-node-modules.md)も含む) も完全にサポートされています。
Electron はネイティブのデスクトップアプリケーション開発のための幾つかの追加のビルトインモジュールも提供しています。メインプロセスでだけ使えるモジュールもあれば、レンダラプロセス(ウェブページ)でだけ使えるモジュール、あるいはメインプロセス、レンダラプロセスどちらでも使えるモジュールもあります。 Electron はネイティブのデスクトップアプリケーション開発のための幾つかの追加のビルトインモジュールも提供しています。メインプロセスでだけ使えるモジュールもあれば、レンダラプロセス(ウェブページ)でだけ使えるモジュール、あるいはメインプロセス、レンダラプロセスどちらでも使えるモジュールもあります。
@ -9,15 +11,13 @@ Electron はネイティブのデスクトップアプリケーション開発
メインプロセススクリプトは普通の Node.js スクリプトのようなものです: メインプロセススクリプトは普通の Node.js スクリプトのようなものです:
```javascript ```javascript
const electron = require('electron'); const {app, BrowserWindow} = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var window = null; let win = null;
app.on('ready', function() { app.on('ready', () => {
window = new BrowserWindow({width: 800, height: 600}); win = new BrowserWindow({width: 800, height: 600});
window.loadURL('https://github.com'); win.loadURL('https://github.com');
}); });
``` ```
@ -28,8 +28,8 @@ app.on('ready', function() {
<html> <html>
<body> <body>
<script> <script>
const remote = require('electron').remote; const {app} = require('electron').remote;
console.log(remote.app.getVersion()); console.log(app.getVersion());
</script> </script>
</body> </body>
</html> </html>
@ -39,28 +39,25 @@ app.on('ready', function() {
## 分割代入 ## 分割代入
CoffeeScript か Babel を使っているなら、[分割代入][desctructuring-assignment]でビルトインモジュールの使用をより簡単にできます: 0.37の時点で、 、[分割代入][desctructuring-assignment]でビルトインモジュールの使用をより簡単にできます:
```javascript ```javascript
const {app, BrowserWindow} = require('electron') const {app, BrowserWindow} = require('electron');
``` ```
しかし、素の JavaScript を使っている場合、Chrome が ES6 を完全サポートするまで待たなければいけません。 もし`electron`モジュール全体が必要であれば、requireして、それぞれのモジュールを`electron`からアクセスすることができます。
## Disable old styles of using built-in modules
v0.35.0 以前は全てのビルトインモジュールは `require('module-name')` の形式で使われなければいけません。この形式は[多くの欠点][issue-387]がありますが、古いアプリケーションとの互換性のためにまだサポートしています。
古い形式を完全に無効にするために、環境変数 `ELECTRON_HIDE_INTERNAL_MODULES` を設定できます:
```javascript ```javascript
process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true' const electron = require('electron');
const {app, BrowserWindow} = electron;
``` ```
もしくは `hideInternalModules` API を呼んでください: これは、次のコードと同じ意味を持ちます。
```javascript ```javascript
require('electron').hideInternalModules() const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
``` ```
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface [gui]: https://en.wikipedia.org/wiki/Graphical_user_interface

View file

@ -8,14 +8,17 @@
3つのオペレーティングシステム全てで、アプリケーションからユーザーに通知を送る手段が提供されています。通知を表示するためにオペレーティングシステムのネイティブ通知APIを使用しする[HTML5 Notification API](https://notifications.spec.whatwg.org/)で、Electronは、開発者に通知を送ることができます。 3つのオペレーティングシステム全てで、アプリケーションからユーザーに通知を送る手段が提供されています。通知を表示するためにオペレーティングシステムのネイティブ通知APIを使用しする[HTML5 Notification API](https://notifications.spec.whatwg.org/)で、Electronは、開発者に通知を送ることができます。
**注意:** これはHTML5 APIですので、レンダラプロセス内のみで有効です。
```javascript ```javascript
var myNotification = new Notification('Title', { let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet' body: 'Lorem Ipsum Dolor Sit Amet'
}); });
myNotification.onclick = function () { myNotification.onclick = () => {
console.log('Notification clicked') console.log('Notification clicked');
} };
``` ```
オペレーティングシステム間でコードとユーザ体験は似ていますが、細かい違いがあります。 オペレーティングシステム間でコードとユーザ体験は似ていますが、細かい違いがあります。
@ -88,8 +91,8 @@ const electron = require('electron');
const app = electron.app; const app = electron.app;
const Menu = electron.Menu; const Menu = electron.Menu;
var dockMenu = Menu.buildFromTemplate([ const dockMenu = Menu.buildFromTemplate([
{ label: 'New Window', click: function() { console.log('New Window'); } }, { label: 'New Window', click() { console.log('New Window'); } },
{ label: 'New Window with Settings', submenu: [ { label: 'New Window with Settings', submenu: [
{ label: 'Basic' }, { label: 'Basic' },
{ label: 'Pro'} { label: 'Pro'}
@ -153,24 +156,24 @@ __Windows Media Playerの縮小表示ツールバー:__
アプリケーションに縮小表示ツールバーを設定するために、[BrowserWindow.setThumbarButtons][setthumbarbuttons]を使えます: アプリケーションに縮小表示ツールバーを設定するために、[BrowserWindow.setThumbarButtons][setthumbarbuttons]を使えます:
```javascript ```javascript
const BrowserWindow = require('electron').BrowserWindow; const {BrowserWindow} = require('electron');
const path = require('path'); const path = require('path');
var win = new BrowserWindow({ let win = new BrowserWindow({
width: 800, width: 800,
height: 600 height: 600
}); });
win.setThumbarButtons([ win.setThumbarButtons([
{ {
tooltip: "button1", tooltip: 'button1',
icon: path.join(__dirname, 'button1.png'), icon: path.join(__dirname, 'button1.png'),
click: function() { console.log("button2 clicked"); } click() { console.log("button2 clicked"); }
}, },
{ {
tooltip: "button2", tooltip: 'button2',
icon: path.join(__dirname, 'button2.png'), icon: path.join(__dirname, 'button2.png'),
flags:['enabled', 'dismissonclick'], flags: ['enabled', 'dismissonclick'],
click: function() { console.log("button2 clicked."); } click() { console.log("button2 clicked."); }
} }
]); ]);
``` ```
@ -189,25 +192,22 @@ __Audaciousのランチャーショートカット:__
![audacious](https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles?action=AttachFile&do=get&target=shortcuts.png) ![audacious](https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles?action=AttachFile&do=get&target=shortcuts.png)
## タスクバーの進行状況バー (Windows & Unity) ## タスクバーの進行状況バー (Windows, OS X, Unity)
Windowsでは、タスクバーボタンは、進行状況バーを表示するのに使えます。ウィンドウを切り替えることなくウィンドウの進行状況情報をユーザーに提供することができます。 Windowsでは、タスクバーボタンは、進行状況バーを表示するのに使えます。ウィンドウを切り替えることなくウィンドウの進行状況情報をユーザーに提供することができます。
OS Xではプログレスバーはドックアイコンの一部として表示されます。
Unity DEは、ランチャーに進行状況バーの表示をするのと同様の機能を持っています。 Unity DEは、ランチャーに進行状況バーの表示をするのと同様の機能を持っています。
__タスクバーボタン上の進行状況バー:__ __タスクバーボタン上の進行状況バー:__
![Taskbar Progress Bar](https://cloud.githubusercontent.com/assets/639601/5081682/16691fda-6f0e-11e4-9676-49b6418f1264.png) ![Taskbar Progress Bar](https://cloud.githubusercontent.com/assets/639601/5081682/16691fda-6f0e-11e4-9676-49b6418f1264.png)
__Unityランチャーでの進行状況バー:__
![Unity Launcher](https://cloud.githubusercontent.com/assets/639601/5081747/4a0a589e-6f0f-11e4-803f-91594716a546.png)
ウィンドウに進行状況バーを設定するために、[BrowserWindow.setProgressBar][setprogressbar] APIを使えます: ウィンドウに進行状況バーを設定するために、[BrowserWindow.setProgressBar][setprogressbar] APIを使えます:
```javascript ```javascript
var window = new BrowserWindow({...}); let win = new BrowserWindow({...});
window.setProgressBar(0.5); win.setProgressBar(0.5);
``` ```
## タスクバーでアイコンをオーバーレイする (Windows) ## タスクバーでアイコンをオーバーレイする (Windows)
@ -223,8 +223,8 @@ __タスクバーボタンでのオーバーレイ:__
ウィンドウでオーバーレイアイコンを設定するために、[BrowserWindow.setOverlayIcon][setoverlayicon] APIを使用できます。 ウィンドウでオーバーレイアイコンを設定するために、[BrowserWindow.setOverlayIcon][setoverlayicon] APIを使用できます。
```javascript ```javascript
var window = new BrowserWindow({...}); let win = new BrowserWindow({...});
window.setOverlayIcon('path/to/overlay.png', 'Description for overlay'); win.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
``` ```
## Windowのファイル表示 (OS X) ## Windowのファイル表示 (OS X)
@ -240,9 +240,9 @@ __Represented file ポップアップメニュー:__
ウィンドウにrepresented fileを設定するために、[BrowserWindow.setRepresentedFilename][setrepresentedfilename] と [BrowserWindow.setDocumentEdited][setdocumentedited] APIsを使えます: ウィンドウにrepresented fileを設定するために、[BrowserWindow.setRepresentedFilename][setrepresentedfilename] と [BrowserWindow.setDocumentEdited][setdocumentedited] APIsを使えます:
```javascript ```javascript
var window = new BrowserWindow({...}); let win = new BrowserWindow({...});
window.setRepresentedFilename('/etc/passwd'); win.setRepresentedFilename('/etc/passwd');
window.setDocumentEdited(true); win.setDocumentEdited(true);
``` ```
[addrecentdocument]: ../api/app.md#appaddrecentdocumentpath-os-x-windows [addrecentdocument]: ../api/app.md#appaddrecentdocumentpath-os-x-windows

View file

@ -9,10 +9,11 @@ const electron = require('electron');
const app = electron.app; const app = electron.app;
const BrowserWindow = electron.BrowserWindow; const BrowserWindow = electron.BrowserWindow;
var onlineStatusWindow; let onlineStatusWindow;
app.on('ready', function() {
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html'); onlineStatusWindow.loadURL('file://${__dirname}/online-status.html');
}); });
``` ```
@ -23,7 +24,7 @@ _online-status.html_
<html> <html>
<body> <body>
<script> <script>
var alertOnlineStatus = function() { const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline'); window.alert(navigator.onLine ? 'online' : 'offline');
}; };
@ -46,13 +47,14 @@ const app = electron.app;
const ipcMain = electron.ipcMain; const ipcMain = electron.ipcMain;
const BrowserWindow = electron.BrowserWindow; const BrowserWindow = electron.BrowserWindow;
var onlineStatusWindow; let onlineStatusWindow;
app.on('ready', function() {
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html'); onlineStatusWindow.loadURL('file://${__dirname}/online-status.html');
}); });
ipcMain.on('online-status-changed', function(event, status) { ipcMain.on('online-status-changed', (event, status) => {
console.log(status); console.log(status);
}); });
``` ```
@ -64,8 +66,8 @@ _online-status.html_
<html> <html>
<body> <body>
<script> <script>
const ipcRenderer = require('electron').ipcRenderer; const {ipcRenderer} = require('electron');
var updateOnlineStatus = function() { const updateOnlineStatus = () => {
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline'); ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
}; };

View file

@ -52,48 +52,60 @@ __注記__ `package.json` に `main` が存在しない場合、Electron は
`main.js` ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります: `main.js` ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります:
```javascript ```javascript
'use strict';
const electron = require('electron'); const electron = require('electron');
const app = electron.app; // Module to control application life. // アプリケーションを操作するモジュール
const BrowserWindow = electron.BrowserWindow; // Module to create native browser window. const {app} = electron;
// ネイティブブラウザウィンドウを作成するモジュール
const {BrowserWindow} = electron;
// Keep a global reference of the window object, if you don't, the window will // ウィンドウオブジェクトをグローバル参照をしておくこと。
// be closed automatically when the JavaScript object is garbage collected. // しないと、ガベージコレクタにより自動的に閉じられてしまう。
var mainWindow = null; let win;
// Quit when all windows are closed. function createWindow() {
app.on('window-all-closed', function() { // ブラウザウィンドウの作成
// On OS X it is common for applications and their menu bar win = new BrowserWindow({width: 800, height: 600});
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform != 'darwin') { // アプリケーションのindex.htmlの読み込み
win.loadURL(`file://${__dirname}/index.html`);
// DevToolsを開く
win.webContents.openDevTools();
// ウィンドウが閉じられた時に発行される
win.on('closed', () => {
// ウィンドウオブジェクトを参照から外す。
// もし何個かウィンドウがあるならば、配列として持っておいて、対応するウィンドウのオブジェクトを消去するべき。
win = null;
});
}
// このメソッドはElectronが初期化を終えて、ブラウザウィンドウを作成可能になった時に呼び出される。
// 幾つかのAPIはこのイベントの後でしか使えない。
app.on('ready', createWindow);
// すべてのウィンドウが閉じられた時にアプリケーションを終了する。
app.on('window-all-closed', () => {
// OS Xでは、Cmd + Q(終了)をユーザーが実行するまではウィンドウが全て閉じられても終了しないでおく。
if (process.platform !== 'darwin') {
app.quit(); app.quit();
} }
}); });
// This method will be called when Electron has finished app.on('activate', () => {
// initialization and is ready to create browser windows. // OS X では、ドックをクリックされた時にウィンドウがなければ新しく作成する。
app.on('ready', function() { if (win === null) {
// Create the browser window. createWindow();
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.webContents.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;
});
}); });
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
// このファイルでアプリケーション固有のメインプロセスのコードを読み込むことができる。
// ファイルを別に分けておいてここでrequireすることもできる。
``` ```
最後に表示するウェブページ `index.html` は次のようになります: 最後に、表示するウェブページ `index.html` は次のようになります:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -117,7 +129,9 @@ app.on('ready', function() {
### electron-prebuilt ### electron-prebuilt
`electron-prebuilt``npm` でグローバルインストールしているなら、アプリのソースディレクトリ内で以下を実行するだけで済みます: [`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt)は、コンパイル済みのElectronを含んだ`npm`モジュールです。
`npm`でグローバルインストールをしているなら、下記のコマンドをアプリケーションのソースディレクトリで実行するだけで済みます。
```bash ```bash
electron . electron .