@wakufactory さんの MarkDownDiagram を Electron で起動するようにしてみた #Node.js

@wakufactory さんの MarkDownDiagram は、Chrome、Safari や Firefox があれば、ローカルでブラウザのみで動作します。(Internet Explorer 11 では動作せず。)

職場の都合上、自由にブラウザをインストールできないため展開するだけで使える electron 化をしたかったので試してみました。

筆者の環境

VineSeed (Vine Linux 開発版) 64bit
nodebrew use v4.4.7(LTS)

Fork とブランチ作成

誠に勝手ながら、repository を Fork させていただき、use-electron というブランチを切りました。

yasumichi/MarkDownDiagram at use-electron

そしてローカルに clone して当該ブランチをチェックアウトしました。

$ git clone https://github.com/yasumichi/MarkDownDiagram.git (実際には SSH アクセス)
$ git checkout -b use-electron origin/use-electron

.gitignore の作成

Node.js を使用するにあたり、node_modules ディレクトリ以下などを git に無視してもらうために gitignore/Node.gitignore at master · github/gitignoreから、 .gitignore を拝借してきました。

$ git add .gitignore
$ git commit -m "message..."

npm 初期化

例のごとく、
$ npm init
で package.json を作成しました。(個人的に最初からエディタで書くのは気が進まない )

name の入力時にデフォルト値を使用しようとすると

name: (MarkdownDiagram)
Sorry, name can no longer contain capital letters.

というように name に大文字は使えないよ、と怒られたので markdown_diagram にしました。

entry point は、js/main.js としました。

必要な node_modules の install

electron-prebuilt と electron-packager をプロジェクトローカルにインストールしました。

$ npm install --save-dev electron-prebuilt
$ npm install --save-dev electron-packager

メインプロセスの作成

先ほど、entry point に指定した js/main.js を作成しました。

単純に BrowserWindow を生成して、 index.html を読み込むだけだとダイアグラム部分が描画されませんでした。

View -> Toggle Developer Tools で開発者ツールを呼び出し、Console を確認すると以下のメッセージが出力されていました。

Uncaught ReferenceError: $ is not defined

jQuery がうまく認識できていないようです。

@pirosikick さんのElectronでjQueryがundefinedになるによるとレンダラプロセス側(index.html)で jQuery の読み込み方を変えるという方法も提示されていたのですが、これをやってしまうと普通にブラウザで開いた時に逆にダイアグラムが描画できなくなってしまいました。

メインプロセス側JSでBrowserWindowをインスタンス化する時のオプションに'node-integration': falseを追加するの方を試してみましたが、うまく行きません。

再度、本家の FAQ を確認してみることにしました。

I can not use jQuery/RequireJS/Meteor/AngularJS in Electron. の節を確認すると当時と作法が若干、変わってしまったようです。

// In the main process.
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})

上記のように nodeIntegration オプションが、webPreferences オプションの一部(?)になったようです。(個人的には、メソッドの最後に ; を付けないと落ち着かない… )

これで electron を使用した際もブラウザで読み込んだ際も問題なく、ダイアグラムが描画されるようになりました。

起動確認

$ ./node_modules/.bin/electron .

上記コマンドで起動確認をします。package.json の scripts に以下の様に記述を追加すると $ npm start でも起動できるようになります。

   "scripts": {
+    "start": "electron .",
     "test": "echo \"Error: no test specified\" && exit 1" 
   },

GitHub への反映

以下の手順で GitHub のリモートブランチへ反映しました。

$ git add js/main.js package.json
$ git commit -m "add files using electron"
$ git push

パッケージ作成例

以下は、Windows 32bit 環境向けにパッケージを作成する例です。(Linux 環境の場合、wineが必要です。)--pruneオプションにより、開発時にのみ必要な node_modules を含まないようにできます。

$ ./node_modules/.bin/electron-packager --platform=win32 --arch=ia32 --prune --asar=true --out=releases .

上記コマンドにより、 releases/markdown_diagram-win32-ia32 以下にパッケージが展開されます。アーカイブはされないので必要に応じ、zip などで圧縮してください。

今の所、リリースパッケージは公開していません。

@wakufactory さんの MarkDownDiagram を Electron で起動するようにしてみた