Merge pull request #5587 from kcrt/master

Japanese manual: add electron-versioning.
This commit is contained in:
Kevin Sawicki 2016-05-18 13:55:10 -07:00
commit 97d903bca3
9 changed files with 87 additions and 33 deletions

View file

@ -14,6 +14,7 @@ _リンクになっていないリストは未翻訳のものです。_
* [サポートするプラットフォーム](tutorial/supported-platforms.md) * [サポートするプラットフォーム](tutorial/supported-platforms.md)
* [セキュリティ](tutorial/security.md) * [セキュリティ](tutorial/security.md)
* [Electronのバージョン管理](tutorial/electron-versioning.md)
* [アプリケーションの配布](tutorial/application-distribution.md) * [アプリケーションの配布](tutorial/application-distribution.md)
* [Mac App Store 提出ガイド](tutorial/mac-app-store-submission-guide.md) * [Mac App Store 提出ガイド](tutorial/mac-app-store-submission-guide.md)
* Windows Store Guide (tutorial/windows-store-guide.md) * Windows Store Guide (tutorial/windows-store-guide.md)

View file

@ -25,7 +25,7 @@ electron/resources/app
## ファイルにアプリケーションをパッケージングする ## ファイルにアプリケーションをパッケージングする
すべてのソースコードをコピーすることでアプリケーションを提供する方法とは別に、アプリケーションのソースコードをユーザーに見えるのを避けるために、[asar](https://github.com/atom/asar) にアーカイブしてアプリケーションをパッケージ化することができます。 すべてのソースコードをコピーすることでアプリケーションを提供する方法とは別に、アプリケーションのソースコードをユーザーに見えるのを避けるために、[asar](https://github.com/electron/asar) にアーカイブしてアプリケーションをパッケージ化することができます。
`app` フォルダの代わりに `asar` アーカイブを使用するためには、アーカイブファイルを `app.asar` という名前に変更し、Electron のリソースディレクトリに以下のように配置する必要があります。すると、Electron はアーカイブを読み込もうとし、それを開始します。 `app` フォルダの代わりに `asar` アーカイブを使用するためには、アーカイブファイルを `app.asar` という名前に変更し、Electron のリソースディレクトリに以下のように配置する必要があります。すると、Electron はアーカイブを読み込もうとし、それを開始します。

View file

@ -63,8 +63,8 @@ require('/path/to/example.asar/dir/module.js');
`BrowserWindow` を使って `asar` アーカイブ内の Web ページを表示することもできます: `BrowserWindow` を使って `asar` アーカイブ内の Web ページを表示することもできます:
```javascript ```javascript
const BrowserWindow = require('electron').BrowserWindow; const {BrowserWindow} = require('electron');
var win = new BrowserWindow({width: 800, height: 600}); let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('file:///path/to/example.asar/static/index.html'); win.loadURL('file:///path/to/example.asar/static/index.html');
``` ```
@ -78,7 +78,7 @@ Node API と同様、`asar` アーカイブはディレクトリのように扱
```html ```html
<script> <script>
var $ = require('./jquery.min.js'); var $ = require('./jquery.min.js');
$.get('file:///path/to/example.asar/file.txt', function(data) { $.get('file:///path/to/example.asar/file.txt', (data) => {
console.log(data); console.log(data);
}); });
</script> </script>
@ -89,7 +89,7 @@ $.get('file:///path/to/example.asar/file.txt', function(data) {
アーカイブのチェックサムを検証する等の幾つかのケースでは、`asar` アーカイブをファイルとして読み込む必要があります。この目的のために、 `asar` サポートしないオリジナルの `fs` API を提供するビルトインの `original-fs` モジュールを使用できます。 アーカイブのチェックサムを検証する等の幾つかのケースでは、`asar` アーカイブをファイルとして読み込む必要があります。この目的のために、 `asar` サポートしないオリジナルの `fs` API を提供するビルトインの `original-fs` モジュールを使用できます。
```javascript ```javascript
var originalFs = require('original-fs'); const originalFs = require('original-fs');
originalFs.readFileSync('/path/to/example.asar'); originalFs.readFileSync('/path/to/example.asar');
``` ```
@ -146,4 +146,4 @@ $ asar pack app app.asar --unpack *.node
このコマンドを実行した後、`app.asar` とは別に、アンパックされたファイルを含んだ`app.asar.unpacked` フォルダーが生成されます。ユーザーに提供するときには、`app.asar` と一緒にコピーしなければなりません。 このコマンドを実行した後、`app.asar` とは別に、アンパックされたファイルを含んだ`app.asar.unpacked` フォルダーが生成されます。ユーザーに提供するときには、`app.asar` と一緒にコピーしなければなりません。
[asar]: https://github.com/atom/asar [asar]: https://github.com/electron/asar

View file

@ -4,7 +4,7 @@
DevToolsエクステンションのために、ソースコードをダウンローし、`BrowserWindow.addDevToolsExtension` APIを使って読み込みます。読み込んだエクステンションは維持されているので、ウィンドウを作成するとき、毎回APIをコールする必要はありません。 DevToolsエクステンションのために、ソースコードをダウンローし、`BrowserWindow.addDevToolsExtension` APIを使って読み込みます。読み込んだエクステンションは維持されているので、ウィンドウを作成するとき、毎回APIをコールする必要はありません。
** NOTE: React DevTools は動作しません。issue https://github.com/electron/electron/issues/915 でフォローしています** ** NOTE: React DevTools は動作しません。issue https://github.com/electron/electron/issues/915 をご覧ください **
例えば、[React DevTools Extension](https://github.com/facebook/react-devtools)を使うために、最初にソースコードをダウンロードする必要があります。 例えば、[React DevTools Extension](https://github.com/facebook/react-devtools)を使うために、最初にソースコードをダウンロードする必要があります。
@ -22,7 +22,7 @@ const BrowserWindow = require('electron').remote.BrowserWindow;
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome'); BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');
``` ```
エクステンションをアンロードするために、名前と`BrowserWindow.removeDevToolsExtension` APIをコールすると、次回DevToolsを開いた時にはロードされません。 エクステンションをアンロードするために、`BrowserWindow.removeDevToolsExtension` APIを名前を指定してコールすると、次回DevToolsを開いた時にはロードされません。
```javascript ```javascript
BrowserWindow.removeDevToolsExtension('React Developer Tools'); BrowserWindow.removeDevToolsExtension('React Developer Tools');
@ -34,12 +34,12 @@ BrowserWindow.removeDevToolsExtension('React Developer Tools');
## バックグラウンドページ ## バックグラウンドページ
今のところ、ElectronはChromエクステンションのバックグラウンドページ機能に対応していません。そのため、Electronでは、この機能に依存するDevToolsエクステンションは動作しません。 今のところ、ElectronはChromeエクステンションのバックグラウンドページ機能に対応していません。そのため、Electronでは、この機能に依存するDevToolsエクステンションは動作しません。
## `chrome.*` APIs ## `chrome.*` APIs
いくつかのChromeエクステンションは、`chrome.*` APIsを使用しており、ElectronでそれらのAPIを実装するための努力をしていますが、すべては実装されていません。 いくつかのChromeエクステンションは、`chrome.*` APIsを使用しており、ElectronでそれらのAPIを実装するための努力をしていますが、すべては実装されていません。
すべては実装されていない`chrome.*` APIについて考えると、もしDevToolsエクステンションが `chrome.devtools.*` 以外のAPIを使用していると、エクステンションは動作しない可能性が非常に高いです。 すべては実装されていない`chrome.*` APIについて考えると、もしDevToolsエクステンションが `chrome.devtools.*` 以外のAPIを使用していると、エクステンションは動作しない可能性が非常に高いです。うまく動作しないエクステンションがあれば、APIのサポートの追加のために、issue trackerへご報告ください。
[devtools-extension]: https://developer.chrome.com/extensions/devtools [devtools-extension]: https://developer.chrome.com/extensions/devtools

View file

@ -0,0 +1,11 @@
# Electronのバージョン管理
もしあなたが経験豊富なNodeプログラマなら、`semver`(セマンティックバージョニング)のことはご存知でしょうし、バージョン番号をきっちり固定するのではなく、大まかな指針をパッケージの依存管理システムに指定していることと思います。ElectronはNodeとChromiumに強く依存しているので、少し難しい位置付けにあってsemverにきっちり従っていません。そのため、いつでも特定バージョンのElectronを参照しないといけません。
バージョン番号は次のルールに沿ってあげられます。
* メジャーバージョン: ElectronのAPIに大きな変更があった時- 例えば、`0.37.0`から`1.0.0`にアップグレードした時は、あなたはアプリケーションのアップデートをしなければなりません。
* マイナーバージョン: ChromeのメジャーバージョンまたはNodeのマイナーバージョンのアップデート、またはElectronの重大な変更 - 例えば`1.0.0`から`1.1.0`にアップグレードした時は、あなたのアプリは多分動きますが、もしかしたら少々の変更をしないといけないかもしれません。
* パッチ: 新しい機能やバグフィックス - `1.0.0`から`1.0.1`へのアップグレードでは、あなたのアプリはそのまま動くはずです。
もし、`electron-prebuilt`を使用しているのであれば、Electronのすべてのアップデートが開発者であるあなたによって手動で行われることを保証するために、固定バージョンを指定(`^1.1.0`ではなく`1.1.0`)することをお勧めします。

View file

@ -42,13 +42,16 @@ Appleから証明書を取得した後、[Application Distribution](application-
<dict> <dict>
<key>com.apple.security.app-sandbox</key> <key>com.apple.security.app-sandbox</key>
<true/> <true/>
<key>com.apple.security.temporary-exception.sbpl</key> <key>com.apple.security.application-groups</key>
<string>(allow mach-lookup (global-name-regex #"^org.chromium.Chromium.rohitfork.[0-9]+$"))</string> <array>
<string>your.bundle.id</string>
</array>
</dict> </dict>
</plist> </plist>
``` ```
次のスクリプトでアプリを署名します。 _`your.bundle.id`は`Info.plist`で指定されているあなたのアプリのBundle IDに置き換えてください。_
そして、次のスクリプトでアプリを署名します。
```bash ```bash
#!/bin/bash #!/bin/bash
@ -87,12 +90,6 @@ OS Xでのアプリのサンドボックス化を行うことが初めてなら
アプリに署名後、iTunes ConnectにアップロードするためにApplication Loaderを使用できます。アップロードする前に[created a record][create-record]を確認してください。 アプリに署名後、iTunes ConnectにアップロードするためにApplication Loaderを使用できます。アップロードする前に[created a record][create-record]を確認してください。
### `temporary-exception`の使用について
アプリのサンドボックス化を行った場合、[App Sandbox Temporary Exception Entitlements][temporary-exception]にしたがって、`temporary-exceptionがエンタイトルメントに追加されます。そのため、なぜこのエントリが必要かを説明する必要があります。
アウリケーションがChromiumブラウザに基づいて作られていることを説明する必要があるでしょうが、それでもこの事のためにAppleの審査から落ちる可能性は残っています。
### アプリケーションを審査に提出 ### アプリケーションを審査に提出
これらのステップを終えた後、[レビュー用にアプリを登録できます][submit-for-review]. これらのステップを終えた後、[レビュー用にアプリを登録できます][submit-for-review].

View file

@ -2,7 +2,6 @@
Electronは、Pepper Flashプラグインをサポートしています。ElectronでPepper Flashプラグインを使用するために、マニュアルでPepper Flashプラグインのパスを指定し、アプリケーションで有効化しなければなりません。 Electronは、Pepper Flashプラグインをサポートしています。ElectronでPepper Flashプラグインを使用するために、マニュアルでPepper Flashプラグインのパスを指定し、アプリケーションで有効化しなければなりません。
Electron now supports the Pepper Flash plugin. To use the Pepper Flash plugin in
## Flash プラグインのコピー準備 ## Flash プラグインのコピー準備
@ -37,10 +36,16 @@ app.on('ready', function() {
}); });
``` ```
## `<webview>` タグでFlashプラグインを有効 ## `<webview>` タグでFlashプラグインを有効
`<webview>` タグに`plugins`属性を追加する `<webview>` タグに`plugins`属性を追加する
```html ```html
<webview src="http://www.adobe.com/software/flash/about/" plugins></webview> <webview src="http://www.adobe.com/software/flash/about/" plugins></webview>
``` ```
## トラブルシューティング
Pepper Flashプラグインが読み込まれているかは、devtoolsのconsoleで`navigator.plugins`を見ることで確認することができます。(プラグインのパスが正しいかがわからなくても)
Pepper FlashプラグインのアーキテクチャはElectronのアーキテクチャと一致している必要があります。Windowsで、64bit Electronに32bit Flashプラグインを使用するのはよくある間違いです。

View file

@ -6,7 +6,46 @@
Electronで `chromedriver` を使用するために、Electronがどこにあるかを示し、ElectronはChromeブラウザーであると思わせます。 Electronで `chromedriver` を使用するために、Electronがどこにあるかを示し、ElectronはChromeブラウザーであると思わせます。
## WebDriverJsを設定します ## Spectronの設定
[Spectron][spectron]はElectronのための公式なChromeDriverテストフレームワークです。
[WebdriverIO](http://webdriver.io/)に基づいてビルドされており、テストの中でElectron APIを使用するヘルパーやChromeDriveを持っています。
```bash
$ npm install --save-dev spectron
```
```js
// 可視のウィンドウがタイトル付きで開かれているかを調べる簡単なテスト
var Application = require('spectron').Application
var assert = require('assert')
var app = new Application({
path: '/Applications/MyApp.app/Contents/MacOS/MyApp'
})
app.start().then(function () {
// ウィンドウは表示されている?
return app.browserWindow.isVisible()
}).then(function (isVisible) {
// ウィンドウが表示されているか確認
assert.equal(isVisible, true)
}).then(function () {
// ウィンドウのタイトルを取得
return app.client.getTitle()
}).then(function (title) {
// ウィンドウのタイトルを確認
assert.equal(title, 'My App')
}).then(function () {
// アプリケーションを止める
return app.stop()
}).catch(function (error) {
// 失敗した場合ログを残す
console.error('Test failed', error.message)
})
```
## WebDriverJsを設定
[WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs) は、web driver でテストするためのNodeパッケージを提供します。例のように使用します。 [WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs) は、web driver でテストするためのNodeパッケージを提供します。例のように使用します。
@ -35,7 +74,7 @@ Electronでの `selenium-webdriver` 使用方法は、chrome driverへの接続
```javascript ```javascript
const webdriver = require('selenium-webdriver'); const webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder() const driver = new webdriver.Builder()
// The "9515" is the port opened by chrome driver. // The "9515" is the port opened by chrome driver.
.usingServer('http://localhost:9515') .usingServer('http://localhost:9515')
.withCapabilities({ .withCapabilities({
@ -85,7 +124,7 @@ $ npm install webdriverio
```javascript ```javascript
const webdriverio = require('webdriverio'); const webdriverio = require('webdriverio');
var options = { const options = {
host: "localhost", // Use localhost as chrome driver server host: "localhost", // Use localhost as chrome driver server
port: 9515, // "9515" is the port opened by chrome driver. port: 9515, // "9515" is the port opened by chrome driver.
desiredCapabilities: { desiredCapabilities: {
@ -97,14 +136,14 @@ var options = {
} }
}; };
var client = webdriverio.remote(options); let client = webdriverio.remote(options);
client client
.init() .init()
.url('http://google.com') .url('http://google.com')
.setValue('#q', 'webdriverio') .setValue('#q', 'webdriverio')
.click('#btnG') .click('#btnG')
.getTitle().then(function(title) { .getTitle().then((title) => {
console.log('Title was: ' + title); console.log('Title was: ' + title);
}) })
.end(); .end();
@ -114,6 +153,7 @@ client
Electronはリビルドせずにアプリケーションをテストするために、単純にElectronのリソースディレクトリでアプリのソースを[配置します](https://github.com/electron/electron/blob/master/docs/tutorial/application-distribution.md)。 Electronはリビルドせずにアプリケーションをテストするために、単純にElectronのリソースディレクトリでアプリのソースを[配置します](https://github.com/electron/electron/blob/master/docs/tutorial/application-distribution.md)。
もしくは、アプリのフォルダーを引数にしてElectronバイナリを実行します。これは、Electronのリソースディレクトリにアプリをコピーペーストする必要性を除きます。 もしくは、アプリのフォルダーを引数にしてElectronバイナリを実行します。これによって、Electronのリソースディレクトリにアプリをコピーペーストする必要がなくなります。
[chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/ [chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/
[spectron]: http://electron.atom.io/spectron

View file

@ -4,9 +4,9 @@ Electronで、Chromeブラウザーに同梱される Widevine CDMプラグイ
## プラグインを取得する ## プラグインを取得する
Electronは、ライセンス的な理由でWidevine CDMプラグインは同梱されません。Widevine CDMプラグインを取得するために、最初に、使用するElectronビルドのChromバージョンとアーキテクチャを合わせた公式のChromeブラウザーをインストールする必要があります。 Electronは、ライセンス的な理由でWidevine CDMプラグインは同梱されません。Widevine CDMプラグインを取得するために、最初に、使用するElectronビルドのChromeバージョンとアーキテクチャを合わせた公式のChromeブラウザーをインストールする必要があります。
__Note:__ Chromeブラウザの主要バージョンは、Electronが使用するChromeバージョンと同じでなければなりません。そうでなければ、プラグインは、`navigator.plugins`経由でロードされて表示されるにも関わらず動作しません。 __Note:__ Chromeブラウザのメジャーバージョンは、Electronが使用するChromeバージョンと同じでなければなりません。そうでなければ、プラグインは、`navigator.plugins`経由でロードされて表示されるにも関わらず動作しません。
### Windows & OS X ### Windows & OS X
@ -39,14 +39,14 @@ app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.p
// The version of plugin can be got from `chrome://plugins` page in Chrome. // The version of plugin can be got from `chrome://plugins` page in Chrome.
app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866'); app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866');
var mainWindow = null; let win = null;
app.on('ready', function() { app.on('ready', () => {
mainWindow = new BrowserWindow({ win = new BrowserWindow({
webPreferences: { webPreferences: {
// The `plugins` have to be enabled. // The `plugins` have to be enabled.
plugins: true plugins: true
} }
}) });
}); });
``` ```