Androidのメモとか

ポキオの日記です。今日も遅延してない。

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

スポンサードリンク

意外と簡単?

electron アプリ 開発

Electronとは?

これ。

electronjs.org

要はWeb技術でクロスプラットフォームアプリ開発が出来てしまう、すごいやつです。モバイルアプリではPhonegap・Cordovaなどが有名ですが、そのDesktop版といったところでしょうか。いままで書いてきたWebの資産が活かせそうなので、今回はmacOS向けに簡単なアプリを書いてみようと思います。

まずは準備

nodeやnpmが使える前提です。

まずは適当なところにフォルダを掘っておきます。

mkdir electron-test
cd electron-test

そのフォルダ直下で初期化して、electronelectron-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 startnpm 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

すると、こんなウィンドウが表示されます。

electron アプリ 開発

とりあえず動きました!同じようにnpm run build-macOSをすると、.appファイルが生成出来ます。

というわけで

今回は内容はしょぼいアプリですが、index.htmlをゴリゴリ書いていけばいろいろなアプリが簡単に作れそうです!お疲れ様でした!

Appendix

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで

勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)

「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。