-
Notifications
You must be signed in to change notification settings - Fork 40
/
index-jp.html
300 lines (297 loc) · 19.5 KB
/
index-jp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Essential information about Electron. Plainly.">
<meta name="author" content="Jessica Lord"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@jllord">
<meta name="twitter:title" content="Essential Electron">
<meta name="twitter:description" content="Concise plain-speak about Electron.">
<meta name="twitter:image" content="https://cloud.githubusercontent.com/assets/1305617/17869520/85f7a4c0-6868-11e6-8152-be3852881347.png">
<title>Essential Electron</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1 id="essential-electron">Essential Electron</h1>
<p>Electronについての簡潔で飾らない話</p>
<table>
<thead>
<tr>
<th>Background</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#electronとは">Electronとは？</a></td>
</tr>
<tr>
<td><a href="#なぜ重要">なぜ重要？</a></td>
</tr>
<tr>
<td><a href="#ではどうやって">では、どうやって？</a></td>
</tr>
<tr>
<td><a href="#開発はどのように">開発はどのように？</a></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Development</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#前提条件">前提条件</a></td>
</tr>
<tr>
<td><a href="#2つのプロセス">2つのプロセス</a></td>
</tr>
<tr>
<td><a href="#メインプロセス">メインプロセス</a></td>
</tr>
<tr>
<td><a href="#レンダラプロセス">レンダラプロセス</a></td>
</tr>
<tr>
<td><a href="#こう考えてみよう">こう考えてみよう</a></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Development Cont'd</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#通信を絶やさない">通信を絶やさない</a></td>
</tr>
<tr>
<td><a href="#プロセスはひとまとめに">プロセスはひとまとめに</a></td>
</tr>
<tr>
<td><a href="#クイックスタート">クイックスタート</a></td>
</tr>
<tr>
<td><a href="#パッケージ化">パッケージ化</a></td>
</tr>
<tr>
<td><a href="#さらに">さらに</a></td>
</tr>
</tbody>
</table>
<h2 id="electron-">electronとは？</h2>
<p>Electronは<span class="def">JavaScript、HTML、CSS</span>を使ってデスクトップアプリケーションを作ることができる<span class="def">ライブラリ</span>です。作ったアプリケーションはMac、Windows、Linuxで動かせます。</p>
<h3 id="-">次は：<a href="#なぜ重要">なぜ重要？</a></h3>
<h3 id="-">定義：</h3>
<ul>
<li><strong>JavaScript、HTML、CSS</strong> はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。</li>
<li><strong>Electronはライブラリです</strong> Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。</li>
</ul>
<h3 id="-">参考資料</h3>
<ul>
<li><a href="http://electron.atom.io/apps/">Apps built on Electron</a></li>
<li><a href="http://electron.atom.io/#get-started">Electron API Demos</a>（Electronで何ができるかをみてください）</li>
</ul>
<h2 id="-">なぜ重要？</h2>
<p>一般に、デスクトップアプリケーションは各オペレーティングシステムの<span class="def">ネイティブ言語</span>で書かれています。ということは、アプリケーション1つに、3つのバージョンを書く3つのチームが必要になるかもしれません。ElectronならばWebページ用の言語を使って、アプリケーションを1回作れば済みます。</p>
<h3 id="-">次は：<a href="#ではどうやって">では、どうやって？</a></h3>
<h3 id="-">定義：</h3>
<ul>
<li><strong>ネイティブ（OS）言語</strong> 主要OSの構成に使われている言語は（ほぼ）次のとおりです。MacはObjective-C、LinuxはC言語、WindowsはC++言語。</li>
</ul>
<h2 id="-">では、どうやって？</h2>
<p>Electronは<span class="def">Chromium</span>と<span class="def">Node.js</span>を、ファイルオープンのダイアログボックス、通知、アイコンなどといったOS固有の機能向けの一連のカスタム<span class="def">API</span>に、結びつけています。</p>
<p><img src="http://jlord.us/essential-electron/imgs/components.png" alt="Electron components">
<em>注釈:
Chromium／Webページ作成用
Node.js／ファイルシステムとネットワーク用
ネイティブAPI／3つのOS用</em></p>
<h3 id="-">次は： <a href="#開発はどのように">開発はどのように？</a></h3>
<h3 id="-">定義：</h3>
<ul>
<li><strong>API</strong> Application Program Interfaceには、ライブラリを使えるように一連の機能が記述されています。</li>
<li><strong>Chromium</strong> Googleにより作られている、GoogleのブラウザであるChromeに使われたオープンソースのライブラリです。</li>
<li><strong>Node.js</strong>（またはNode） サーバ用にJavaScriptを記述するツールです。ファイルシステムやネットワークへアクセスします（手元のコンピュータがサーバにもなるのです！）。</li>
</ul>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="https://nodejs.org/en/">Node.js</a></li>
<li><a href="https://www.chromium.org/">Chromium</a></li>
<li><a href="http://electron.atom.io/blog/2016/08/08/electron-internals-using-node-as-a-library">Electron blog post: Using Node as a Library</a>（かなり詳しいです）</li>
<li><a href="http://electron.atom.io/docs/tutorial/electron-versioning/">Electron versioning</a></li>
</ul>
<h2 id="-">開発はどのように？</h2>
<p>Electronによる開発は、シームレスに<span class="def">Nodeを利用</span>できるWebページを構築するようなものです。あるいは、HTMLやCSSでインターフェースを作成できるようなNodeのアプリケーションを構築するようなものと言えます。その上、<span class="def">単一のブラウザ</span>、つまり<span class="def">最新のChrome</span>だけに対して設計すればよいようになっています。</p>
<h3 id="-">次は：<a href="#前提条件">前提条件</a></h3>
<h3 id="-">定義：</h3>
<ul>
<li><strong>Nodeを利用する</strong> それだけではありません。完全なNode APIを自由に使える上に、Node用のパッケージマネージャであるnpmにホストされた既存の300,000を超えるモジュールを利用できます。</li>
<li><strong>単一のブラウザ</strong> 全てのブラウザが同じではありません。Webデザイナや開発者は、どのブラウザでもサイトが同じに見えるよう、余計な作業をしなくてはならないことがよくあります。</li>
<li><strong>最新のChrome</strong> JavaScriptの最新の改訂版であるES2015を90％以上サポートしており、CSS Variablesのような素晴らしい機能を備えています。</li>
</ul>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="http://caniuse.com/#home">Can I Use?</a>（各ブラウザがサポートしている内容を確認します）</li>
<li><a href="https://blog.chromium.org/">Updates to Chrome</a>（Chromiumのブログ）</li>
<li><a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en">CSS Variables</a></li>
</ul>
<h2 id="-">前提条件</h2>
<p>Electronには、WebサイトとJavaScriptという2つの構成要素があります。そのため、開発に着手する前に、その2つをよく知っておく必要があります。HTML、CSS、JavaScriptに関するチュートリアル等を確認して、自分のコンピュータにNodeをインストールしておいてください。</p>
<h3 id="-">定義：</h3>
<ul>
<li><strong>率直に言うと</strong>、Webサイトの作成方法やNodeの書き方を一晩で学ぶことはできませんが、以下のリンクは入門にきっと役立つことでしょう。</li>
</ul>
<h3 id="-2-2-">次は：<a href="#2つのプロセス">2つのプロセス</a></h3>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="https://nodejs.org/en/">Install Node</a>（LTS版を選択してください）</li>
<li><a href="https://nodeschool.io/ja/">NodeSchool Tutorials</a>（learnyounodeに挑戦してみてください）</li>
<li><a href="http://jsforcats.com/">JS for Cats</a>（Max Ogden著）</li>
<li><a href="http://learn.shayhowe.com/html-css/">Learn to Code HTML & CSS</a>（Shay Howe著）</li>
<li><a href="https://css-tricks.com/">CSS Tricks</a>（CSSのベストプラクティスとヒントを学ぶ）</li>
<li><a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en">Mozilla Developer Network</a>（WebサイトとJavaScriptの辞書のようなもの）</li>
</ul>
<h2 id="2-">2つのプロセス</h2>
<p>Electronには、メインとレンダラという2種類のプロセスがあります。そして、それぞれ、または両方のプロセスで稼働する<span class="def">モジュール</span>があります。レンダラプロセスが、アプリケーションにおける各ウィンドウであるのに対して、メインプロセスは、どちらかというと背後に隠れているプロセスです。</p>
<h3 id="-">定義：</h3>
<ul>
<li><strong>モジュール</strong> ElectronのAPIは、その働きごとにまとめられています。例えば、<code>dialog</code>モジュールには、ファイルオープン、ファイル保存、アラートのようなネイティブダイアログ用のAPIが全てあります。</li>
</ul>
<h3 id="-">次は：<a href="#メインプロセス">メインプロセス</a></h3>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="http://electron.atom.io/docs/api/">Electron APIs List</a></li>
</ul>
<h2 id="-">メインプロセス</h2>
<p>メインプロセス(一般的に、<code>main.js</code>という名前のファイルです)は、あらゆるElectronアプリケーションにおけるエントリーポイントとなります。オープンからクローズまで、アプリケーションの生命を管理します。メインプロセスはまた、<span class="def">ネイティブな要素を呼び出し</span>、それぞれの新たなレンダラプロセスをアプリケーション内に作成します。メインプロセスには完全なNode APIがビルトインされています。</p>
<p><img src="http://jlord.us/essential-electron/imgs/main.png" alt="main process diagram"> </p>
<p><em>注釈：メインプロセス
取得する内容</p>
<ul>
<li>Node.js API</li>
<li>Electronのメインプロセスモジュール</li>
</ul>
<p>一般的なタスク</p>
<ul>
<li>レンダラプロセスの作成</li>
<li>ネイティブな要素の呼び出し</li>
<li>アプリケーションの開始と終了</em></li>
</ul>
<h3 id="-">定義：</h3>
<ul>
<li><strong>ネイティブな要素の呼び出し</strong> ダイアログのオープンや他のネイティブなオペレーティングシステムのインタラクションは、リソースを集中的に使うので、レンダラプロセスを妨げないようにメインプロセスで実行されます。</li>
</ul>
<h3 id="-">次は：<a href="#レンダラプロセス">レンダラプロセス</a></h3>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="http://electron.atom.io/docs/api/">Electron APIs List</a></li>
</ul>
<h2 id="-">レンダラプロセス</h2>
<p>レンダラプロセスは、アプリケーションにおけるブラウザウィンドウです。メインプロセスとは異なり、複数のプロセスの存在が可能で、<span class="def">それぞれが独立</span>しています。またレンダラプロセスは<span class="def">隠す</span>こともできます。通常レンダラプロセスは<code>index.html</code>という名前です。これは典型的なHTMLのファイルのようですが、Webブラウザとは異なり、Electronでは全てのNode APIを利用できます。</p>
<p><img src="http://jlord.us/essential-electron/imgs/renderer.png" alt="renderer process diagram">
<em>
注釈：レンダラプロセス</p>
<p>取得する内容</p>
<ul>
<li>Node.ｊｓ API</li>
<li>DOM API</li>
<li>Electronレンダラプロセスモジュール</li>
</ul>
<p>一般的なタスク：</p>
<ul>
<li>HTMLとCSSによってWebページを設計する</li>
<li>JavaScriptページのインタラクション
</em></li>
</ul>
<h3 id="-">定義：</h3>
<ul>
<li><strong>それぞれが独立している</strong> 各レンダラプロセスは別個のプロセスであり、1つが故障しても他のプロセスには影響しません。</li>
<li><strong>隠す</strong> ウィンドウを隠すように設定して、バックグラウンドでコードだけを実行するようにできます。</li>
</ul>
<h3 id="-">次は：<a href="#こう考えてみよう">こう考えてみよう</a></h3>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="http://electron.atom.io/docs/api/">Electron APIs List</a></li>
</ul>
<h2 id="-">こう考えてみよう</h2>
<p>Chrome（または別のWebブラウザ）における各タブ・各Webページは、Electronにおけるレンダラプロセス1つに相当します。Chromeの全タブを閉じてもChromeが残っている状態がElectronのメインプロセスに似ていて、新しいウィンドウを開いたり、アプリケーションを終えたりすることができます。</p>
<p><img src="http://jlord.us/essential-electron/imgs/like-this.png" alt="Chrome comparison of the two processes">
<em>
注釈：メインプロセス、レンダラプロセス
</em></p>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="http://electron.atom.io/docs/tutorial/quick-start/#differences-between-main-process-and-renderer-process">Differences between Main and Renderer Process</a></li>
</ul>
<h3 id="-">次は：<a href="#通信を絶やさない">通信を絶やさない</a></h3>
<h2 id="-">通信を絶やさない</h2>
<p>メインプロセスとレンダラプロセスは、それぞれ違うタスクに責任を負っていることから、互いに通信可能であることが必要です。そのためにプロセス間通信（<span class="def">IPC</span>）があります。IPCを用いて、メインプロセスとレンダラプロセス間でメッセージをやり取りします。</p>
<p><img src="imgs/ipc.png" alt="IPC diagram">
<em>注釈：プロセス間でメッセージを送る</em></p>
<h3 id="-">定義：</h3>
<ul>
<li><strong>IPC</strong> メインプロセスとレンダラプロセスはそれぞれIPCモジュールを持っている。</li>
</ul>
<h3 id="-">次は：<a href="#プロセスはひとまとめに">プロセスはひとまとめに</a></h3>
<h2 id="-">プロセスはひとまとめに</h2>
<p>ElectronアプリケーションはNodeアプリケーションと同様に、<span class="def"><code>package.json</code>ファイル</span>を使います。そこでどのファイルがメインプロセスか、すなわち、どこでElectronにアプリケーションをスタートさせるかを定義させています。そしてメインプロセスはレンダラプロセスを作り、IPCを用いて2つのプロセス間でメッセージを送ることができます。</p>
<p><img src="http://jlord.us/essential-electron/imgs/app-files.png" alt="Electron app components diagram">
<em>注釈：1. アプリの開始ポイントを決める。2. アプリを起動し、レンダラプロセスを作成する。3. アプリのインターフェースをレイアウトし整える。4. IPCを用いてメインプロセスでタスクを実行し、情報を得る。</em></p>
<h3 id="-">定義：</h3>
<ul>
<li><strong><code>package.json</code>ファイル</strong> Nodeアプリケーションでは一般的なファイルであり、プロジェクトについてのメタデータと依存関係のリストを含んでいる。</li>
</ul>
<h3 id="-">次は：<a href="#クイックスタート">クイックスタート</a></h3>
<h2 id="-">クイックスタート</h2>
<p>Electronクイックスタートリポジトリは<code>package.json</code>や<code>main.js</code>そして<code>index.html</code>による最小構成のElectronアプリです。ここで学んできたもので、取りかかりには最適です。また選択したフレームワークでテンプレート用のボイラープレートをチェックしておきましょう。</p>
<h3 id="-">次は：<a href="#パッケージ化">パッケージ化</a></h3>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="https://github.com/electron/electron-quick-start">Electron Quick Start</a></li>
<li><a href="http://electron.atom.io/community/#boilerplates">Awesome Electron: Boilerplates</a></li>
</ul>
<h2 id="-">パッケージ化</h2>
<p>アプリをいったん構築したら、MacやWindowsあるいはLiux用に<span class="def">コマンドラインツール</span><code>electron-packager</code>でパッケージ化することができます。そのために<code>package.json</code>にスクリプトを加えます。以下でMacやWindowsのアプリケーションストアでアプリを得るためのリソースを確認してください。</p>
<h3 id="-">次は：<a href="#さらに">さらに</a></h3>
<h3 id="-">定義：</h3>
<ul>
<li><strong>コマンドラインツール</strong> 端末でコマンドを送信することによって相互作用させるプログラム。</li>
</ul>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="https://github.com/electron-userland/electron-packager">electron-packager</a></li>
<li><a href="https://github.com/electron/electron-api-demos/blob/master/package.json#L15-L18">Electron API Demos packaging scripts</a></li>
<li><a href="http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/">Mac App Store Electron Guide</a></li>
<li><a href="http://electron.atom.io/docs/tutorial/windows-store-guide/">Windows App Store Electron Guide</a></li>
</ul>
<h2 id="-">さらに</h2>
<p>ここでのコンセプトだけで十分、事足りるでしょうが、もちろんまだ学ぶべきことはあります。ここにさらに参考となる情報を記しておきます。</p>
<h3 id="-">参考資料：</h3>
<ul>
<li><a href="http://electron.atom.io/docs/">Full Electron docs</a></li>
<li><a href="http://electron.atom.io/community/">Awesome Electron: tools, videos, components, meetups</a></li>
<li><a href="http://electron.atom.io/spectron/">Spectron</a>(Electronのテストライブラリ)</li>
<li><a href="http://electron.atom.io/devtron/">Devtron</a>(Electronアプリを精査する)</li>
</ul>
<footer>
<small>✌️ Made because of computers by <a href="https://www.twitter.com/jllord" target="_blank">@jllord</a>. <a href="https://github.com/jlord/essential-electron" target="_blank"> Open source on GitHub </a>.</small>
</footer>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-31423721-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>