зеркало из https://github.com/electron/electron.git
Japanese manual: Update tutorials and api
[ci skip]
This commit is contained in:
TAKAHASHI Kyohei
Родитель
6f3d0e1782
Коммит
77eb0e8e3f
|
|
@ -1,29 +1,32 @@
|
|||
#サポートしているChromeコマンドラインスイッチ
|
||||
|
||||
ElectronでサポートしているChromeブラウザーで使用できるコマンドラインスイッチをこのページで一覧にしています。[app][app]モジュールの[ready][ready]イベントが出力される前にアプリのメインスクリプトに追加するために[app.commandLine.appendSwitch][append-switch]を使えます。
|
||||
> Electronでサポートされているコマンドラインスイッチ
|
||||
|
||||
アプリケーションのメインスクリプトで[app.commandLine.appendSwitch][append-switch]を使うことで、[app][app]モジュールの[ready][ready]イベントが発行される前にコマンドラインスイッチを追加できます。
|
||||
|
||||
```javascript
|
||||
const app = require('electron').app;
|
||||
const {app} = require('electron');
|
||||
app.commandLine.appendSwitch('remote-debugging-port', '8315');
|
||||
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');
|
||||
|
||||
app.on('ready', function() {
|
||||
app.on('ready', () => {
|
||||
// Your code here
|
||||
});
|
||||
```
|
||||
|
||||
## --client-certificate=`path`
|
||||
|
||||
クライアントの証明書ファイルの`path`を設定します。
|
||||
|
||||
## --ignore-connections-limit=`domains`
|
||||
|
||||
接続数の制限を無視する`,`で分割した`domains`リスト
|
||||
`domains`で指定されたリストは接続数制限を無視します。リストは`,`で区切られます。
|
||||
|
||||
## --disable-http-cache
|
||||
|
||||
HTTPリクエストのディスクキャッシュの無効化。
|
||||
|
||||
## --disable-http2
|
||||
|
||||
HTTP/2 と SPDY/3.1 プロトコルを無効にします。
|
||||
|
||||
## --remote-debugging-port=`port`
|
||||
|
||||
`port`で指定したHTTP越しのリモートデバッグの有効化。
|
||||
|
|
@ -42,7 +45,8 @@ $ electron --js-flags="--harmony_proxies --harmony_collections" your-app
|
|||
|
||||
## --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')
|
||||
```
|
||||
|
||||
ロカールアドレス（`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`
|
||||
|
||||
|
|
@ -58,7 +62,7 @@ app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com
|
|||
|
||||
## --no-proxy-server
|
||||
|
||||
プロキシサーバーを使わず、常に直接接続します。遠輝ほかのプロキシサーバーフラグを上書きします。
|
||||
プロキシサーバーを使わず、常に直接接続します。ほかのプロキシサーバーフラグを上書きします。
|
||||
|
||||
## --host-rules=`rules`
|
||||
|
||||
|
|
@ -105,17 +109,17 @@ TLSフォールバックを許可する最小のSSL/TLSバージョン ("tls1"
|
|||
|
||||
不可視のページのレンダラープロセスの優先度を下げることからChromiumを防ぎます。
|
||||
|
||||
このフラグは、グローバルですべてのレンダラープロセスに有効で、一つのウィンドウだけで無効化したい場合、[playing silent audio][play-silent-audio]をハックして対応します。
|
||||
このフラグは、グローバルですべてのレンダラープロセスに有効で、一つのウィンドウだけで無効化したい場合、[無音を再生する][play-silent-audio]というハックで対応します。
|
||||
|
||||
## --enable-logging
|
||||
|
||||
コンソールにChromiumのログを出力します。
|
||||
|
||||
このスイッチは`app.commandLine.appendSwitch` で使えず、アプリがロードされるよりもパースしますが、同じ効果を受けるために`ELECTRON_ENABLE_LOGGING`を環境変数に設定します。
|
||||
ユーザーのアプリが読み込まれる前に解析されるため、`app.commandLine.appendSwitch`では使用できませんが、`ELECTRON_ENABLE_LOGGING`を環境変数に設定すると同じ効果を得ることができます。
|
||||
|
||||
## --v=`log_level`
|
||||
|
||||
既定の最大アクティブなV-loggingレベルが付与されています。0が既定です。通常、正の値はV-loggingレベルに使用されます。
|
||||
標準のloggingレベルを設定します。0が既定です。通常、V-loggingレベルには正の値が使用されます。
|
||||
|
||||
`--enable-logging` が渡された時だけ、このスイッチは動作します。
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
# 環境変数
|
||||
|
||||
> アプリケーションの設定や動作を、コードの変更なしで制御します。
|
||||
|
||||
コマンドラインやアプリのコードよりも早く初期化されるために、Electronのいくつかの挙動は環境変数がコントロールしています。
|
||||
|
||||
POSIX shellでの例:
|
||||
|
|
@ -47,6 +49,3 @@ Electronがクラッシュしたとき、Windowsのクラッシュダイアロ
|
|||
|
||||
Linuxでグローバルメニューバーを使用できません。
|
||||
|
||||
## `ELECTRON_HIDE_INTERNAL_MODULES`
|
||||
|
||||
`require('ipc')`のような古い組み込みモジュールとの互換モードを無効にします。
|
||||
|
|
|
|||
|
|
@ -1,20 +1,16 @@
|
|||
# process
|
||||
|
||||
Electronの`process`オブジェクトは上流nodeの1つから次のような違いがあります。
|
||||
> processオブジェクトの拡張。
|
||||
|
||||
* `process.type` String - プロセスの種類で、`browser` (例 メインプロセス)または `renderer`を設定できます。
|
||||
* `process.versions.electron` String - Electronのバージョン
|
||||
* `process.versions.chrome` String - Chromiumのバージョン
|
||||
* `process.resourcesPath` String - JavaScriptのソースコードのパスを設定します。
|
||||
* `process.mas` Boolean - Mac app Store用のビルドで、値は`true`です。ほかのビルドの場合は`undefined`です。
|
||||
Electronの`process`オブジェクトは次のようなAPIで拡張されています。
|
||||
|
||||
## イベント
|
||||
|
||||
### イベント: 'loaded'
|
||||
|
||||
Electronは内部の初期化スクリプトをロードしたとき出力され、ウェブページまたはメインスクリプトのロードが始まります。
|
||||
このイベントはElectronが内部の初期化スクリプトをロードし、ウェブページまたはメインスクリプトのロードが始まるときに発行されます。
|
||||
|
||||
Node統合がオフになっているとき、削除したNodeグローバルシンボルをグローバルスコープへ戻してプリロードスクリプトで使用できます。
|
||||
Node統合がオフになっているとき、削除したNodeグローバルシンボルをグローバルスコープへ戻すために、プリロードスクリプトで使用できます。
|
||||
|
||||
```js
|
||||
// preload.js
|
||||
|
|
@ -32,16 +28,73 @@ process.once('loaded', function() {
|
|||
|
||||
これを`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.setFdLimit(maxDescriptors)` _OS X_ _Linux_
|
||||
|
||||
* `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` - システムで使用可能なスワップメモリの空きサイズです。
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
# 概要
|
||||
|
||||
> どうやってNode.jsとElectronのAPIを使うか。
|
||||
|
||||
Electron では全ての [Node.js のビルトインモジュール](http://nodejs.org/api/) 利用可能です。また、サードパーティの Node モジュール ([ネイティブモジュール](../tutorial/using-native-node-modules.md)も含む) も完全にサポートされています。
|
||||
|
||||
Electron はネイティブのデスクトップアプリケーション開発のための幾つかの追加のビルトインモジュールも提供しています。メインプロセスでだけ使えるモジュールもあれば、レンダラプロセス(ウェブページ)でだけ使えるモジュール、あるいはメインプロセス、レンダラプロセスどちらでも使えるモジュールもあります。
|
||||
|
|
@ -9,15 +11,13 @@ Electron はネイティブのデスクトップアプリケーション開発
|
|||
メインプロセススクリプトは普通の Node.js スクリプトのようなものです：
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
const {app, BrowserWindow} = require('electron');
|
||||
|
||||
var window = null;
|
||||
let win = null;
|
||||
|
||||
app.on('ready', function() {
|
||||
window = new BrowserWindow({width: 800, height: 600});
|
||||
window.loadURL('https://github.com');
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('https://github.com');
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -28,8 +28,8 @@ app.on('ready', function() {
|
|||
<html>
|
||||
<body>
|
||||
<script>
|
||||
const remote = require('electron').remote;
|
||||
console.log(remote.app.getVersion());
|
||||
const {app} = require('electron').remote;
|
||||
console.log(app.getVersion());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -39,28 +39,25 @@ app.on('ready', function() {
|
|||
|
||||
## 分割代入
|
||||
|
||||
CoffeeScript か Babel を使っているなら、[分割代入][desctructuring-assignment]でビルトインモジュールの使用をより簡単にできます：
|
||||
0.37の時点で、 、[分割代入][desctructuring-assignment]でビルトインモジュールの使用をより簡単にできます：
|
||||
|
||||
```javascript
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
const {app, BrowserWindow} = require('electron');
|
||||
```
|
||||
|
||||
しかし、素の JavaScript を使っている場合、Chrome が ES6 を完全サポートするまで待たなければいけません。
|
||||
|
||||
## Disable old styles of using built-in modules
|
||||
|
||||
v0.35.0 以前は全てのビルトインモジュールは `require('module-name')` の形式で使われなければいけません。この形式は[多くの欠点][issue-387]がありますが、古いアプリケーションとの互換性のためにまだサポートしています。
|
||||
|
||||
古い形式を完全に無効にするために、環境変数 `ELECTRON_HIDE_INTERNAL_MODULES` を設定できます：
|
||||
もし`electron`モジュール全体が必要であれば、requireして、それぞれのモジュールを`electron`からアクセスすることができます。
|
||||
|
||||
```javascript
|
||||
process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true'
|
||||
const electron = require('electron');
|
||||
const {app, BrowserWindow} = electron;
|
||||
```
|
||||
|
||||
もしくは `hideInternalModules` API を呼んでください：
|
||||
これは、次のコードと同じ意味を持ちます。
|
||||
|
||||
```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
|
||||
|
|
|
|||
|
|
@ -8,14 +8,17 @@
|
|||
|
||||
3つのオペレーティングシステム全てで、アプリケーションからユーザーに通知を送る手段が提供されています。通知を表示するためにオペレーティングシステムのネイティブ通知APIを使用しする[HTML5 Notification API](https://notifications.spec.whatwg.org/)で、Electronは、開発者に通知を送ることができます。
|
||||
|
||||
**注意:** これはHTML5 APIですので、レンダラプロセス内のみで有効です。
|
||||
|
||||
|
||||
```javascript
|
||||
var myNotification = new Notification('Title', {
|
||||
let myNotification = new Notification('Title', {
|
||||
body: 'Lorem Ipsum Dolor Sit Amet'
|
||||
});
|
||||
|
||||
myNotification.onclick = function () {
|
||||
console.log('Notification clicked')
|
||||
}
|
||||
myNotification.onclick = () => {
|
||||
console.log('Notification clicked');
|
||||
};
|
||||
```
|
||||
|
||||
オペレーティングシステム間でコードとユーザ体験は似ていますが、細かい違いがあります。
|
||||
|
|
@ -88,8 +91,8 @@ const electron = require('electron');
|
|||
const app = electron.app;
|
||||
const Menu = electron.Menu;
|
||||
|
||||
var dockMenu = Menu.buildFromTemplate([
|
||||
{ label: 'New Window', click: function() { console.log('New Window'); } },
|
||||
const dockMenu = Menu.buildFromTemplate([
|
||||
{ label: 'New Window', click() { console.log('New Window'); } },
|
||||
{ label: 'New Window with Settings', submenu: [
|
||||
{ label: 'Basic' },
|
||||
{ label: 'Pro'}
|
||||
|
|
@ -153,24 +156,24 @@ __Windows Media Playerの縮小表示ツールバー:__
|
|||
アプリケーションに縮小表示ツールバーを設定するために、[BrowserWindow.setThumbarButtons][setthumbarbuttons]を使えます:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
const {BrowserWindow} = require('electron');
|
||||
const path = require('path');
|
||||
|
||||
var win = new BrowserWindow({
|
||||
let win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600
|
||||
});
|
||||
win.setThumbarButtons([
|
||||
{
|
||||
tooltip: "button1",
|
||||
tooltip: 'button1',
|
||||
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'),
|
||||
flags:['enabled', 'dismissonclick'],
|
||||
click: function() { console.log("button2 clicked."); }
|
||||
flags: ['enabled', 'dismissonclick'],
|
||||
click() { console.log("button2 clicked."); }
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
|
@ -189,25 +192,22 @@ __Audaciousのランチャーショートカット:__
|
|||
|
||||
|
||||
|
||||
## タスクバーの進行状況バー (Windows & Unity)
|
||||
## タスクバーの進行状況バー (Windows, OS X, Unity)
|
||||
|
||||
Windowsでは、タスクバーボタンは、進行状況バーを表示するのに使えます。ウィンドウを切り替えることなくウィンドウの進行状況情報をユーザーに提供することができます。
|
||||
|
||||
OS Xではプログレスバーはドックアイコンの一部として表示されます。
|
||||
Unity DEは、ランチャーに進行状況バーの表示をするのと同様の機能を持っています。
|
||||
|
||||
__タスクバーボタン上の進行状況バー:__
|
||||
|
||||
|
||||
|
||||
__Unityランチャーでの進行状況バー:__
|
||||
|
||||
|
||||
|
||||
ウィンドウに進行状況バーを設定するために、[BrowserWindow.setProgressBar][setprogressbar] APIを使えます:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setProgressBar(0.5);
|
||||
let win = new BrowserWindow({...});
|
||||
win.setProgressBar(0.5);
|
||||
```
|
||||
|
||||
## タスクバーでアイコンをオーバーレイする (Windows)
|
||||
|
|
@ -223,8 +223,8 @@ __タスクバーボタンでのオーバーレイ:__
|
|||
ウィンドウでオーバーレイアイコンを設定するために、[BrowserWindow.setOverlayIcon][setoverlayicon] APIを使用できます。
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
|
||||
let win = new BrowserWindow({...});
|
||||
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
|
||||
```
|
||||
|
||||
## Windowのファイル表示 (OS X)
|
||||
|
|
@ -240,9 +240,9 @@ __Represented file ポップアップメニュー:__
|
|||
ウィンドウにrepresented fileを設定するために、[BrowserWindow.setRepresentedFilename][setrepresentedfilename] と [BrowserWindow.setDocumentEdited][setdocumentedited] APIsを使えます:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setRepresentedFilename('/etc/passwd');
|
||||
window.setDocumentEdited(true);
|
||||
let win = new BrowserWindow({...});
|
||||
win.setRepresentedFilename('/etc/passwd');
|
||||
win.setDocumentEdited(true);
|
||||
```
|
||||
|
||||
[addrecentdocument]: ../api/app.md#appaddrecentdocumentpath-os-x-windows
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@ const electron = require('electron');
|
|||
const app = electron.app;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
|
||||
var onlineStatusWindow;
|
||||
app.on('ready', function() {
|
||||
let onlineStatusWindow;
|
||||
|
||||
app.on('ready', () => {
|
||||
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>
|
||||
<body>
|
||||
<script>
|
||||
var alertOnlineStatus = function() {
|
||||
const alertOnlineStatus = () => {
|
||||
window.alert(navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
|
|
@ -46,13 +47,14 @@ const app = electron.app;
|
|||
const ipcMain = electron.ipcMain;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
|
||||
var onlineStatusWindow;
|
||||
app.on('ready', function() {
|
||||
let onlineStatusWindow;
|
||||
|
||||
app.on('ready', () => {
|
||||
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);
|
||||
});
|
||||
```
|
||||
|
|
@ -64,8 +66,8 @@ _online-status.html_
|
|||
<html>
|
||||
<body>
|
||||
<script>
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
var updateOnlineStatus = function() {
|
||||
const {ipcRenderer} = require('electron');
|
||||
const updateOnlineStatus = () => {
|
||||
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -52,48 +52,60 @@ __注記__： `package.json` に `main` が存在しない場合、Electron は
|
|||
`main.js` ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります：
|
||||
|
||||
```javascript
|
||||
'use strict';
|
||||
|
||||
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.
|
||||
app.on('window-all-closed', function() {
|
||||
// On OS X it is common for applications and their menu bar
|
||||
// to stay active until the user quits explicitly with Cmd + Q
|
||||
if (process.platform != 'darwin') {
|
||||
function createWindow() {
|
||||
// ブラウザウィンドウの作成
|
||||
win = new BrowserWindow({width: 800, height: 600});
|
||||
|
||||
// アプリケーションの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();
|
||||
}
|
||||
});
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create 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.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;
|
||||
});
|
||||
app.on('activate', () => {
|
||||
// OS X では、ドックをクリックされた時にウィンドウがなければ新しく作成する。
|
||||
if (win === null) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -117,7 +129,9 @@ app.on('ready', function() {
|
|||
|
||||
### electron-prebuilt
|
||||
|
||||
`electron-prebuilt` を `npm` でグローバルインストールしているなら、アプリのソースディレクトリ内で以下を実行するだけで済みます：
|
||||
[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt)は、コンパイル済みのElectronを含んだ`npm`モジュールです。
|
||||
|
||||
`npm`でグローバルインストールをしているなら、下記のコマンドをアプリケーションのソースディレクトリで実行するだけで済みます。
|
||||
|
||||
```bash
|
||||
electron .
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче