Drafts

@cm3 の草稿置場 / 少々Wikiっぽく使っているので中身は適宜追記修正されます。

Electron アプリ開発メモ

追記したい 開発したい

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.");}
            }
        ]
    }
]

//mainWindow の定義はすでにコードに書かれている想定
//mainWindow = new BrowserWindow({width: 800, height: 400});
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 を参考に。

Mac 用のコンパイルでエラー

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;

ってことです。

その他参考:

何を作ってるのか