From c313b1fb96928a4f8eff2b611f4d89a455fe9a93 Mon Sep 17 00:00:00 2001 From: Jessica Lord Date: Tue, 20 Dec 2016 17:52:35 -0800 Subject: [PATCH] HTML for JP translation --- index-jp.html | 300 +++++++++++++++++++++++++++++++++++++ index_JP.md => index-jp.md | 0 2 files changed, 300 insertions(+) create mode 100644 index-jp.html rename index_JP.md => index-jp.md (100%) diff --git a/index-jp.html b/index-jp.html new file mode 100644 index 0000000..9cb65d5 --- /dev/null +++ b/index-jp.html @@ -0,0 +1,300 @@ + + + + + + + + + + + + + + Essential Electron + + + + +
+

Essential Electron

+

Electronについての簡潔で飾らない話

+ + + + + + + + + + + + + + + + + + + + +
Background
Electronとは？
なぜ重要？
では、どうやって？
開発はどのように？
+ + + + + + + + + + + + + + + + + + + + + + + +
Development
前提条件
2つのプロセス
メインプロセス
レンダラプロセス
こう考えてみよう
+ + + + + + + + + + + + + + + + + + + + + + + +
Development Cont'd
通信を絶やさない
プロセスはひとまとめに
クイックスタート
パッケージ化
さらに
+

electronとは？

+

ElectronはJavaScript、HTML、CSSを使ってデスクトップアプリケーションを作ることができるライブラリです。作ったアプリケーションはMac、Windows、Linuxで動かせます。

+

次は：なぜ重要？

+

定義：

+ +

参考資料

+ +

なぜ重要？

+

一般に、デスクトップアプリケーションは各オペレーティングシステムのネイティブ言語で書かれています。ということは、アプリケーション1つに、3つのバージョンを書く3つのチームが必要になるかもしれません。ElectronならばWebページ用の言語を使って、アプリケーションを1回作れば済みます。

+

次は：では、どうやって？

+

定義：

+ +

では、どうやって？

+

ElectronはChromiumとNode.jsを、ファイルオープンのダイアログボックス、通知、アイコンなどといったOS固有の機能向けの一連のカスタムAPIに、結びつけています。

+

Electron components +注釈: +Chromium／Webページ作成用 +Node.js／ファイルシステムとネットワーク用 +ネイティブAPI／3つのOS用

+

次は： 開発はどのように？

+

定義：

+ +

参考資料：

+ +

開発はどのように？

+

Electronによる開発は、シームレスにNodeを利用できるWebページを構築するようなものです。あるいは、HTMLやCSSでインターフェースを作成できるようなNodeのアプリケーションを構築するようなものと言えます。その上、単一のブラウザ、つまり最新のChromeだけに対して設計すればよいようになっています。

+

次は：前提条件

+

定義：

+ +

参考資料：

+ +

前提条件

+

Electronには、WebサイトとJavaScriptという2つの構成要素があります。そのため、開発に着手する前に、その2つをよく知っておく必要があります。HTML、CSS、JavaScriptに関するチュートリアル等を確認して、自分のコンピュータにNodeをインストールしておいてください。

+

定義：

+ +

次は：2つのプロセス

+

参考資料：

+ +

2つのプロセス

+

Electronには、メインとレンダラという2種類のプロセスがあります。そして、それぞれ、または両方のプロセスで稼働するモジュールがあります。レンダラプロセスが、アプリケーションにおける各ウィンドウであるのに対して、メインプロセスは、どちらかというと背後に隠れているプロセスです。

+

定義：

+ +

次は：メインプロセス

+

参考資料：

+ +

メインプロセス

+

メインプロセス(一般的に、main.jsという名前のファイルです)は、あらゆるElectronアプリケーションにおけるエントリーポイントとなります。オープンからクローズまで、アプリケーションの生命を管理します。メインプロセスはまた、ネイティブな要素を呼び出し、それぞれの新たなレンダラプロセスをアプリケーション内に作成します。メインプロセスには完全なNode APIがビルトインされています。

