From 0e6a70c556363befe1e9f8be2d168fc030e7aa49 Mon Sep 17 00:00:00 2001 From: Sota Yamashita Date: Sun, 7 Jun 2015 15:52:19 +0900 Subject: [PATCH] Tranlsate quick-start-jp.md: status first Translate: quick-start-jp.md Fix bug Tranlsate the world web Change the method Translate tutorial/quick-start-jp.md Translate docs Translate Translate quick-start --- docs/tutorial/quick-start-jp.md | 131 ++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 docs/tutorial/quick-start-jp.md diff --git a/docs/tutorial/quick-start-jp.md b/docs/tutorial/quick-start-jp.md new file mode 100644 index 000000000000..d64c5ae9a38f --- /dev/null +++ b/docs/tutorial/quick-start-jp.md @@ -0,0 +1,131 @@ +# クイックスタート + +## 導入 + +ElectronではリッチなネイティブAPIを持ったランタイムを提供することによってピュアなJavaScriptでデスクトップアプリケーションをつくることができます。ウェブサーバーの代わりにデスクトップアプリケーションに焦点をあてたio.jsランタイムであるといえばわかりやすいかもしれません。 + +ElectronはJavaScriptをGUIライブラリにバインディングしません。その代わりに、ElectronはウェブページをGUIとして使用します。なのでElectronはJavaScriptによってコントロールされる最小のChromiumブラウザでもあるともいえます。 + +### メインプロセス + +Electronでは、`package.json` の `main`で実行されるプロセスを __メインプロセス__ と呼びます。メインスクリプトではGUIにウェブページを表示することができるプロセスを実行します。 + +### レンダラープロセス + +Electronはウェブページを表示させるためにChromiumを使用しているので、Chromiumのマルチプロセスアーキテクチャが使用されることになります。Electronで実行されるウェブページはそれぞれ自身のプロセスで実行されます。それを __レンダラープロセス__ と呼びます。 + +通常、ブラウザのウェブページはサウンドボックス環境で実行されネイティブなリソースへのアクセスができません。Electronではウェブページからio.jsのAPIを使って、ネイティブリソースへの権限が与えられます。そのおかげでウェブページの中からJavaScriptを使って低レベルなオペレーティングシステムとのインタラクションが可能になります。 + +### メインプロセスとリレンダラープロセスの違い + +メインプロセスは `BrowserWindow` インスタンスを作ることによってウェブページをつくります。それぞれの `BrowserWindow` インスタンスはそれ自身の リレンダラープロセス上でウェブページを実行します。`BrowserWindow` インスタンスが破棄されると、対応するリレンダラープロセスも終了されます。 + +メインプロセスはすべてのウェブページとそれに対応するリレンダラープロセスを管理しています。それぞれのリレンダラープロセスは分離しているのでウェブページで実行されていることだけを気に留めておいてください。 + +ウェブページでは、GUI関連のAPIを呼ぶことはできません。なぜならば、ウェブページで管理しているネイティブのGUIリソースは非常に危険で簡単にリークしてしまうからです。もしウェブページ内でGUIを操作したい場合には、メインプロセスと通信をする必要があります。 + +Electronでは、メインプロセスとリレンダラープロセスとのコミュニケーションをするために[ipc](../api/ipc-renderer.md)モジュールを提供しています。またそれと、RPC形式の通信を行う[remote](../api/remote.md)モジュールもあります。 + +## Electronアプリを作成する + +一般的に Electronアプリの構成は次のようになります： + +```text +your-app/ +├── package.json +├── main.js +└── index.html +``` + +`package.json`の形式はNodeモジュールとまったく同じです。 `main`　フィールドでアプリを起動するためのスクリプトを特定し、メインプロセスで実行します。 `package.json`の例は次のようになります： + +```json +{ + "name" : "your-app", + "version" : "0.1.0", + "main" : "main.js" +} +``` + +`main.js` ではウィンドウを作成してシステムイベントを管理します。典型的な例は次のようになります： + +```javascript +var app = require('app'); // Module to control application life. +var BrowserWindow = require('browser-window'); // Module to create native browser window. + +// Report crashes to our server. +require('crash-reporter').start(); + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the javascript object is GCed. +var mainWindow = null; + +// Quit when all windows are closed. +app.on('window-all-closed', function() { + if (process.platform != 'darwin') { + app.quit(); + } +}); + +// This method will be called when Electron has done everything +// initialization and ready for creating 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.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; + }); +}); +``` + +最後に表示するウェブページ`index.html`は次のようになります： + + +```html + + + + Hello World! + + +

Hello World!

+ We are using io.js + and Electron . + + +``` + +## アプリを実行する + +アプリケーションを作り終えたら、[Application distribution](./application-distribution.md)ガイドにしたがってディストリビューションを作成します、そしてパッケージされたアプリケーションとして配布することが可能です。またダウンロードしたElectronのバイナリをアプリケーション・ディレクトリを実行するために利用することもできます。 + +Windowsの場合： + +```bash +$ .\electron\electron.exe your-app\ +``` + +Linuxの場合： + +```bash +$ ./electron/electron your-app/ +``` + +OS Xの場合： + +```bash +$ ./Electron.app/Contents/MacOS/Electron your-app/ +``` + +`Electron.app` はElectronのリリースパッケージに含まれており、[ここ](https://github.com/atom/electron/releases) からダウンロードできます。