LIGデザイナー採用
LIGデザイナー採用
2015.08.21

ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】

先生

お盆も終わり暑さも少し落ち着いてきたので、秋はもうすぐそこ。
こんにちは、先生です。

今回は、Electronを使ってデスクトップアプリを作る方法をご紹介します。

そもそもElectronとは?

ele

Electronというものをご存知でしょうか。
ElectronはGitHub社が開発した、デスクトップアプリを作れるクロスプラットフォーム実行環境です。オープンソースのMITライセンスなので、商用利用も無料で可能となっています。
Node.jsとHTML5で作ることができるので、フロントエンドエンジニアは新しい言語を学習することなくWindows、Mac、Linuxのアプリケーションを作成できます。

Slack、Visual Studio Code、Avocodeなど今話題のアプリケーションで使われています。

Electronの準備

Electronを使うにはNode.jsが必要です。Node.jsは以下からダウンロードできます。

Node.js:
https://nodejs.org/

インストールができたら適当なディレクトリを作り、npm initを実行してpackage.jsonを作成します。

npm install electron-prebuilt --save-dev

作成できたらelectron-prebuiltをインストールします。これがElectronの本体となります。

 

npm install electron-packager --save-dev

そして、リリース用のアプリケーションを出力するためにelectron-packagerもインストールします。electron-packagerを使うとコマンドで簡単にアプリケーションを出力できるのでオススメです。

 
package.jsonを開いてscriptsの部分にbuildコマンドを以下のように追加します。

"scripts": {
    "build": "node_modules/.bin/electron ."
}

electron-packager:GitHub

設定ファイルとHTMLの作成

インストールとコマンドの設定ができたら、最初に実行されるindex.jsを作成します。

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 () {
    // ブラウザ(Chromium)の起動, 初期画面のロード
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600
    });
    mainWindow.loadUrl('file://' + __dirname + '/index.html');
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
});

mainWindowの幅と高さは任意のサイズに変更してください。

 
続いて、最初に表示するHTMLを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DemoApp</title>
    <meta name="description" content="">
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
</head>
<body ng-app="app" ng-controller="RootCtrl as root">
<h1>Demo App</h1>
</body>
</html>

これで実行する準備ができました。
 

npm run build

さっそくElectronを実行してみましょう。

 
electron-demoapp-window

アプリケーションが起動してDemo Appと表示されました。すごく簡単ですね。あとはHTML/CSS/JavaScriptを駆使して画面を作ればアプリが完成します。

  • 1
  • 2