- Contents -
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壱のささみカツカレー納豆トッピングを食べながらふと思った…