Electron デスクトップアプリをAngular2で開発する。

Electron + Angular2

前回の記事

Electronアプリ

最近、Angular2の記事ばかり書いているが、
今回はAngular2 を使って
Electronデスクトップアプリを開発するです。

# 新規プロジェクト作成
ng new ElectronApp
cd ElectronApp

# Electronをインストール
npm install --save-dev electron

# 配布用のツールもインストール
npm install --save-dev electron-packager

main.js

Electron起動時に、最初に実行される
ブラウザプロセス用のスクリプトです。

プロジェクトルート直下に配置する。

./main.js

const { app, BrowserWindow } = require('electron');

let window = null;

app.on('ready', function () {

    window = new BrowserWindow({ width: 800, height: 600 });

    let isProd = false;
    if (isProd){
      // 配布時はdistディレクトリのファイルから読み込む
      window.loadURL(`file://${__dirname}/dist/index.html`);
    }
    else {
      // 開発時は、ng serve で起動したローカルサーバーから読み込む
      window.loadURL('http://localhost:4200');
      window.webContents.openDevTools();
    }

    window.on('closed', function () {
        window = null;
    });
});

app.on('activate', () => {
    if (window === null) {
        createWindow()
    }
});

app.on('window-all-closed', function () {
    if (process.platform != 'darwin') {
        app.quit();
    }
});

package.json

package.json に以下の記述を追加。

"main": "main.js",
"electron": "electron .",
"build": "ng build --base-href=./",
"build-mac": "electron-packager . ElectronApp --platform=darwin --arch=all --version=1.6.7 --overwrite --out=package",
"build-win": "electron-packager . ElectronApp --platform=win32  --arch=x64 --version=1.6.7 --overwrite --out=package",

ng build --base-href=./

--base-hrefを、"./"にしておかないと、
dist配下に出力されたindex.html にアクセスした時に、他のファイルが読み込めない。

デフォルトでは、"/"となっているので、
プロジェクトルートからのPATHでアクセスしようとするのかな?

実行する。

# ng serve で立ち上げる
npm run start

# 別の端末から、エレクトロンを起動。
npm run electron

ビルドして配布する。

main.js のisProdをtrueに書き換えて、ビルドする。
(ここらへん、環境変数とか使えば切替えできると思うけど、まだ試してない。)

- let isProd = false;
+ let isProd = true;
# ng build によるビルド
npm run build

# electron-packager によるビルド
npm run build-mac
> electron-packager . ElectronApp --platform=darwin --arch=all --version=1.6.7 --overwrite --out=package

Packaging app for platform darwin x64 using electron v1.6.7
Wrote new app to package/ReportDraft-darwin-x64

packageディレクトリ配下に、
appファイルができるので、これを配布すればよい。

おしまい

プログラミングについて
プライベートでも勉強や開発をしているので、
会社の人に、その熱量はどこからくるの?
などと聞かれる事がしばしばある。

幼い頃から、積み木やブロックなど
何かを組み合わせたり、
つくる事自体が好きではあった。
作ったもので誰かが感動したり、喜んでくれれば嬉しいのはもちろんなんだけれど。。。

それが目標でも目的でもなく、やはり自分はつくる事自体を楽しんでいるんだと思った。

と、CoCo壱のささみカツカレー納豆トッピングを食べながらふと思った…


コメントを残す