Electron で ディレクトリ監視ツールを作ってる。その際に躓いた基本的なことをメモしておく。
Electron でアプリを作る基本
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
こちらをどうぞ。このひな形をどんどん書き換えていきました。
html / css / js は普通に書き換えられる
こういうウェブの技術で構築できるのが electron のいいところですし。
プロセス間通信
js を書いていると、main.js と html 側の js でやりとりしたいことが出てくるはず。ローカルでの計算結果を表示したりね。そういう時に、Electronでipcを使ってプロセス間通信を行う - Qiitaが参考になると思いきやこれはもう使えなくなっていて、
の２つを使う。前者は ipc と同じくプロセス間通信で、後者は main プロセスから html 側のイベントを取得したり、js を実行したりにも使える。
例:
main.js
mainWindow.webContents.on('did-finish-load',function(){
mainWindow.setTitle("sample");
mainWindow.webContents.send('message', 'Hello World!');
});
view.js(html側)
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('message', function(event, message){
var date_obj = new Date();
var li = document.createElement("li");
var span1 = document.createElement("span");
span1.appendChild(document.createTextNode(zfill(date_obj.getHours(),2) + ":" + zfill(date_obj.getMinutes(),2)));
var span2 = document.createElement("span");
span2.appendChild(document.createTextNode(message));
li.appendChild(span1);
li.appendChild(span2);
document.getElementById("message").appendChild(li);
})
今回はシンプルなものを作っているので、jquery も react もなんも使ってない。生 javascript。
BrowserWindow のタイトルを動的に書き換える
既に上の例に示しているが、'did-finish-load' イベントを受け取ってからタイトルを書き換えないと、非同期の問題で html に書き込まれた title タグを上書きできない。
参考:
BrowserWindow のメニューを入れ替える
Menu APIを参考に書く。こちらは右クリックメニューを作るサンプルがドキュメントに書かれているが、最後の Menu.setApplicationMenu(menu); を BrowserWindow インスタンスの mainWindow に対して、 mainWindow.setMenu(menu); と書き換えるだけで、上のメニューバーの入れ替えが実現できる。
例:
const Menu = require('menu');
var template = [
{
label: 'Test',
submenu: [
{
label: 'console',
accelerator: 'CmdOrCtrl+M',
click: function(item, focusedWindow) {console.log("selected.");}
}
]
}
]
var menu = Menu.buildFromTemplate(template);
mainWindow.setMenu(menu);
参考:
引数のパージング
process.argv で引数を受け取れる。Python の sys.argv みたいなもん。でも注意しなければいけないのは、electron コマンドで起動してるときは、
electron [main.jsのあるディレクトリ] [引数]
となっているので、2以降を使うのだが、コンパイルして exe とかにすると、
hogehoge.exe [引数]
となるので、インデックスがズレるのだ。ちゃんと、commanderかnomnomあたりを使って、引数のパージングは実装したほうがいい。
参考:
配布
Windows 用にコンパイルするとこんなシンプルなプログラムでも 100MB を超えてしまう。それなら node.js や electron をインストールさせるインストーラを作って、メインはバッチファイルで作ってBat To Exe Converterみたいなので体裁整えた方が良い気がするかもしれないが、上記に書いたように、electron や nodejs がまだ進化中なので、その方法では electron のバージョン違いなどですぐ使えなくなる。諦めてコンパイルしよう。
GitHub 上でバイナリのリリースは Release Your Software を参考に。
Windows で mac 用のバイナリを作るときに Cannot create symlinks; skipping darwin platform というエラーが出るが、これはコマンドを管理者権限で実行する必要があるらしいです。
参考:
electron モジュールに組み込まれているモジュールの利用
Qiita に投稿したのでそちらを見てください→electron v0.35.0 以降は、electron モジュールを使いましょう -Qiita。要は
- ×
const app = require('app');
- ○
const app = require('electron').app;
ってことです。
その他参考:
何を作ってるのか
