19
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Organization

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

はじめに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?