Electron - Electronの概要

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要

Electron(旧 : Atom Shell)とは、HTML5 / JavaScript等のWeb技術で実装されたソフトウェアを実行するためのクロスプラットフォーム実行環境である。
NW.jsと同様に、ChrominumとNode.jsをベースとしている。

MicrosoftからリリースされたVisual Studio CodeもElectronで開発されている。


Electronで開発するメリット

Electronは、HTML5 / JavaScriptのコードとそれを実行するためのChromiumをバンドルして配布している。
そのため、開発者は実行環境の違いを意識せずに開発を行うことができる。

Electronは、Windows / Mac / Linux等の主要なOSをほぼ全てサポートしており、
HTML5 / JavaScriptだけで実現できないネイティブの多くの機能もプラグインとして提供している。

また、既存の膨大なJavaScriptライブラリをフルに活かして開発することができ、
Webアプリケーションやスマートフォン向けソフトウェアの大部分のコードを共通化することも可能である。


Electronの機能

Electronには、様々な機能やツールが用意されている。
主なものは以下の通りである。

  • アプリケーションの自動更新機能
  • クラッシュレポーティング機能
  • Windowsインストーラの作成ツール
  • デバッグ及び印刷機能
  • ネイティブメニューや通知機能


その他、Node.jsで記述された様々なプラグインが用意されている。

詳細については、公式Webサイトのドキュメントを確認すること。
http://electron.atom.io/docs
https://github.com/atom/electron


開発に必要なパッケージのインストール

カスタムElectronバイナリにおいて、LinuxでElectronそのものをビルドする場合は、以下に示すパッケージをインストールする。

  • 必須環境
    Node.js
    Python 3.7以降
    Clang 3.4以降
    GTK 3およびlibNotifyの開発用ライブラリ

  • 必要なパッケージ
    sudo zypper install clang gperf gtk3-devel libnotify-devel dbus-1-devel \
    libgnome-keyring-devel libcap-devel alsa-devel cups-devel \
    libXtst-devel libXrandr-devel \
    mozilla-nss-devel python3-python-dbusmock


アプリケーションのソースコードをビルド済みElectronバイナリにバンドルして頒布する場合は、アプリケーション頒布のガイドを参照すること。


Electronのインストール

Electronのインストールは、Node.jsのnpmコマンド(Node Pacakge Manager)で行う。
npmコマンドを使用するには、Node.jsをインストールする必要がある。
Node.js - https://nodejs.org/

まず、以下のコマンドを実行して、package.jsonファイルを作成する。
npm initコマンド(-yオプションを付加しない)を実行する時は、ソフトウェアのエントリポイントをmain.jsと入力する。

npm init
または
npm init -y


次に、以下のコマンドを実行して、Electronをインストールする。
グローバルインストールする場合、Electronのアップデートにおいて、プロジェクトによっては動作しなくなる可能性がある。
そのため、プロジェクトごとのインストール(ローカルインストール)を推奨する。

npm install --save-dev electron  (ローカルインストール)  プロジェクトフォルダ直下で実行する  ※推奨
または
npm install electron -g  (グローバルインストール)


※補足
electron-prebuiltはdeprecated(廃止)となっているので注意すること。

npm install electron-prebuilt -g



Electronによる開発

ここでは、Hello Worldソフトウェアを作成する。

Hello Worldソフトウェアを構成するファイルは、以下の通りである。

/app/
|-- package.json
|-- main.js
|-- index.html


package.jsonファイルは、ソフトウェアのマニフェストファイルである。
ソフトウェアに関する情報を記述する。

package.jsonファイル

{
   "name"    : "hello-world",
   "version" : "0.1.0",
   "main"    : "main.js"
}


main.jsファイルは、ソフトウェアの実行時に最初に読み込まれるファイルである。

 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;
    });
 
 // このファイルには、アプリの他の特定のメインプロセスコードを含めることができる。
 // また、別々のファイルに記述して、ここで要求することもできる。
 });