+

main process diagram

+

注釈：メインプロセス +取得する内容

+
    +
  • Node.js API
    • +
  • Electronのメインプロセスモジュール
    • +
+

一般的なタスク

+ +

定義：

+ +

次は：レンダラプロセス

+

参考資料：

+ +

レンダラプロセス

+

レンダラプロセスは、アプリケーションにおけるブラウザウィンドウです。メインプロセスとは異なり、複数のプロセスの存在が可能で、それぞれが独立しています。またレンダラプロセスは隠すこともできます。通常レンダラプロセスはindex.htmlという名前です。これは典型的なHTMLのファイルのようですが、Webブラウザとは異なり、Electronでは全てのNode APIを利用できます。

+

renderer process diagram + +注釈：レンダラプロセス

+

取得する内容

+
    +
  • Node.ｊｓ API
    • +
  • DOM API
    • +
  • Electronレンダラプロセスモジュール
    • +
+

一般的なタスク：

+ +

定義：

+ +

次は：こう考えてみよう

+

参考資料：

+ +

こう考えてみよう

+

Chrome（または別のWebブラウザ）における各タブ・各Webページは、Electronにおけるレンダラプロセス1つに相当します。Chromeの全タブを閉じてもChromeが残っている状態がElectronのメインプロセスに似ていて、新しいウィンドウを開いたり、アプリケーションを終えたりすることができます。

+

Chrome comparison of the two processes + +注釈：メインプロセス、レンダラプロセス +

+

参考資料：

+ +

次は：通信を絶やさない

+

通信を絶やさない

+

メインプロセスとレンダラプロセスは、それぞれ違うタスクに責任を負っていることから、互いに通信可能であることが必要です。そのためにプロセス間通信（IPC）があります。IPCを用いて、メインプロセスとレンダラプロセス間でメッセージをやり取りします。

+

IPC diagram +注釈：プロセス間でメッセージを送る

+

定義：

+ +

次は：プロセスはひとまとめに

+

プロセスはひとまとめに

+

ElectronアプリケーションはNodeアプリケーションと同様に、package.jsonファイルを使います。そこでどのファイルがメインプロセスか、すなわち、どこでElectronにアプリケーションをスタートさせるかを定義させています。そしてメインプロセスはレンダラプロセスを作り、IPCを用いて2つのプロセス間でメッセージを送ることができます。

+

Electron app components diagram +注釈：1. アプリの開始ポイントを決める。2. アプリを起動し、レンダラプロセスを作成する。3. アプリのインターフェースをレイアウトし整える。4. IPCを用いてメインプロセスでタスクを実行し、情報を得る。

+

定義：

+ +

次は：クイックスタート

+

クイックスタート

+

Electronクイックスタートリポジトリはpackage.jsonやmain.jsそしてindex.htmlによる最小構成のElectronアプリです。ここで学んできたもので、取りかかりには最適です。また選択したフレームワークでテンプレート用のボイラープレートをチェックしておきましょう。

+

次は：パッケージ化

+

参考資料：

+ +

パッケージ化

+

アプリをいったん構築したら、MacやWindowsあるいはLiux用にコマンドラインツールelectron-packagerでパッケージ化することができます。そのためにpackage.jsonにスクリプトを加えます。以下でMacやWindowsのアプリケーションストアでアプリを得るためのリソースを確認してください。

+

次は：さらに

+

定義：

+ +

参考資料：

+ +

さらに

+

ここでのコンセプトだけで十分、事足りるでしょうが、もちろんまだ学ぶべきことはあります。ここにさらに参考となる情報を記しておきます。

+

参考資料：

+ + +
+ + + diff --git a/index_JP.md b/index-jp.md similarity index 100% rename from index_JP.md rename to index-jp.md