Electron メモ帳（１）

最近仕事で Electron アプリを書いている。ちょっと昔に触ったときには npm install electron-prebuilt じゃないとうまくインストールできないし、同じデスクトップアプリ書くなら .NET Framework でいいじゃん？ って感じだったのでそこまで深くやらなかった。けど、改めて触ってみると勝手が全然違って面白いね、って思った。

簡単に Electron を説明するなら、NodeJS と Chromium で動くデスクトップアプリケーションを開発するためのフレームワークで、Web 系の知識を使って開発可能であり、マルチプラットフォームに出力ができる。最近のフレームワークはマルチプラットフォームが多いよね。楽でいいけど。

要するに、今までブラウザで動かしていた Web の資産を流用してスタンドアロンなアプリケーションを作ったり、Web 系のノウハウを利用してデスクトップアプリを作りたかったり、様々なプラットフォーム向けの開発をやりたい場合には便利なわけだ。ちなみに Android や iOS 用のアプリも作れるらしいけど、今回開発対象じゃなかったからよく調べてない。

今はというと、Typescript+AngularJS で書いて Webpack でビルドしている。なんか Webpack のビルド対象にしれっと Electron がいて、それをターゲットに設定しておくと NodeJS のモジュールが使えたりする。調べると中々色んなことができるのが分かって、非常に楽しい。

ということで、書きっぱなしというのもなんだし、やったことは覚書しておこうと思う。

---

まずは Electron の導入から。npm と NodeJS は入ってる前提でいいでしょう。どうせ NodeJS 入れとけば勝手に npm も入るし。新しい物好きの人は Yarn 使ってもいいんじゃないかな（どっちにしろ npm は入れることになるだろうけど）。

とりあえず npm install electron で Electron をインストールする。パッケージングするなら electron-packager ってモジュールが必要なんだけど、今回はサンプル作るだけなので入れなくても構わない。

入れられたら、とりあえず Hello World してみるんだけど、その前に Electron の仕組みを軽く洗っておく。

Electron は二つのプロセスを駆使して動いている。メインプロセスとレンダラプロセスだ。メインプロセスとは、Electron 本体を動かしているプロセスで、ウィンドウの作成やバックグラウンドで行う処理を担っている。一方レンダラプロセスは、ウィンドウに表示するコンテンツを制御するプロセスである。要するに、ブラウザとウェブページの関係だと思ってもらっていいと思う。

Electron アプリを動かすためには、これら双方のコーディングを行う必要がある。といっても、レンダラプロセスは（ウィンドウ間の通信やログイン処理などをしないのであれば）普通のブラウザ向けのページを作るのと大差ない。よって、適当な HTML の入門サイトに行って Hello World のコードをパクってくれば問題ない。

メインプロセスは、次のように書く必要がある。

// Electron モジュール本体を読み込み
const electron = require('electron');

// Electron モジュールの機能を個別に取得
const {app, BrowserWindow} = electron;

// window のインスタンス用変数
let mainWindow = null;

// window を生成する関数
function createMainWindow(){

    // 新しい window を作成
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    // window が開く URL の指定
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    // Developer Tool を開く操作
    mainWindow.webContents.openDevTools();

    // window を閉じたときの挙動を指定
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

// window が開始された時の挙動を指定
app.on('ready', createMainWindow);

// すべての window が閉じたときの挙動を指定
app.on('window-all-closed', () => {
    if(process.platform !== 'darwin'){
        app.quit();
    }
});

最後に、package.json の "main" がメインプロセスの js ファイルになっていることを確認しておく。Electron は起動時にここを見るようになっている。

Electron を起動するには、node_modules の .bin ディレクトリ内にある electron ファイルを実行する。グローバルにインストールしてパスを通しているなら（多分）electron とだけ打っても起動するはず。毎回入力するのが面倒だったら、package.json の scripts にでも書いておくことを進める。

ちゃんと書けていれば、ウィンドウが立ち上がって index.html の内容が表示されるはずだ。

---

とりあえず導入はこんなところだと思う。単純に単一ウィンドウでやるなら、Web なり Node なりの知識を駆使して書けると思う。

もっと Electron っぽい話については、もうちょっと知見が溜まったら（あと気が向いたら）書こうと思う。