意外と簡単?
Electronとは?
これ。
electronjs.org
要はWeb技術でクロスプラットフォームなアプリ開発が出来てしまう、すごいやつです。モバイルアプリではPhonegap・Cordovaなどが有名ですが、そのDesktop版といったところでしょうか。いままで書いてきたWebの資産が活かせそうなので、今回はmacOS向けに簡単なアプリを書いてみようと思います。
まずは準備
nodeやnpmが使える前提です。
まずは適当なところにフォルダを掘っておきます。
mkdir electron-test
cd electron-test
そのフォルダ直下で初期化して、electron
とelectron-packager
をインストール。
これで、Electronを使ってアプリを動作させる環境と、macOS向けにアプリという単位でバイナリを吐ける環境が整いました。
npm init -y
npm install electron --save-dev
npm install electron-packager --save-dev
いろんなサイトにかかれているお作法に則って、src
フォルダを掘ります。実際のアプリのコードはsrc
内に書いていきます。
mkdir src
ls
するとこんな感じ。
ls
node_modules package.json
package-lock.json src
おいおいElectronでアプリを実行したり、アプリとして配布できる形に書き出すときに必要なコマンドがありますが、それをpackage.json
に上記のように書き込んでおくと、npm run start
やnpm run build-macOS
のように簡単にコマンドを呼ぶことができるようになり便利です。
"scripts": {
"start": "electron ./src",
"build-macOS": "electron-packager ./src electron-test --platform=darwin --arch=x64 --overwrite",
"build-windows": "electron-packager ./src electron-test --platform=win32 --arch=x64 --overwrite"
}
アプリの中身を書いていく
先述のとおり、src
内でコードを書いていきます。そして、src
直下でも初期化します。
cd src
npm init -y
上記コマンドで生成されたpackage.json
を少し変更します。Electronではmain.js
が最初に読まれ、アプリのエントリポイントもmain.js
になるので、下記のようにmain
を変更します。
"main": "main.js",
そして、そのmain.js
を書いていきます。今回は、このサイトのコピペをさせていただきます・・・。
'use strict';
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var 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('file://' + __dirname + '/index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
});
main.js
ではアプリのウィンドウを開きつつindex.html
を開いて表示させるコードになっています。では、つぎにindex.html
を作ります。こちらはテキトーにHello, Electron!
とだけ書かれたファイルを準備します。
これで一旦完了。
いざ実行
src
ではなく、一つ上の階層で、下記のコマンドを実行します。
npm run start
すると、こんなウィンドウが表示されます。
とりあえず動きました!同じようにnpm run build-macOS
をすると、.appファイルが生成出来ます。
というわけで
今回は内容はしょぼいアプリですが、index.htmlをゴリゴリ書いていけばいろいろなアプリが簡単に作れそうです!お疲れ様でした!
Appendix
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点) - Qiita