index.htmlは、ソフトウェアの実行時に表示されるHTMLファイルである。
main.jsファイルから読み込まれる。

 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>



ソフトウェアの実行

プロジェクトのディレクトリに移動して、ターミナルまたはコマンドプロンプト(Powershell)から以下のコマンドを実行する。

  • ローカルインストール時の場合
    • Windows
      .\node_modules\.bin\electron .
    • Linux
      ./node_modules/.bin/electron .


上記のコマンドを実行することが面倒な場合、操作を省略する手段として、以下のようなシェルスクリプトまたはバッチファイルを作成する。
以下のファイルをプロジェクトディレクトリのルートに配置することで、1クリックでElectronソフトウェアを起動できる。

 # Start.shファイル(Linux)
 
 #!/usr/bin/env bash
 
 # ローカルインストールの場合
 ./node_modules/.bin/electron .
 
 # グローバルインストールの場合
 electron .



 # Start.batファイル(Windows)
 
 # ローカルインストールの場合
 .\node_modules\.bin\electron .
 
 # グローバルインストールの場合
 electron .


後は通常のHTML / JavaScriptによる開発と同様である。
デバッガが表示されているのは、main.jsファイルに以下の行が記述されているからである。
この行をコメントアウトすることで非表示になる。

 main.jsファイル
 
 // mainWindow.openDevTools();



Electronソフトウェアのパッケージング

  1. まず、distディレクトリを作成する。
  2. 作業ディレクトリに移動する。
  3. 以下のコマンドを実行して、electron-packagerをインスールする。
    npm install electron-packager --save-dev(ローカルインストール) ※推奨
    npm install electron-packager -g(グローバルインストール)
  4. パッケージングを実行する。
    Electronのバージョンは、npm listコマンドを実行することにより確認できる。
    • Linux x64
    electron-packager ./app "hello-world" --out=dist --platform=linux --arch=x64 --electron-version=<Electronのバージョン>
    • Windows x86
    electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --electron-version=<Electronのバージョン>
    • Windows x64 / MacOSX
    electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --electron-version=<Electronのバージョン>


パッケージングが完了すると、以下のディレクトリが生成される。

/dist/
|-- /hello-world-linux-x64/ (Linux x64)
|-- /hello-world-win32-ia32/ (Windows x86)
|-- /hello-world-win32-x64/ (Windows x64)
|-- /hello-world-darwin-x64/ (MacOSX)


このディレクトリを配布することで、他の環境でも実行可能となる。

また、ソフトウェアのソースコードを非公開にすることもできる。 非公開にするためには、まず、プロジェクトディレクトリに作成したappディレクトリの名前をapp.asarディレクトリに変更する。
次に、app.asarディレクトリを、プロジェクトディレクトリ直下のresourcesディレクトリに配置する。

  • Linux x64
    electron-packager ./<Electronのプロジェクトディレクトリ>/resources/app.asar "hello-world" --out=dist --platform=linux --arch=x64 --electron-version=<Electronのバージョン>
  • Windows x86
    electron-packager ./<Electronのプロジェクトディレクトリ>/resources/app.asar "hello-world" --out=dist --platform=win32 --arch=ia32 --electron-version=<Electronのバージョン>
  • Windows x64 / MacOSX
    electron-packager ./<Electronのプロジェクトディレクトリ>/resources/app.asar "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --electron-version=<Electronのバージョン>


詳細は、こちらのWebサイトを参照すること。


Electronのサンプル

electron-quick-startリポジトリを使用して、Electronのサンプルをクローンして実行できる。
より多くのサンプル例においては、awesome electronコミュニティにより作成されたboilerplatesリストを参照すること。

  1. electron-quick-startリポジトリをクローンする。
    git clone --depth 1 https://github.com/electron/electron-quick-start
  2. クローンしたディレクトリに移動する。
    cd electron-quick-start
  3. 依存関係をインストールする。
    npm install
  4. ソフトウェアを実行する。
    npm start



「http://mochiuwiki.e2.valueserver.jp/index.php?title=Electron_-_Electronの概要&oldid=7489」から取得