Japanese manual: Update tutorials and api
[ci skip]
This commit is contained in:
TAKAHASHI Kyohei
parent
6f3d0e1782
commit
77eb0e8e3f
7 changed files with 185 additions and 116 deletions
|
|
@ -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 .
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue