├── .gitignore ├── LICENSE.md ├── README.md ├── favicon.png ├── footer.html ├── header.html ├── imgs ├── app-files.png ├── components.png ├── ipc.png ├── like-this.png ├── main.png └── renderer.png ├── index-jp.html ├── index-jp.md ├── index.html ├── index.js ├── index.md ├── package.json └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Jessica Lord 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Essential Electron screenshot](https://cloud.githubusercontent.com/assets/1305617/17867404/3e699c20-685f-11e6-9303-c98862a0540a.png) 2 | 3 | # Essential Electron 4 | 5 | This is a informational website about Electron, answering essential Electron concepts in plain-speak, a few diagrams and links to resources for diving in deeper. 6 | 7 | --- 8 | 9 | This was an idea I had about a different type of documentation—or something—where text was kept short, jargon was expanded upon, concepts were defined and links provided for more in-depth explanations. I built this out because I couldn't get the idea out of my head without trying to see it through, so here it is! There is more I'll likely keep tweaking. Hopefully some will find it useful :smile: 10 | 11 | Here's a [blog post](http://jlord.us/blog/essential-electron.html) with a bit more info. 12 | 13 | ### Build it 14 | 15 | The site is built from one markdown file `index.md` with one bit of inline HTML for creating the styles on the vocabulary words. The markdown is parsed and turned into HTML, sandwiched between `header.html` and `footer.html` through a tiny Node script in `index.js`. 16 | 17 | The stylesheet is `style.css` and it uses system fonts unless you have Source Sans Pro installed locally. 18 | 19 | You'll need [Node.js](https://nodejs.org) to build this site: 20 | 21 | ```bash 22 | # Clone repository 23 | git clone https://github.com/jlord/essential-electron.git 24 | # Go into repository clone 25 | cd essential-electron 26 | # Install dependencies 27 | npm install 28 | # Rebuild if changes have been made to: 29 | # index.md, footer.html, header.html 30 | npm start 31 | # Open the page in your browser 32 | open index.html 33 | ``` 34 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/favicon.png -------------------------------------------------------------------------------- /footer.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Essential Electron 15 | 16 | 17 | 18 | 19 |
20 | -------------------------------------------------------------------------------- /imgs/app-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/imgs/app-files.png -------------------------------------------------------------------------------- /imgs/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/imgs/components.png -------------------------------------------------------------------------------- /imgs/ipc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/imgs/ipc.png -------------------------------------------------------------------------------- /imgs/like-this.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/imgs/like-this.png -------------------------------------------------------------------------------- /imgs/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/imgs/main.png -------------------------------------------------------------------------------- /imgs/renderer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlord/essential-electron/08431f0feedf8bad31a050eea43580abb4d4794e/imgs/renderer.png -------------------------------------------------------------------------------- /index-jp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Essential Electron 15 | 16 | 17 | 18 | 19 |
20 |

Essential Electron

21 |

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

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
Background
Electronとは?
なぜ重要?
では、どうやって?
開発はどのように?
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
Development
前提条件
2つのプロセス
メインプロセス
レンダラプロセス
こう考えてみよう
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
Development Cont'd
通信を絶やさない
プロセスはひとまとめに
クイックスタート
パッケージ化
さらに
91 |

electronとは?

92 |

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

93 |

次は:なぜ重要?

94 |

定義:

95 | 99 |

参考資料

100 | 104 |

なぜ重要?

105 |

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

106 |

次は:では、どうやって?

107 |

定義:

108 | 111 |

では、どうやって?

112 |

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

113 |

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

118 |

次は: 開発はどのように?

119 |

定義:

120 | 125 |

参考資料:

126 | 132 |

開発はどのように?

133 |

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

134 |

次は:前提条件

135 |

定義:

136 | 141 |

参考資料:

142 | 147 |

前提条件

148 |

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

149 |

定義:

150 | 153 |

次は:2つのプロセス

154 |

参考資料:

155 | 163 |

2つのプロセス

164 |

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

165 |

定義:

166 | 169 |

次は:メインプロセス

170 |

参考資料:

171 | 174 |

メインプロセス

175 |

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

176 |

main process diagram

177 |

注釈:メインプロセス 178 | 取得する内容

179 |
    180 |
  • Node.js API
  • 181 |
  • Electronのメインプロセスモジュール
  • 182 |
183 |

一般的なタスク

184 |
189 |

定義:

190 | 193 |

次は:レンダラプロセス

194 |

参考資料:

195 | 198 |

レンダラプロセス

199 |

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

200 |

renderer process diagram 201 | 202 | 注釈:レンダラプロセス

203 |

取得する内容

204 |
    205 |
  • Node.js API
  • 206 |
  • DOM API
  • 207 |
  • Electronレンダラプロセスモジュール
  • 208 |
209 |

一般的なタスク:

210 |
215 |

定義:

216 | 220 |

次は:こう考えてみよう

221 |

参考資料:

222 | 225 |

こう考えてみよう

226 |

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

227 |

Chrome comparison of the two processes 228 | 229 | 注釈:メインプロセス、レンダラプロセス 230 |

231 |

参考資料:

232 | 235 |

次は:通信を絶やさない

236 |

通信を絶やさない

237 |

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

238 |

IPC diagram 239 | 注釈:プロセス間でメッセージを送る

240 |

定義:

241 | 244 |

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

245 |

プロセスはひとまとめに

246 |

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

247 |

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

249 |

定義:

250 | 253 |

次は:クイックスタート

254 |

クイックスタート

255 |

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

256 |

次は:パッケージ化

257 |

参考資料:

258 | 262 |

パッケージ化

263 |

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

264 |

次は:さらに

265 |

定義:

266 | 269 |

参考資料:

270 | 276 |

さらに

277 |

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

278 |

参考資料:

279 | 285 | 288 |
289 | 299 | 300 | 301 | -------------------------------------------------------------------------------- /index-jp.md: -------------------------------------------------------------------------------- 1 | # Essential Electron 2 | 3 | Electronについての簡潔で飾らない話 4 | 5 | | Background | 6 | | --- | 7 | | [Electronとは?](#electronとは) | 8 | | [なぜ重要?](#なぜ重要) | 9 | | [では、どうやって?](#ではどうやって) | 10 | | [開発はどのように?](#開発はどのように) | 11 | 12 | | Development | 13 | | --- | 14 | | [前提条件](#前提条件) | 15 | | [2つのプロセス](#2つのプロセス) | 16 | | [メインプロセス](#メインプロセス) | 17 | | [レンダラプロセス](#レンダラプロセス) | 18 | | [こう考えてみよう](#こう考えてみよう) | 19 | 20 | | Development Cont'd | 21 | | --- | 22 | | [通信を絶やさない](#通信を絶やさない) | 23 | | [プロセスはひとまとめに](#プロセスはひとまとめに) | 24 | | [クイックスタート](#クイックスタート) | 25 | | [パッケージ化](#パッケージ化) | 26 | | [さらに](#さらに) | 27 | 28 | ## electronとは? 29 | 30 | ElectronはJavaScript、HTML、CSSを使ってデスクトップアプリケーションを作ることができるライブラリです。作ったアプリケーションはMac、Windows、Linuxで動かせます。 31 | 32 | ### 次は:[なぜ重要?](#なぜ重要) 33 | 34 | ### 定義: 35 | * __JavaScript、HTML、CSS__ はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 36 | * __Electronはライブラリです__ Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 37 | 38 | ### 参考資料 39 | * [Apps built on Electron](http://electron.atom.io/apps/) 40 | * [Electron API Demos](http://electron.atom.io/#get-started)(Electronで何ができるかをみてください) 41 | 42 | ## なぜ重要? 43 | 44 | 一般に、デスクトップアプリケーションは各オペレーティングシステムのネイティブ言語で書かれています。ということは、アプリケーション1つに、3つのバージョンを書く3つのチームが必要になるかもしれません。ElectronならばWebページ用の言語を使って、アプリケーションを1回作れば済みます。 45 | 46 | ### 次は:[では、どうやって?](#ではどうやって) 47 | 48 | ### 定義: 49 | * __ネイティブ(OS)言語__ 主要OSの構成に使われている言語は(ほぼ)次のとおりです。MacはObjective-C、LinuxはC言語、WindowsはC++言語。 50 | 51 | ## では、どうやって? 52 | 53 | ElectronはChromiumNode.jsを、ファイルオープンのダイアログボックス、通知、アイコンなどといったOS固有の機能向けの一連のカスタムAPIに、結びつけています。 54 | 55 | Electron components 56 | 注釈: 57 | Chromium/Webページ作成用 58 | Node.js/ファイルシステムとネットワーク用 59 | ネイティブAPI/3つのOS用 60 | 61 | ### 次は: [開発はどのように?](#開発はどのように) 62 | 63 | ### 定義: 64 | * __API__ Application Program Interfaceには、ライブラリを使えるように一連の機能が記述されています。 65 | * __Chromium__ Googleにより作られている、GoogleのブラウザであるChromeに使われたオープンソースのライブラリです。 66 | * __Node.js__(またはNode) サーバ用にJavaScriptを記述するツールです。ファイルシステムやネットワークへアクセスします(手元のコンピュータがサーバにもなるのです!)。 67 | 68 | ### 参考資料: 69 | * [Node.js](https://nodejs.org/en/) 70 | * [Chromium](https://www.chromium.org/) 71 | * [Electron blog post: Using Node as a Library](http://electron.atom.io/blog/2016/08/08/electron-internals-using-node-as-a-library)(かなり詳しいです) 72 | * [Electron versioning](http://electron.atom.io/docs/tutorial/electron-versioning/) 73 | 74 | ## 開発はどのように? 75 | 76 | Electronによる開発は、シームレスにNodeを利用できるWebページを構築するようなものです。あるいは、HTMLやCSSでインターフェースを作成できるようなNodeのアプリケーションを構築するようなものと言えます。その上、単一のブラウザ、つまり最新のChromeだけに対して設計すればよいようになっています。 77 | 78 | ### 次は:[前提条件](#前提条件) 79 | 80 | ### 定義: 81 | * __Nodeを利用する__ それだけではありません。完全なNode APIを自由に使える上に、Node用のパッケージマネージャであるnpmにホストされた既存の300,000を超えるモジュールを利用できます。 82 | * __単一のブラウザ__ 全てのブラウザが同じではありません。Webデザイナや開発者は、どのブラウザでもサイトが同じに見えるよう、余計な作業をしなくてはならないことがよくあります。 83 | * __最新のChrome__ JavaScriptの最新の改訂版であるES2015を90%以上サポートしており、CSS Variablesのような素晴らしい機能を備えています。 84 | 85 | ### 参考資料: 86 | * [Can I Use?](http://caniuse.com/#home)(各ブラウザがサポートしている内容を確認します) 87 | * [Updates to Chrome](https://blog.chromium.org/)(Chromiumのブログ) 88 | * [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en) 89 | 90 | ## 前提条件 91 | 92 | Electronには、WebサイトとJavaScriptという2つの構成要素があります。そのため、開発に着手する前に、その2つをよく知っておく必要があります。HTML、CSS、JavaScriptに関するチュートリアル等を確認して、自分のコンピュータにNodeをインストールしておいてください。 93 | 94 | ### 定義: 95 | * __率直に言うと__、Webサイトの作成方法やNodeの書き方を一晩で学ぶことはできませんが、以下のリンクは入門にきっと役立つことでしょう。 96 | 97 | ### 次は:[2つのプロセス](#2つのプロセス) 98 | 99 | ### 参考資料: 100 | * [Install Node](https://nodejs.org/en/)(LTS版を選択してください) 101 | * [NodeSchool Tutorials](https://nodeschool.io/ja/)(learnyounodeに挑戦してみてください) 102 | * [JS for Cats](http://jsforcats.com/)(Max Ogden著) 103 | * [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/)(Shay Howe著) 104 | * [CSS Tricks](https://css-tricks.com/)(CSSのベストプラクティスとヒントを学ぶ) 105 | * [Mozilla Developer Network](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en)(WebサイトとJavaScriptの辞書のようなもの) 106 | 107 | ## 2つのプロセス 108 | 109 | Electronには、メインとレンダラという2種類のプロセスがあります。そして、それぞれ、または両方のプロセスで稼働するモジュールがあります。レンダラプロセスが、アプリケーションにおける各ウィンドウであるのに対して、メインプロセスは、どちらかというと背後に隠れているプロセスです。 110 | 111 | ### 定義: 112 | * __モジュール__ ElectronのAPIは、その働きごとにまとめられています。例えば、```dialog```モジュールには、ファイルオープン、ファイル保存、アラートのようなネイティブダイアログ用のAPIが全てあります。 113 | 114 | ### 次は:[メインプロセス](#メインプロセス) 115 | 116 | ### 参考資料: 117 | * [Electron APIs List](http://electron.atom.io/docs/api/) 118 | 119 | ## メインプロセス 120 | 121 | メインプロセス(一般的に、```main.js```という名前のファイルです)は、あらゆるElectronアプリケーションにおけるエントリーポイントとなります。オープンからクローズまで、アプリケーションの生命を管理します。メインプロセスはまた、ネイティブな要素を呼び出し、それぞれの新たなレンダラプロセスをアプリケーション内に作成します。メインプロセスには完全なNode APIがビルトインされています。 122 | 123 | main process diagram 124 | 125 | 注釈:メインプロセス 126 | 取得する内容 127 | * Node.js API 128 | * Electronのメインプロセスモジュール 129 | 130 | 一般的なタスク 131 | * レンダラプロセスの作成 132 | * ネイティブな要素の呼び出し 133 | * アプリケーションの開始と終了 134 | 135 | ### 定義: 136 | * __ネイティブな要素の呼び出し__ ダイアログのオープンや他のネイティブなオペレーティングシステムのインタラクションは、リソースを集中的に使うので、レンダラプロセスを妨げないようにメインプロセスで実行されます。 137 | 138 | ### 次は:[レンダラプロセス](#レンダラプロセス) 139 | 140 | ### 参考資料: 141 | * [Electron APIs List](http://electron.atom.io/docs/api/) 142 | 143 | ## レンダラプロセス 144 | 145 | レンダラプロセスは、アプリケーションにおけるブラウザウィンドウです。メインプロセスとは異なり、複数のプロセスの存在が可能で、それぞれが独立しています。またレンダラプロセスは隠すこともできます。通常レンダラプロセスは```index.html```という名前です。これは典型的なHTMLのファイルのようですが、Webブラウザとは異なり、Electronでは全てのNode APIを利用できます。 146 | 147 | renderer process diagram 148 | 149 | 注釈:レンダラプロセス 150 | 151 | 取得する内容 152 | * Node.js API 153 | * DOM API 154 | * Electronレンダラプロセスモジュール 155 | 156 | 一般的なタスク: 157 | * HTMLとCSSによってWebページを設計する 158 | * JavaScriptページのインタラクション 159 | 160 | 161 | ### 定義: 162 | * __それぞれが独立している__ 各レンダラプロセスは別個のプロセスであり、1つが故障しても他のプロセスには影響しません。 163 | * __隠す__ ウィンドウを隠すように設定して、バックグラウンドでコードだけを実行するようにできます。 164 | 165 | ### 次は:[こう考えてみよう](#こう考えてみよう) 166 | 167 | ### 参考資料: 168 | * [Electron APIs List](http://electron.atom.io/docs/api/) 169 | 170 | ## こう考えてみよう 171 | 172 | Chrome(または別のWebブラウザ)における各タブ・各Webページは、Electronにおけるレンダラプロセス1つに相当します。Chromeの全タブを閉じてもChromeが残っている状態がElectronのメインプロセスに似ていて、新しいウィンドウを開いたり、アプリケーションを終えたりすることができます。 173 | 174 | Chrome comparison of the two processes 175 | 176 | 注釈:メインプロセス、レンダラプロセス 177 | 178 | 179 | ### 参考資料: 180 | * [Differences between Main and Renderer Process](http://electron.atom.io/docs/tutorial/quick-start/#differences-between-main-process-and-renderer-process) 181 | 182 | ### 次は:[通信を絶やさない](#通信を絶やさない) 183 | 184 | ## 通信を絶やさない 185 | 186 | メインプロセスとレンダラプロセスは、それぞれ違うタスクに責任を負っていることから、互いに通信可能であることが必要です。そのためにプロセス間通信(IPC)があります。IPCを用いて、メインプロセスとレンダラプロセス間でメッセージをやり取りします。 187 | 188 | IPC diagram 189 | *注釈:プロセス間でメッセージを送る* 190 | 191 | ### 定義: 192 | * __IPC__ メインプロセスとレンダラプロセスはそれぞれIPCモジュールを持っている。 193 | 194 | ### 次は:[プロセスはひとまとめに](#プロセスはひとまとめに) 195 | 196 | ## プロセスはひとまとめに 197 | 198 | ElectronアプリケーションはNodeアプリケーションと同様に、```package.json```ファイルを使います。そこでどのファイルがメインプロセスか、すなわち、どこでElectronにアプリケーションをスタートさせるかを定義させています。そしてメインプロセスはレンダラプロセスを作り、IPCを用いて2つのプロセス間でメッセージを送ることができます。 199 | 200 | Electron app components diagram 201 | *注釈:1. アプリの開始ポイントを決める。2. アプリを起動し、レンダラプロセスを作成する。3. アプリのインターフェースをレイアウトし整える。4. IPCを用いてメインプロセスでタスクを実行し、情報を得る。* 202 | 203 | ### 定義: 204 | * __```package.json```ファイル__ Nodeアプリケーションでは一般的なファイルであり、プロジェクトについてのメタデータと依存関係のリストを含んでいる。 205 | 206 | ### 次は:[クイックスタート](#クイックスタート) 207 | 208 | ## クイックスタート 209 | 210 | Electronクイックスタートリポジトリは```package.json```や```main.js```そして```index.html```による最小構成のElectronアプリです。ここで学んできたもので、取りかかりには最適です。また選択したフレームワークでテンプレート用のボイラープレートをチェックしておきましょう。 211 | 212 | ### 次は:[パッケージ化](#パッケージ化) 213 | 214 | ### 参考資料: 215 | * [Electron Quick Start](https://github.com/electron/electron-quick-start) 216 | * [Awesome Electron: Boilerplates](http://electron.atom.io/community/#boilerplates) 217 | 218 | ## パッケージ化 219 | 220 | アプリをいったん構築したら、MacやWindowsあるいはLiux用にコマンドラインツール```electron-packager```でパッケージ化することができます。そのために```package.json```にスクリプトを加えます。以下でMacやWindowsのアプリケーションストアでアプリを得るためのリソースを確認してください。 221 | 222 | ### 次は:[さらに](#さらに) 223 | 224 | ### 定義: 225 | * __コマンドラインツール__ 端末でコマンドを送信することによって相互作用させるプログラム。 226 | 227 | ### 参考資料: 228 | * [electron-packager](https://github.com/electron-userland/electron-packager) 229 | * [Electron API Demos packaging scripts](https://github.com/electron/electron-api-demos/blob/master/package.json#L15-L18) 230 | * [Mac App Store Electron Guide](http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/) 231 | * [Windows App Store Electron Guide](http://electron.atom.io/docs/tutorial/windows-store-guide/) 232 | 233 | ## さらに 234 | 235 | ここでのコンセプトだけで十分、事足りるでしょうが、もちろんまだ学ぶべきことはあります。ここにさらに参考となる情報を記しておきます。 236 | 237 | ### 参考資料: 238 | * [Full Electron docs](http://electron.atom.io/docs/) 239 | * [Awesome Electron: tools, videos, components, meetups](http://electron.atom.io/community/) 240 | * [Spectron](http://electron.atom.io/spectron/)(Electronのテストライブラリ) 241 | * [Devtron](http://electron.atom.io/devtron/)(Electronアプリを精査する) 242 | 243 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Essential Electron 15 | 16 | 17 | 18 | 19 |
20 |

Essential Electron

21 |

Concise plain-speak about Electron.

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
Background
What is Electron?
Why is this important?
How, even?
What is developing like?
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
Development
Prereqs
Two Processes
Main Process
Renderer Process
Think of it like this
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
Development Cont'd
Stay in touch
Put it all together
Quick start
Packaging
More resources
91 |

Read this in Japanese.

92 |

What is Electron?

93 |

Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores.

94 |

Next: Why is this important?

95 |

Definitions:

96 | 100 |

Resources:

101 | 105 |

Why is this important?

106 |

Typically, desktop applications for each operating system are written in each's native language. That can mean having three teams writing three versions of your app. Electron enables you to write your app once and with web languages.

107 |

Next: How, even?

108 |

Definitions:

109 | 112 |

How, even?

113 |

Electron combines Chromium and Node.js with a set of custom APIs for native operating system functions like open file dialogs, notifications, icons and more.

114 |

Electron components

115 |

Next: What is developing like?

116 |

Definitions:

117 | 122 |

Resources:

123 | 129 |

What's developing like?

130 |

Developing with Electron is like building web pages that you can seamlessly use Node in—or building a Node app in which you can build an interface with HTML and CSS. And you only need to design for one browser, the latest Chrome.

131 |

Next: Prereqs

132 |

Definitions:

133 | 138 |

Resources:

139 | 144 |

Prereqs

145 |

Since Electron's two components are websites and JavaScript, you'll need experience in both of those before you begin. Check out some tutorials on HTML, CSS and JS and install Node on your computer.

146 |

Definitions:

147 | 150 |

Next: Two Processes

151 |

Resources:

152 | 160 |

Two Processes

161 |

Electron has two types of processes: Main and Renderer. There are modules that work on each or in both of the processes. The main process is more behind-the-scenes while the renderer process is each of the windows in your app.

162 |

Definitions:

163 | 166 |

Next: Main Process

167 |

Resources:

168 | 171 |

Main Process

172 |

The main process, commonly a file named main.js, is the entry point to every Electron app. It controls the life of the app, from open to close. It also calls the native elements and creates each new renderer process in the app. The full Node API is built in.

173 |

main process diagram

174 |

Definitions:

175 | 178 |

Next: Renderer Process

179 |

Resources:

180 | 183 |

Renderer Process

184 |

The renderer process is a browser window in your app. Unlike the main process, there can be multiple of these and each is independent. They can also be hidden. Usually one is named index.html. They're like typical HTML files but in Electron you've got the whole Node API available here, too, unlike any web browser.

185 |

renderer process diagram

186 |

Definitions:

187 | 191 |

Next: Think of it like this

192 |

Resources:

193 | 196 |

Think of it like this

197 |

In Chrome (or another web browser) each tab and its web page is like a single renderer process in Electron. If you close all of the tabs, Chrome is still there, this is like your main process, and you can open a new window or quit the app.

198 |

Chrome comparison of the two processes

199 |

Resources:

200 | 203 |

Next: Stay in touch

204 |

Stay in touch

205 |

The main and renderer processes need to be able to communicate since they're both responsible for different tasks. For that there's IPC, interprocess communication. Use it to pass messages between main and renderer processes.

206 |

IPC diagram

207 |

Definitions:

208 | 211 |

Next: Put it all together

212 |

Put it all together

213 |

Electron apps are like Node apps and use a package.json file. It's there that you define which file is your main process and thus where Electron should start your app. Then that main process can create renderer processes and you'll use IPC to pass messages between the two.

214 |

Electron app components diagram

215 |

Definitions:

216 | 219 |

Next: Quick start

220 |

Quick start

221 |

The Electron Quick Start repository is a bare-bones Electron app with the package.json, main.js and index.html you've learned about here—a great place to get started! Also, check out the boilerplates for templates with your framework of choice.

222 |

Next: Packaging

223 |

Resources:

224 | 228 |

Packaging

229 |

Once your app is built, you can package it with the command-line tool electron-packager for Mac, Windows or Linux. Add scripts for this to your package.json. Check out resources below for getting your app in the Mac and Windows app stores.

230 |

Next: More resources

231 |

Definitions:

232 | 235 |

Resources:

236 | 242 |

More resources

243 |

The concepts here will get you pretty far, but there is of course more so here are other resources.

244 |

Resources:

245 | 251 | 254 |
255 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var marked = require('marked') 3 | 4 | var translations = ['jp'] 5 | var header = fs.readFileSync('header.html').toString() 6 | var footer = fs.readFileSync('footer.html').toString() 7 | 8 | var markdown = fs.readFileSync('index.md').toString() 9 | var html = marked(markdown) 10 | 11 | fs.writeFileSync('index.html', header + html + footer) 12 | 13 | buildTranslations() 14 | 15 | // TODO make translations dir 16 | function buildTranslations() { 17 | translations.forEach(function (lang) { 18 | var langFile = 'index-' + lang 19 | var langMarkdown = fs.readFileSync(langFile + '.md').toString() 20 | var langHtml = marked(langMarkdown) 21 | fs.writeFileSync(langFile + '.html', header + langHtml + footer) 22 | }) 23 | } 24 | 25 | console.log('(•◡•)/\n') 26 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | # Essential Electron 2 | 3 | Concise plain-speak about Electron. 4 | 5 | | Background | 6 | | --- | 7 | | [What is Electron?](#what-is-electron-) | 8 | | [Why is this important?](#why-is-this-important-) | 9 | | [How, even?](#how-even-) | 10 | | [What is developing like?](#what-s-developing-like-) | 11 | 12 | | Development | 13 | | --- | 14 | | [Prereqs](#prereqs) | 15 | | [Two Processes](#two-processes) | 16 | | [Main Process](#main-process) | 17 | | [Renderer Process](#renderer-process) | 18 | | [Think of it like this](#think-of-it-like-this) | 19 | 20 | | Development Cont'd | 21 | | --- | 22 | | [Stay in touch](#stay-in-touch) | 23 | | [Put it all together](#put-it-all-together) | 24 | | [Quick start](#quick-start) | 25 | | [Packaging](#packaging) | 26 | | [More resources](#more-resources) | 27 | 28 | Read this in [Japanese](index-jp.html). 29 | 30 | ## What is Electron? 31 | 32 | Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores. 33 | 34 | ### Next: [Why is this important?](#why-is-this-important-) 35 | 36 | ### Definitions: 37 | - **JavaScript, HTML and CSS** Are web languages, meaning they are the building blocks of websites and browsers like Chrome know how to turn this code into the visual graphics you see. 38 | - **Electron is a library** Electron is code that you can re-use and not have to write yourself. You use it to build your project on top of. 39 | 40 | ### Resources: 41 | - [Apps built on Electron](http://electron.atom.io/apps) 42 | - [Electron API Demos](http://electron.atom.io/#get-started) (see what you can do with Electron) 43 | 44 | ## Why is this important? 45 | 46 | Typically, desktop applications for each operating system are written in each's native language. That can mean having three teams writing three versions of your app. Electron enables you to write your app once and with web languages. 47 | 48 | ### Next: [How, even?](#how-even-) 49 | 50 | ### Definitions: 51 | - **native (operating system) language** These are languages that the major operating systems are (mostly) built with: Mac, Objective C; Linux, C; Windows, C++. 52 | 53 | ## How, even? 54 | 55 | Electron combines Chromium and Node.js with a set of custom APIs for native operating system functions like open file dialogs, notifications, icons and more. 56 | 57 | ![Electron components](imgs/components.png) 58 | 59 | ### Next: [What is developing like?](#what-s-developing-like-) 60 | 61 | ### Definitions: 62 | - **API** Application Program Interface describes the set of functions made available for you to use a library with. 63 | - **Chromium** Created by Google, this is the open source library used by Google's browser Chrome. 64 | - **Node.js** (or Node) A tool for writing JavaScript on servers, accessing filesystems and networks (your computer is also a server!). 65 | 66 | ### Resources: 67 | - [Node.js](https://nodejs.org) 68 | - [Chromium](http://chromium.org) 69 | - [Electron blog post: Using Node as a Library](http://electron.atom.io/blog/2016/08/08/electron-internals-using-node-as-a-library) (deep dive) 70 | - [Electron versioning](http://electron.atom.io/docs/tutorial/electron-versioning/) 71 | 72 | ## What's developing like? 73 | 74 | Developing with Electron is like building web pages that you can seamlessly use Node in—or building a Node app in which you can build an interface with HTML and CSS. And you only need to design for one browser, the latest Chrome. 75 | 76 | ### Next: [Prereqs](#prereqs) 77 | 78 | ### Definitions: 79 | - **Use Node in** That's not all! In addition to the full Node API everywhere, you can make use of the over 300,000 modules already written and hosted on npm, a package manager for Node. 80 | - **One browser** Not all browsers are the same and web designers and developers often have to go the extra mile to make one site look the same on each. 81 | - **Latest Chrome** Use over 90% of ES2015, the latest updates to JavaScript, as well as cool features like CSS Variables. 82 | 83 | ### Resources: 84 | - [Can I Use?](http://caniuse.com/#home) (see what each browser supports) 85 | - [Updates to Chrome](http://blog.chromium.org) (Chromium Blog) 86 | - [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en) 87 | 88 | ## Prereqs 89 | 90 | Since Electron's two components are websites and JavaScript, you'll need experience in both of those before you begin. Check out some tutorials on HTML, CSS and JS and install Node on your computer. 91 | 92 | ### Definitions: 93 | - **Let's be real**, learning to make websites and write Node are not overnight things but hopefully the links below can get you started. 94 | 95 | ### Next: [Two Processes](#two-processes) 96 | 97 | ### Resources: 98 | - [Install Node](https://nodejs.org) (chose the LTS version) 99 | - [NodeSchool Tutorials](http://nodeschool.io) (try learnyounode) 100 | - [JS for Cats](http://jsforcats.com) (by Max Ogden) 101 | - [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css) (by Shay Howe) 102 | - [CSS Tricks](https://css-tricks.com) (learn CSS best practices and tips) 103 | - [Mozilla Developer Network](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en) (like a dictionary for websites and JavaScript) 104 | 105 | ## Two Processes 106 | 107 | Electron has two types of processes: Main and Renderer. There are modules that work on each or in both of the processes. The main process is more behind-the-scenes while the renderer process is each of the windows in your app. 108 | 109 | ### Definitions: 110 | - **Modules** Electron's APIs are grouped together based on what they do. For instance the `dialog` module has all the APIs for native dialogs like open file, save file and alerts. 111 | 112 | ### Next: [Main Process](#main-process) 113 | 114 | ### Resources: 115 | - [Electron APIs List](http://electron.atom.io/docs/api/) 116 | 117 | ## Main Process 118 | 119 | The main process, commonly a file named `main.js`, is the entry point to every Electron app. It controls the life of the app, from open to close. It also calls the native elements and creates each new renderer process in the app. The full Node API is built in. 120 | 121 | ![main process diagram](imgs/main.png) 122 | 123 | ### Definitions: 124 | - **Calls the native elements** Opening dialogs and other native operating system interactions are resource intensive so it's done in the main process, leaving the renderer process uninterrupted. 125 | 126 | ### Next: [Renderer Process](#renderer-process) 127 | 128 | ### Resources: 129 | - [Electron APIs List](http://electron.atom.io/docs/api/) 130 | 131 | ## Renderer Process 132 | 133 | The renderer process is a browser window in your app. Unlike the main process, there can be multiple of these and each is independent. They can also be hidden. Usually one is named `index.html`. They're like typical HTML files but in Electron you've got the whole Node API available here, too, unlike any web browser. 134 | 135 | ![renderer process diagram](imgs/renderer.png) 136 | 137 | ### Definitions: 138 | - **Each is independent** every renderer process is a separate process, meaning a crash in one won't affect another. 139 | - **Hidden** You can set a window to be hidden and use it to just execute code in the background. 140 | 141 | ### Next: [Think of it like this](#think-of-it-like-this) 142 | 143 | ### Resources: 144 | - [Electron APIs List](http://electron.atom.io/docs/api/) 145 | 146 | ## Think of it like this 147 | 148 | In Chrome (or another web browser) each tab and its web page is like a single renderer process in Electron. If you close all of the tabs, Chrome is still there, this is like your main process, and you can open a new window or quit the app. 149 | 150 | ![Chrome comparison of the two processes](imgs/like-this.png) 151 | 152 | ### Resources: 153 | - [Differences between Main and Renderer Process](http://electron.atom.io/docs/tutorial/quick-start/#differences-between-main-process-and-renderer-process) 154 | 155 | ### Next: [Stay in touch](#stay-in-touch) 156 | 157 | ## Stay in touch 158 | 159 | The main and renderer processes need to be able to communicate since they're both responsible for different tasks. For that there's IPC, interprocess communication. Use it to pass messages between main and renderer processes. 160 | 161 | ![IPC diagram](imgs/ipc.png) 162 | 163 | ### Definitions: 164 | - **IPC** The main process and renderer process each have an IPC module to use. 165 | 166 | ### Next: [Put it all together](#put-it-all-together) 167 | 168 | ## Put it all together 169 | 170 | Electron apps are like Node apps and use a `package.json` file. It's there that you define which file is your main process and thus where Electron should start your app. Then that main process can create renderer processes and you'll use IPC to pass messages between the two. 171 | 172 | ![Electron app components diagram](imgs/app-files.png) 173 | 174 | ### Definitions: 175 | - **`package.json` file** This is a common file in Node apps which contains metadata about the project and a list of dependencies. 176 | 177 | ### Next: [Quick start](#quick-start) 178 | 179 | ## Quick start 180 | 181 | The Electron Quick Start repository is a bare-bones Electron app with the `package.json`, `main.js` and `index.html` you've learned about here—a great place to get started! Also, check out the boilerplates for templates with your framework of choice. 182 | 183 | ### Next: [Packaging](#packaging) 184 | 185 | ### Resources: 186 | - [Electron Quick Start](https://github.com/electron/electron-quick-start) 187 | - [Awesome Electron: Boilerplates](http://electron.atom.io/community#boilerplates) 188 | 189 | ## Packaging 190 | 191 | Once your app is built, you can package it with the command-line tool `electron-packager` for Mac, Windows or Linux. Add scripts for this to your `package.json`. Check out resources below for getting your app in the Mac and Windows app stores. 192 | 193 | ### Next: [More resources](#more-resources) 194 | 195 | ### Definitions: 196 | - **command-line tool** This is a program that you interact with by passing commands to it in your terminal. 197 | 198 | ### Resources: 199 | - [electron-packager](http://github.com/electron-userland/electron-packager) 200 | - [Electron API Demos packaging scripts](https://github.com/electron/electron-api-demos/blob/master/package.json#L15-L18) 201 | - [Mac App Store Electron Guide](http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/) 202 | - [Windows App Store Electron Guide](http://electron.atom.io/docs/tutorial/windows-store-guide/) 203 | 204 | ## More resources 205 | 206 | The concepts here will get you pretty far, but there is of course more so here are other resources. 207 | 208 | ### Resources: 209 | - [Full Electron docs](http://electron.atom.io/docs/) 210 | - [Awesome Electron: tools, videos, components, meetups](http://electron.atom.io/community/) 211 | - [Spectron](http://electron.atom.io/spectron/) (Electron testing library) 212 | - [Devtron](http://electron.atom.io/devtron/) (Inspect your Electron app) 213 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "essential-electron", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node index.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "dependencies": { 13 | "marked": "^0.3.6" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 3 | 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 5 | 'Droid Sans', 'Helvetica Neue', sans-serif; 6 | color: #333; 7 | font-size: 1.3em; 8 | line-height: 1.5em; 9 | margin: 0; 10 | } 11 | 12 | img { 13 | width: 100%; 14 | } 15 | 16 | h1 { 17 | font-size: 4em; 18 | line-height: 1em; 19 | } 20 | 21 | h1 + p { 22 | padding-bottom: 40px; 23 | } 24 | 25 | h2 { 26 | font-size: 3em; 27 | line-height: 1.5em; 28 | } 29 | 30 | h1 +p, 31 | h2 + p { 32 | font-size: 2em; 33 | line-height: 1.5em; 34 | } 35 | 36 | h2 { 37 | border-top: 2px solid #333; 38 | padding-top: 40px; 39 | } 40 | 41 | h3 { 42 | line-height: 1.5em; 43 | } 44 | 45 | h4, 46 | h4 + ul { 47 | } 48 | 49 | h2, h3, h4, h5, h6 { 50 | padding-top: 20px; 51 | margin-bottom: 0; 52 | } 53 | 54 | 55 | a { 56 | color: #333; 57 | text-decoration: none; 58 | padding-bottom: 2px; 59 | border-bottom: 2px solid #333; 60 | } 61 | 62 | .wrapper { 63 | max-width: 900px; 64 | min-width: 300px; 65 | padding: 20px; 66 | box-sizing: border-box; 67 | margin: 0 auto; 68 | } 69 | 70 | .def, 71 | h3 + ul strong { 72 | color: #569efe; 73 | } 74 | 75 | table { 76 | display: inline-block; 77 | vertical-align: top; 78 | max-width: 100%; 79 | text-align: left; 80 | } 81 | 82 | table th { 83 | padding-bottom: 12px; 84 | font-size: 1.2em; 85 | } 86 | 87 | table th, 88 | table tbody td { 89 | padding: 8px 12px; 90 | } 91 | 92 | table tbody tr:nth-of-type(odd) { 93 | background: #f9f9f9; 94 | } 95 | 96 | code { 97 | font-family: Consolas, 'Liberation Mono', 98 | Menlo, Courier, monospace; 99 | font-size: .75em; 100 | border: 1px solid #d1d1d1; 101 | padding: 4px 11px 3px 11px; 102 | border-radius: 13px; 103 | } 104 | 105 | footer { 106 | padding: 20px 0; 107 | } 108 | 109 | @media (max-width: 900px) { 110 | h1 { font-size: 3em; line-height: 1.2em; } 111 | h2 { font-size: 2em; line-height: 1.5em; } 112 | h1 + p, h2 + p { font-size: 1em; line-height: 1.5em; } 113 | table + table + table th { display: none;} 114 | } 115 | --------------------------------------------------------------------------------