JavaScript
HTML5
初心者
monaca
Electron

[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう

背景

Electronというエンジンを使えば、JavaScript + HTML + CSS で
簡単にクロスプラットフォームアプリが作れ、
WindowsならばEXE形式で配布することも容易です。

また、Monaca (HTMLハイブリッドアプリエンジン)
と全く同じコードを使いまわすことができ、最終的に、
Win&Mac&Android&IPhoneの全て同一のコードで動かすことが出来ます。

参照:Android&iOS&Win&Macが同じコードで動く!超マルチアプリを作ろう[Monaca × Electron]

本投稿の内容

本投稿では、 誰でも5分程度でElectronのアプリが作れるように
①環境構築 + ②サンプルコードの開発 + ③実行 + ④配布用パッケージング
のチュートリアルを行います。

他の多くのサイト/記事では、Electronのバージョンにより書き方が異なる点について、
解説していなかったり、配布方法(パッケージング)までは記載していなかったりするため、
似たような記事がありながらも、改めて投稿することにしました。
本投稿の手順のみで、環境構築~アプリ作成~パッケージングまで一気通貫で実行出来ます。

① Electronのインストール/環境構築

1. 前提

前提環境を記載しますが、どの環境でも同様です。

  • 環境  :Windows10
  • コマンド:PowerShell

2. Node.jsのインストール

下記ページよりインストールします。
https://nodejs.org/en/
執筆時のバージョン: v6.11.1 LTS

3. Electronのインストール

  • 以下のコマンドでインストールします。
npm install electron -g
  • インストール後、以下のコマンドでバージョンが確認出来ます。(執筆時:v1.6.11)
electron -v 
  • インストール後、以下のコマンドでGUIを起動出来ます。
electron

4. 配布/EXE化用パッケージャーのインストール

  • 以下のコマンドで、asarというツールと、パッケージング用ツールをインストールします。
npm install -g asar
npm i electron-packager -g

5. (任意) 旧バージョンのElectronを入手する

  • v0.36.4のファイルは以下からダウンロードできます。
    Electron/v0.36.4
    electron-v0.36.4-win32-x64.zip を入手してください。

  • EXEを叩けば、コマンドラインのelectronと同様にGUIが立ち上がります。

  • Electronは、0系と1系では、一部APIの仕様が変更されているため、
    メジャーバージョンが異なる場合は多少の手直しが必要になります。

② Hello Electron (サンプルコード) の作成

1. 任意のフォルダを作成し、以下3ファイルを作ります。

  • index.html

  • package.json

  • app.js

以降では仮に「SampleAppFolder」に上記ファイルを作成したとします。
※コード上にこの名前は出てきません。実行やパッケージのコマンドでの指定時のみ出てきます。

2. index.html

普通のHTMLと同様のファイルです。CSSやJavaScriptの組み込みもOKです。

index.html
<!DOCTYPE html>
<html>

<head>
<meta Http-Equiv="content-type" Content="text/html;charset=UTF-8">
<title>Electronテストアプリ</title>
</head>

<body>
Hello Electron
</body>
</html>

3. package.json

「app.js」はここで指定しています。

package.json
{
  "name": "test-app",
  "version": "0.9.0",
  "description": "test-app",
  "main": "app.js",
  "author": "Name",
  "scripts": {
    "start": "electron ."
  }
}

4. app.js

☆重要☆ Eclectronの0.3系と、1.X系で書き方が異なります。
ここでは両方の例を載せておきます。

  • 0.3系
app.js
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;

//クラッシュレポート
require('crash-reporter').start();

//全ウィンドウを閉じたとき(Xボタン)の処理
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

//アプリケーションの初期化終了後に呼び出される処理
app.on('ready', function() {
    //メインウィンドウの定義:サイズ以外にもいろいろ設定可能
    mainWindow = new BrowserWindow(
    {
        width: 600, 
        height: 400,
        'min-width': 300,
        'min-height': 200,
    }
    );
    //現在実行中のファイルディレクトリパスの下のindex.htmlを読みに行く。
    mainWindow.loadUrl('file://' + __dirname + '/index.html');
    //メインウィンドウ終了時の処理
    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});
  • 1.X系
app.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
    //メインウィンドウの定義:サイズ以外にもいろいろ設定可能
    mainWindow = new BrowserWindow(
    {
        width: 600, 
        height: 400,
        'min-width': 300,
        'min-height': 200,
    }
    );
    //現在実行中のファイルディレクトリパスの下のindex.htmlを読みに行く。
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    //メインウィンドウ終了時の処理
    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});
  • 備考: 0.3⇒1.Xのバージョン違いについて、記載が変わる点をいくつか例を示します。
    • var remote = require('remote'); ⇒ const remote = require('electron').remote;
    • mainWindow.loadUrl ⇒ mainWindow.loadURL
    • var clipboard = require('clipboard'); ⇒ const {clipboard} = require('electron');
    • 主にnode.js系の処理の書き方等が違っています。 他のHTML5製ツールへの移植性を確保するためにも、 純粋なJavaScriptコードと、ファイル/クリップボード操作等の処理をするコードは、 ファイルを分けて作成しておくことを強く推奨します。

