Electronで、Web技術を使ってデスクトップアプリケーションを開発しよう！

こんにちは。
みなさんは、Electronという技術はご存じでしょうか？

electron.atom.io

Electronは、ハイブリッドなデスクトップアプリケーションを開発するためのフレームワークです。

内部にNode.jsとChromiumを採用しており、HTMLとJSを利用して、Windows、Linux、Mac向けのアプリケーションを開発することができます。

Electronの信頼性

ハイブリッドアプリケーションと聞くと、信頼性が不安であると感じる方もいるかと思います。しかし、大丈夫です。

Electronは、既に多くのアプリケーションで採用されています。なんと、あのSlackもElectronで出来ています。すごいですね。

f:id:konosumi:20171103141944p:plain

Electronの始め方

Electronの導入記事は、Qiitaを中心にたくさんありますので、まずはそちらをご参照ください。

qiita.com

私のほうでは、要点を絞って解説していきたいと思います。

内部的なWebサーバーを立てる

Electronは、内部にNode.jsを採用しています。そのため、expressを使って内部的にWebサーバを立てることが可能です。

Express - Node.js Web アプリケーション・フレームワーク

つまり、Webサーバを開発している感覚で、デスクトップアプリケーションを開発することができるのです。だから、Webエンジニア向けの技術なのです。

const express = require('express');
const exp = express();

// ログインページへのアクセス
exp.get('/login', function (req, res) {
    res.render(__dirname + '/login.html');
});
exp.listen(3000);

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

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

app.on('ready', function() {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    // ログインページにアクセスして、画面に表示する
    mainWindow.loadURL("http://localhost:3000/login" );

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

HTMLを開発する

expressとBrowserWindowを使って、内部的に立てたローカルホストのWebサーバにアクセスするところまでを解説しました。

次に必要なのは、表示するためのHTMLの開発です・・・と言っても、これは普段のWebシステムの開発と同じです。リンクをクリックすれば画面遷移しますし、AngularやReactのようなフロントエンドJSだって動作します。

他にも「socket.io-clientを使って、Webソケットを接続しよう」なんてこともできてしまうわけです。

const socketClient = require('socket.io-client');

socket = socketClient('https://path/to/socket/url', {
    reconnection: false,
});
socket.on('connect', function() {
    console.log('connect');
});
socket.on('error', function(error) {
    console.log('error');
    console.error(error);
});
socket.on('disconnect', function() {
    console.log('disconnect');
});