Electronで簡単にWebアプリをデスクトップアプリ化する

Electronは、HTML5/JavaScript で簡単にクロスプラットフォームのデスクトップアプリケーションを作成することができるツールです。
webview での表示もできますので、これを利用して簡単にWebアプリをデスクトップアプリ化することができます。

必要なモジュールのインストール

npm install electron-prebuilt -g
npm install electron-packager -g
npm install asar -g

プロジェクトの初期化

Node.js のプロジェクトを作成します。

mkdir SampleApp
cd SampleApp
npm init -y

main.js

'use strict';

var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();

var mainWindow = null;
app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 980, height: 780});
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html

webview にWebアプリケーションのURLを指定します。スクリプトを用意して、アプリケーションをハンドリングすることもできます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aipo.com</title>
<style>
  webview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  </style>
</head>
<body>
<webview id="mainWebview" src="https://login.aipo.com/" autosize="on"></webview>
<script src='./script.js'></script>
</body>
</html>

アプリケーションのビルド

Mac, Windows, Linux といったプラットフォームに対応しています。

electron-packager ./ SampleApp --platform=darwin --arch=x64 --version=0.34.0 --overwrite

アプリケーションの起動

open SampleApp-darwin-x64/SampleApp.app