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

先生

2015.08.21

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

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

そもそもElectronとは？

ele

http://electron.atom.io/

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を実行してみましょう。
 


アプリケーションが起動してDemo Appと表示されました。すごく簡単ですね。あとはHTML/CSS/JavaScriptを駆使して画面を作ればアプリが完成します。
次のページ
リリース作業にうつりましょう
         
                         LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る

この記事のシェア数

先生最高技術責任者 / 林優一

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。【普段やっていること】新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む