③ Hello Electron (サンプルコード) の実行

Case1: GUIにドラッグ&ドロップして実行する方法

環境構築時に記載の方法で、GUIを立ち上げてください。

  • コマンドラインにて「electron」を実行する。
  • ダウンロードしてきた「electron.exe」を叩く。

立ち上がったGUI上の「Drag your app here to run it」と記載されている所に、
作成したアプリのフォルダをドラッグ&ドロップします。

index.htmlの内容の通り、「Hello Electron」と
表示されてば成功です!

Case2: コマンドラインで実行する方法

コマンドラインからでも、以下のように実行可能です。

electron .\SampleAppFolder\

④ 配布用にEXEにパッケージング

以下のコマンドで、パッケージング&暗号化することが出来ます。
バージョン指定は必須なので、electron -v で事前に確認してください。
JavaScriptで作成した場合、コードが見られやすいという弱点がありましたが、
このようにパッケージング時に暗号化して隠蔽出来ることもelectronの強みです。

# 32bit,64bit両方のexeを出力する場合のサンプルコマンド
electron-packager ./SampleAppFolder PackagedFolder --platform=win32 --arch=all --version=1.6.11 --overwrite --asar

# 32bitのexeのみ。 macの場合も同様にarchオプションを変更してください。
# electronのバージョン指定(0.3系の場合このようにしてください)
# 256*256のiconを追加
electron-packager ./SampleAppFolder PackagedFolder --platform=win32 --arch=ia32 --version=0.36.4  --icon=./YourIcon.ico  --overwrite --asar

おつかれさまでした。

electronを使うことで、環境構築から配布用のファイルの作成まで、
簡単に出来たのではないでしょうか?

TODO/更新用メモ:

  • index.htmlを改変することで、様々なアプリが作れます。
  • CSSを工夫することで、ボタンやデザインの実装等が綺麗に行えます。Web技術を使いまわせます。
    ⇒ より高度なカスタマイズ方法について別途投稿予定。

  • Node.jsを使えるため、通常のJavaScriptのみと異なり、ファイル操作等も実装可能です。
    ⇒ ファイル操作や、Macでのコピペのノウハウについてそのうち投稿。

  • Monaca × onsenUI のコードをそのまま移植できます。
    スマートフォンアプリとデスクトップアプリを同一のコードで作ることが出来ます。
    ⇒ 参照:Android&iOS&Win&Macが同じコードで動く!超マルチアプリを作ろう[Monaca × Electron]

  • JavaScriptによって外部サービス(API)を利用することも出来ます。
    ⇒ 別途投稿予定。

  • 他にもHTML5/Electron/Monacaの統合ノウハウとして投稿を検討しています。

以上。


この系統の投稿を拡充させてほしいかたは「いいね」をお願いします。
(反応の多いニーズのある話から記載するため)