Electron - Electronの概要のソースを表示

== 概要 ==
Electron(旧 : Atom Shell)とは、HTML5 / JavaScript等のWeb技術で実装されたソフトウェアを実行するためのクロスプラットフォーム実行環境である。<br>
NW.jsと同様に、ChrominumとNode.jsをベースとしている。<br>
<br>
MicrosoftからリリースされたVisual Studio CodeもElectronで開発されている。<br>
<br><br>

== Electronで開発するメリット ==
Electronは、HTML5 / JavaScriptのコードとそれを実行するためのChromiumをバンドルして配布している。<br>
そのため、開発者は実行環境の違いを意識せずに開発を行うことができる。<br>
<br>
Electronは、Windows / Mac / Linux等の主要なOSをほぼ全てサポートしており、<br>
HTML5 / JavaScriptだけで実現できないネイティブの多くの機能もプラグインとして提供している。<br>
<br>
また、既存の膨大なJavaScriptライブラリをフルに活かして開発することができ、<br>
Webアプリケーションやスマートフォン向けソフトウェアの大部分のコードを共通化することも可能である。<br>
<br><br>

== Electronの機能 ==
Electronには、様々な機能やツールが用意されている。<br>
主なものは以下の通りである。<br>
* アプリケーションの自動更新機能
* クラッシュレポーティング機能
* Windowsインストーラの作成ツール
* デバッグ及び印刷機能
* ネイティブメニューや通知機能
<br>
その他、Node.jsで記述された様々なプラグインが用意されている。<br>
<br>
詳細については、公式Webサイトのドキュメントを確認すること。<br>
http://electron.atom.io/docs<br>
https://github.com/atom/electron<br>
<br><br>

== Electronのインストール ==
Electronのインストールは、Node.jsのnpmコマンド(Node Pacakge Manager)で行う。<br>
npmコマンドを使用するには、Node.jsをインストールする必要がある。<br>
Node.js - https://nodejs.org/<br>
<br>
まず、以下のコマンドを実行して、package.jsonファイルを作成する。<br>
<code>npm init</code>コマンド(<code>-y</code>オプションを付加しない)を実行する時は、ソフトウェアのエントリポイントを<code>main.js</code>と入力する。<br>
 npm init
 または
 npm init -y
<br>
次に、以下のコマンドを実行して、Electronをインストールする。<br>
<u>グローバルインストールする場合、Electronのアップデートにおいて、プロジェクトによっては動作しなくなる可能性がある。</u><br>
<u>そのため、プロジェクトごとのインストール(ローカルインストール)を推奨する。</u><br>
 npm install --save-dev electron  (ローカルインストール)  プロジェクトフォルダ直下で実行する  <span style="color:#C00000">※推奨</span>
 または
 npm install electron -g  (グローバルインストール)
<br>
<u>※補足</u><br>
<u>electron-prebuiltはdeprecated(廃止)となっているので注意すること。</u><br>
 <s>npm install electron-prebuilt -g</s>
<br><br>

== Electronによる開発 ==
ここでは、Hello Worldソフトウェアを作成する。<br>
<br>
Hello Worldソフトウェアを構成するファイルは、以下の通りである。<br>
 /app/
 |-- package.json
 |-- main.js
 |-- index.html
<br>
package.jsonファイルは、ソフトウェアのマニフェストファイルである。<br>
ソフトウェアに関する情報を記述する。<br>
 package.jsonファイル
 
 {
    "name"    : "hello-world",
    "version" : "0.1.0",
    "main"    : "main.js"
 }
<br>
main.jsファイルは、ソフトウェアの実行時に最初に読み込まれるファイルである。<br>
 <syntaxhighlight lang="javascript">
 main.jsファイル
 
 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()
 {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin')
    {
       app.quit();
    }
 });
 
 app.on('activate', function()
 {
    // MacOSXでは、ウィンドウを全て閉じてもプロセスは生存し続けており、ドックアイコンをクリックすると再表示される
    if (win === null)
    {
       createWindow();
    }
 });
 
 // This method will be called when Electron has finished
 // initialization and is ready to create 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;
    });
 
 // このファイルには、アプリの他の特定のメインプロセスコードを含めることができる。
 // また、別々のファイルに記述して、ここで要求することもできる。
 });
 </syntaxhighlight>
<br>
index.htmlは、ソフトウェアの実行時に表示されるHTMLファイルである。<br>
main.jsファイルから読み込まれる。<br>
 <syntaxhighlight lang="html">
 index.htmlファイル
 
 <!DOCTYPE html>
 <html>
    <head>
       <title>Hello World!</title>
    </head>
    <body>
       <h1>Hello World!</h1>
       We are using io.js <script>document.write(process.version)</script>
       and Electron <script>document.write(process.versions['electron'])</script>.
    </body>
 </html>
 </syntaxhighlight>
<br><br>

== ソフトウェアの実行 ==
プロジェクトのディレクトリに移動して、ターミナルまたはコマンドプロンプト(Powershell)から以下のコマンドを実行する。<br>
* ローカルインストール時の場合
** Windows
**: .\node_modules\.bin\electron .
** Linux
**: ./node_modules/.bin/electron .
<br>
上記のコマンドを実行することが面倒な場合、操作を省略する手段として、以下のようなシェルスクリプトまたはバッチファイルを作成する。<br>
以下のファイルをプロジェクトディレクトリのルートに配置することで、1クリックでElectronソフトウェアを起動できる。<br>
 <syntaxhighlight lang="sh">
 # Start.shファイル(Linux)
 
 #!/usr/bin/env bash
 
 # ローカルインストールの場合
 ./node_modules/.bin/electron .
 
 # グローバルインストールの場合
 electron . 
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="powershell">
 # Start.batファイル(Windows)
 
 # ローカルインストールの場合
 .\node_modules\.bin\electron .
 
 # グローバルインストールの場合
 electron . 
 </syntaxhighlight>
<br>
後は通常のHTML / JavaScriptによる開発と同様である。<br>
デバッガが表示されているのは、main.jsファイルに以下の行が記述されているからである。<br>
この行をコメントアウトすることで非表示になる。<br>
 <syntaxhighlight lang="javascript>
 main.jsファイル
 
 // mainWindow.openDevTools();
 </syntaxhighlight>
<br><br>

== Electronソフトウェアのパッケージング ==
# まず、distディレクトリを作成する。
# 作業ディレクトリに移動する。
# 以下のコマンドを実行して、electron-packagerをインスールする。
#: <code>npm install electron-packager -g</code>
# パッケージングを実行する。
#: Windows x86をパッケージング
#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --version=0.25.3</code>
#: Windows x64 / MacOSXをパッケージング
#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --version=0.25.3</code>
<br>
パッケージングが完了すると、以下のディレクトリが生成される。<br>
 /dist/
 |-- /hello-world-darwin-x64/ (MacOSX)
 |-- /hello-world-win32-ia32/ (Windows x86)
 |-- /hello-world-win32-x64/ (Windows x64)
<br>
このディレクトリを配布することで、他の環境でも実行可能となる。<br>
<br><br>

== Electronのサンプル ==
[https://github.com/electron/electron-quick-start electron-quick-startリポジトリ]を使用して、Electronのサンプルをクローンして実行できる。<br>
より多くのサンプル例においては、awesome electronコミュニティにより作成された[https://electron.atom.io/community/#boilerplates boilerplatesリスト]を参照すること。<br>
<br>
# electron-quick-startリポジトリをクローンする。
#: <code>git clone --depth 1 https://github.com/electron/electron-quick-start</code>
# クローンしたディレクトリに移動する。
#: <code>cd electron-quick-start</code>
# 依存関係をインストールする。
#: <code>npm install</code>
# ソフトウェアを実行する。
#: <code>npm start</code>
<br><br>

__FORCETOC__
[[カテゴリ:Electron]]