ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】
- ガジェット通信を≫
- @getnewsfeedさんをフォロー
お盆も終わり暑さも少し落ち着いてきたので、秋はもうすぐそこ。
こんにちは、先生です。
今回は、Electronを使ってデスクトップアプリを作る方法をご紹介します。
そもそもElectronとは？
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 ."
}
設定ファイルと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を駆使して画面を作ればアプリが完成します。
リリース
アプリケーションが完成したらリリース作業をしましょう。このままでは環境を構築してコマンドを実行しないとアプリが使えません。
"release": "node release.js"
package.jsonのscriptsにreleaseコマンドを追加しましょう。
続いてrelease.jsを作成し、以下のように記述します。
var packager = require(‘electron-packager’);
var config = require(‘./package.json’);
packager({
dir: ‘./’,
out: ‘../dist’,
name: config.name,
platform: ‘win32,darwin’,
arch: ‘x64′,
version: ‘0.30.0’,
icon: ‘./app.icns’, //<- アプリアイコン
‘app-bundle-id': ‘jp.co.liginc.ligblogeditor’, //<- 自分のドメインなどを使用してください
‘app-version': config.version,
‘helper-bundle-id': ‘jp.co.liginc.demoapp’, //<- 自分のドメインなどを使用してください
overwrite: true,
asar: true,
prune: true,
ignore: "node_modules/(electron-packager|electron-prebuilt|.bin)|release.js",
‘version-string': {
CompanyName: ‘会社名’,
FileDescription: ‘アプリケーションの説明’,
OriginalFilename: config.name,
FileVersion: config.version,
ProductVersion: config.version,
ProductName: config.name,
InternalName: config.name
}
}, function done (err, appPath) {
if(err) {
throw new Error(err);
}
console.log(‘Done!!’);
});
会社名などはpackage.jsonに全て記述しておくと本当は良いと思います。では、さっそくアプリケーションを書き出してみましょう。
npm run release
distディレクトリができ、中に◯◯-darwin-x64と◯◯-win32-x64が作成されます。◯◯-darwin-x64の中にある.appをMacユーザーに配布アプリケーションを使うことができるようになります。
◯◯-win32-x64フォルダをWindowsユーザーに配布してexeを実行すればWindowsでも同様にアプリケーションを使うことができます。
まとめ
いかがでしたでしょうか。非常に簡単な作業でデスクトップアプリを作ることができました。
以前の記事で作成したサンプルをElectronアプリにしたコードをGithubに公開していますので、下記も参考にしてみてください。
ソースコード
Windows向け[49MB]（すぐにダウンロードが始まります）
Mac向け[38MB]（すぐにダウンロードが始まります）
現在、Electronを使ってLIGブログをマークダウンで書くことができるアプリケーションを作ろうとしています。HTML/CSS/JavaScriptで作ることができるので、ぜひ試してみてください。