Electron

ElectronのインストールからHello Worldまで

More than 1 year has passed since last update.

はじめに

Electronの概要と、インストールからQuick Startを参考にHello Worldを動かすところまでを説明します。
最後にNode.js、npm、Electronの概要と仕組みを簡単にまとめます。
npmのWindows環境でのアップデート手順以外はリンク集で参考URLの概要を3行でまとめています。

サマリ

  • インストール

    • Node.jsをインストールする。npmは、一緒に入ります。
    • Electronのページからインストーラーをダウンロードし実行します。
    • npmを更新する手順を書いています。
  • Quick Start

    • Electronの概要説明と、アーキテクチャ説明が最初に記述されているページです。
    • その後、最小構成(package.json, main.js, index.html)で動作させるHello Worldアプリケーションの説明です。

Electronの概要

インストール

  • Node.jsをインストールします。
    公式ページから、最新LTS版(Long Term Support=長期間サポート版)をインストールします。
  • npmは自動で入ります。
    ただし、GitHubなどで公開されているものを入れようとするとnpm installでエラーになることがあるため、必要に応じて以下のコマンドで更新します。
    npm update -g npm
    Windows7と8の場合(10は不明)は、更新を行っても正しく更新(*1)されなかったため(2017/5/13時点では Node.jsがLTS6.10.3のときnpmは3.10.10が入っています)、下の手順が必要になりました。 バージョンの確認は、コマンドプロンプトで以下のように行います。
    npm --version
    Windowsでアップデートしたのに、3.10.10のままで表示された場合は、https://www.npmjs.com/package/npm-windows-upgradeから、npm-windows-upgradeを使って、以下のコマンドを管理者権限で起動したPower Shellから実行して更新します。
    Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
    npm install --global --production npm-windows-upgrade
    npm-windows-upgrade
    
  • Electronをインストールします。
    公式ページhttps://electron.atom.io/のGet Startedの「Download for OS名」ボタンからダウンロードし、インストーラーを起動します。

(*1) 詳細な解説はQiita-windows環境でnpmアップデートの記事参照。

Hello Worldを作る

  • 公式サイトのQuick Startに従います。
    以下の最小構成のファイルを作成します。Quick Startにあるpackage.json,main.js,index.htmlのファイルの中身をコピーしてください。package.jsonについての説明は後述します。

    your-app/
    ├── package.json
    ├── main.js
    └── index.html
  • Hello Worldの起動
    main.jsのあるディレクトリ(your-app)に移動し、以下のコマンドを実行します。

    electron .
    起動すると、Hello Worldとnode,chrome,Electronのバージョンがデバッグモードで表示されます。
    Hello World

Electronの仕組み

アーキテクチャ

  • GUIにChromeのブラウザエンジンであるChromium, JavaScriptのランタイムにはNode.jsが使用されます。 Chromiumのブラウザエンジンはオープンソースで、プラットフォーム依存していないためクロスプラットフォームのアプリケーションが使えます。また、Node.jsを使用しているため豊富なモジュールを使用することができます。
  • 2つのプロセスから構成されています。 メインプロセスは、main.jsから起動されるプロセスです。このプロセスから各画面ごとにレンダラ―プロセスが実行されます。
  • プロセス間の通信に、IPCを使用します。

Architecture

Node.jsとは

  • Node.jsは、サーバーサイドのJavaScript実行環境です。Electronを使えばクライアントでも動作させることができます。
  • 以下の特徴を持っています。

    • シングルスレッドプロセス
      リクエストに対してスレッドを作らないためTomcatのようなマルチスレッドプロセスで、クライアントが増えた際にスレッドが増え、サーバーのリソースを消費しきることもありません。
    • ノンブロッキングIO
      コストの高いIO処理などを非同期で実行します。リクエストを待たせないということです。 処理の修了はコールバックを呼び出して対応します。
    • イベントループ
      リクエストの受付、リクエストの処理が終了したときのコールバック呼び出しをイベントとしてループ処理します。古い作りでいうとWindowプロシージャの構造に近いでしょうか。
  • 参考URL

npmとは

  • Node.jsのモジュールを管理するツールです。
  • 簡単な使い方は以下の通りです。
    npm init   ... カレントディレクトリにpackage.jsonを作成します。
    npm install ... package.jsonに書かれたnodeのモジュールをインストールします。
    npm run   ... package.json内に書かれたシェルを実行します。
    
    package.jsonは、参考URLに書いてある通り、そのディレクトリをnpmの管理下とするということを表すイファイルです。Quick Startで作成した際にコピーで作成しましたが、npm initで対話形式に作ることもできます。
  • ノードモジュールのパッケージ名指定してインストールすることもあります。
    インストールする際に指定できるスコープにはいくつかあります。

    npm install パッケージ名   ... package.jsonのあるディレクトリにインストールします。
    npm install --save パッケージ名   ... package.jsonに追加してインスト―ルします。
    npm install --save-dev パッケージ名   ... テストなどに使うものとしてpackage.jsonに追加しインストールします。
    npm install -g パッケージ名   ... グローバルにインストールします。
    
  • 参考URL

Electronの公式デモ

Electronの公式ページの中ほどにあるGet Started→Explore the Electron APIsからダウンロードすることができます。
セットアップしてすぐ動かすことができる+ソースコードも含めたデモの説明も見れるので参考になると思います。
electron-demo