MacでのElectron周りでちょっとしたこととかのメモ。
事前準備
インストール
|
1 2 |
$ brew install node $ npm -g install electron-prebuilt |
package.json 作成
プロジェクトディレクトリで以下のコマンド。
|
1 |
$ npm init -y |
package.jsonが作成されるので以下を追記しておく。
|
1 2 3 4 |
"main": "main.js", "scripts": { "start": "electron main.js" }, |
これで $ npm start でビルドできる。
npmモジュールのインストール
普通のnpmコマンドだけど D オプションをつけるとpackage.jsonに追記してくれる。
|
1 2 3 4 |
$ npm i -D {モジュール} # ↑はコレの省略版 $ npm install --save-dev {モジュール} |
こんな感じになる。
package.json
|
1 2 3 4 5 6 |
"devDependencies": { "date-utils": "^1.2.21", "puid": "^1.0.5", "sqlite3": "^3.1.4", "underscore": "^1.8.3" } |
メインプロセス
package.jsonで指定するファイル。
|
1 |
"main": "main.js" |
今のところ躓いたものがないというか、そんなに書いてないというか…
レンダラプロセス
実際のHTML部分。
メインプロセスのモジュールも使えたりする。
jQueryを使う
読み込み時にエラーになる。
コチラを参照。
アプリケーションメニュー
メニューを指定しないでパッケージングするとコピペ等ができないAppに仕上がる。
開発中はデフォルトのメニューに実装されているので気がつかないよ(´・ω・`)
とりあえず「編集」メニューがあればコピペできる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var remote = require('remote'); var Menu = remote.require("menu"); var template = [{ label: 'Edit', submenu: [ { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' }, { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' }, { type : 'separator' }, { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' }, { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' }, { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }, { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' } ]} ]; Menu.setApplicationMenu(Menu.buildFromTemplate(template)); |
aリンクの挙動
(v0.36.8で確認)
aリンクを押すとブラウザが立ち上がるわけでなく、Electron App内で画面遷移する仕様っぽい。
target=”_blank” を指定していると新しいElectron APPのウィンドウが立ち上がる。
Webシステムをアプリに落とした時は便利だけど、普通にブラウザで開いてほしい時もあるので以下の様にする。
|
1 2 3 4 |
$(document).on('click', 'a', function() { require('shell').openExternal(this.href); }); |
配布
パッケージングツールのインストール
|
1 |
$ npm -g install electron-packager |
パッケージング
プロジェクトのルートディレクトリにいるとする。
|
1 |
$ electron-packager . {APPNAME} --platform=darwin,win32 --arch=x64 --version=0.36.8 |