-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
300 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,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> |
File renamed without changes.