ElectronでmacOSアプリをチョッパヤで書いてみる

意外と簡単？

electron アプリ開発

Electronとは？

これ。

要は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;
    });
});