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

はじめに

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

サマリ

• インストール

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

• Quick Start

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

Electronの概要

• Electronとは
  • クロス(マルチ)プラットフォームで動作するアプリケーションを作るビルド環境です。
  • JavaScript, HTML5, CSSを使って開発することができます。
  • 開発環境にはNode.jsとnpmが必要になります。実行環境に、Electron, Node.jsは必要ありません。
• 参考URL
  • @IT Electronとは？ アーキテクチャ／API／インストール方法／初期設定
  • 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のバージョンがデバッグモードで表示されます。

Electronの仕組み

アーキテクチャ

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

Node.jsとは

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

• 以下の特徴を持っています。

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

• 参考URL

  • いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール

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
  • Qiita-フロントエンド開発の３ステップ（npmことはじめ）
  • Qiita-ちゃんと使い分けてる? dependenciesいろいろ。

Electronの公式デモ

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