Help us understand the problem. What is going on with this article?

Electronの環境構築(for Windows)

注意

こちらは 2017/06/09 に公開した記事です。
最新の情報は、こちらの記事を御覧ください。 → 2019 年版:Electron の環境構築(Windows 向け)

はじめに

Electron はクロスプラットフォームデスクトップアプリケーションエンジンです。
簡単に言うと、HTML+CSS+Javascript(Node.js)を用いてデスクトップアプリケーションを作成できるという便利なエンジンです。私見ですが、プログラミング初心者の方でも楽しく簡単にアプリケーション開発が行えると思います。

同様のエンジンとして NW.js がありますが、それぞれに利点欠点があります。以下のエントリーで二者の比較をして下さっていますので、詳しく知りたい方はぜひ御覧ください。

electronとnw.jsの技術的な違い
NW.jsとElectronをしばらく使ってみての比較

※2019/02/08 追記:最近は Electron のほうが明らかに情報量が多いので、Electron をおすすめします。

環境の準備

Node.jsのインストール

※当記事では MacOS での環境構築方法については省略致します。

まず『Node.js』をインストールします。
以下のリンクからNode.jsのサイトへジャンプしてください。

Node.js

1.PNG

  1. 赤枠のボタンを押下
  2. ファイルを保存
  3. ダウンロードされた.msiファイルを実行

インストールオプションなどは特に変更せず、ひたすらNextボタンを押して問題ありません。
最後にFinishボタンを押下し、インストールは完了です。

コマンドプロンプトを開き(Windowsキー+R、その後「cmd」とタイプしEnter)、nodeコマンドを実行してみます。

node -v 

3.PNG

画像のようにNode.jsのバージョンが表示されれば、インストールが正常に行われています。

実行ファイルの準備

続いて、プロジェクト用のフォルダを作成します。
Ctrl+Shift+Nや、右クリックから「新規フォルダ作成」、あるいはコマンドプロンプトでmkdirなどなど、ご自由に作成してください。

package.json の作成

package.json はプロジェクトの管理ファイルです。

先程作成したフォルダを開き、そのフォルダ上でコマンドプロンプトを開きます。
(フォルダ上をShift+右クリックし「コマンドウィンドウをここで開く」を選択するか、あるいはディレクトリパスの入力欄に「cmd」と記述しEnterを押下することで開けます)
続いて以下のコマンドを実行し、「package.json」ファイルを作成します。

npm init

作成するプロジェクトの基本情報を入力していきます。

※よくわからない場合はEnterを連打する(全てデフォルトの設定になります)か、あるいは npm init -y と「-y」オプションをコマンドに追記することで、デフォルト設定のpackage.jsonを作成できます。

以下にコマンド実行例を掲載します。

6.PNG

フォルダ内に「package.json」が生成されていれば成功です。

Electronの準備

Electronのインストール

本題のElectronをインストールします。
コマンドプロンプトを開き、以下のコマンドを実行します。
※コマンドの「-g」オプションにより「グローバルインストール」が行われます。(以下に追記があるので、御覧ください)

npm install electron -g

確認のため、バージョン確認のコマンドを実行してみます。
バージョンが表示されれば成功です。

electron -v

5.PNG

グローバルインストールについて追記(2017/06/19)

コメントにてindometacin様よりご指摘いただきましたので、追記致します。
グローバルインストールをした場合、Electronのアップデート時、プロジェクトによっては動かなくなる可能性があるとのことです。
その為、プロジェクトごとのインストール、すなわちローカルインストールを推奨致します。
プロジェクトフォルダ内でコマンドプロンプトを開き(フォルダ上をShift+右クリックし「コマンドウィンドウをここで開く」を選択するか、あるいはディレクトリパスの入力欄に「cmd」と記述しEnterを押下することで開けます)、以下のコマンドを実行します。

npm install --save-dev electron

このようにしてローカルインストールが可能です。
Electronの実行コマンドがグローバルインストール時と異なるため、注意してください。
詳しくは「実行」の項を御覧ください。

エントリーポイントJavascriptファイル[main.js]の作成

package.jsonの"main"に指定(コマンドではentry pointで指定)したjsファイルを作成します。
様々な設計が可能ですが、当記事では簡単な例だけを掲載します。詳しくは Electron Documentation を御覧ください。

main.js
"use strct";

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow = null;

// 全てのウィンドウが閉じたら終了
app.on("window-all-closed", () => {
  if (process.platform != "darwin") {
    app.quit();
  }
});


// Electronの初期化完了後に実行
app.on("ready", () => {
  //ウィンドウサイズを1280*720(フレームサイズを含まない)に設定する
  mainWindow = new BrowserWindow({width: 1280, height: 720, useContentSize: true});
  //使用するhtmlファイルを指定する
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

メインウィンドウ用HTMLファイル[index.html]の作成

メインウィンドウとしてロードするHTMLファイルを作成します。
ファイル名、配置ディレクトリは必要に応じて変更してください。その際、エントリーポイントのJSファイルにてロードするファイルパスを変更してください。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

実行

Electronを実行し、動作を確認します。
現在のディレクトリ構成は以下のとおりです。

.
├── index.html
├── main.js
└── package.json

当フォルダ上で再びコマンドプロンプトを開き、実行コマンドを入力します。

electron .

7.png

このように表示されていれば成功です。

※2016/06/19追記
ローカルインストール時の実行コマンドは次のとおりです。

.\node_modules\.bin\electron .

簡単に実行する

個人的には、毎度コマンドプロンプトを開いてコマンドを入力して……というのが面倒だと感じます。
この操作を省略する手段としてバッチファイルを作成します。

start.bat
electron .

このバッチファイルをプロジェクトフォルダのルートに配置すれば、ワンクリックでElectronアプリケーションを実行できます。

※2016/06/19追記
ローカルインストール時ならば、バッチファイルに次のコマンドを記述してください。

.\node_modules\.bin\electron .

最後に

Windowsでの環境構築と簡単な実行方法のみを解説致しました。これにて、まずはアプリケーションの開発に取り掛かれると思います。しかしアプリケーションは最終的にパッケージ化する必要があります。その際には、またしてもコマンドをするなどの操作が必要です。この操作に関しては、申し訳ございませんが、他の記事を参考にして頂ければ幸いです。
当記事の参考サイト様にも、パッケージングまで紹介して下さっている記事があります。ぜひ御覧ください。

参考記事

参考にさせて頂きましたm(_ _)m

Electron入門サイト~開発経験者が解説する導入手順と魅力
Electronでアプリケーションを作ってみよう(Qiita)
electronとnw.jsの技術的な違い(Qiita)
NW.jsとElectronをしばらく使ってみての比較(Qiita)
WindowsでElectronの開発環境を整える

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした