Posted at

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