Posted at

Node/Electronアプリ開発/ビルド用Windows環境セットアップメモ

More than 3 years have passed since last update.

現在、Sync というメッセージングアプリのWindowsデスクトップ版を、Electronを使って開発している。(同じくElectronを使ったMacデスクトップ版はすでに公開済み!)

普段はMacのみでNode/Electronを開発しているのだが、今回WindowsでのElectron開発・ビルド環境構築の知見がいくらか手に入ったので、この記事でまとめてみた。

あらかじめ Kobito for Windows の開発方法について @mizchi さんに詳しく話を聞かせていただいておりそれがとても参考になった (ありがとうございました)。


OS


  • Windows 10 Home 64bit

をMac上のVM (VMWare Fusion) にインストールした。

ライセンスはWindows版開発のために新しく購入した。


マルウェア対策

アプリのバイナリの汚染や誤判定を防ぐため、開発環境ではマルウェアに気をつけたい。

以前Electronアプリがマルウェアに誤判定される事件 があり、Kobito for Windowsも影響を受けたらしい…

ひとまずAvastをインストールした。


環境構築

基本的にはGitとnodeがインストールされていれば問題なく開発できると思う。



  • Git for Windows


    • GitHubのプライベートリポジトリのcloneがうまくいかず諦めた (解決策はあるかも)



  • GitHub Desktop for Windows


    • GitHubを使うならこっちのほうが楽っぽい




  • nodist


    • Windows用Nodeバージョンマネージャ

    • Readmeの手順にそって手で入れる



これらが入ったらリポジトリをcloneして、あとは普通のNode開発ができる。

シェルはGitHub Desktopから開けるGit Shellを使った。(PowerShell/コマンドプロンプト/bash/カスタム が選べる)


実行

electron-prebuilt がそのままWindowsでも使える。


アプリのパッケージング

electron-packager もWindowsでそのまま使える。

(electron-packagerはWindows版をMacやLinuxでクロスビルドすることも可能らしい)

Mac版は64bitビルドを使ったが、Windows版では32bitビルドを使うことにした。

(Kobito/Atom/Slackなども32bit)


アイコンが設定されない問題

electron-packager でWindowsアプリをビルドするとき、アイコンを指定しても設定されない不具合があるらしい。(https://github.com/maxogden/electron-packager/issues/53#issuecomment-119194848)

アイコンを設定するのに使っているrcedit.exe というツールが動かないのが原因らしく、

Microsoft Visual C++ 2010 Redistributable Package (x86) を入れると解決する。


その他つまづいた所


npm run ...gulp-shell などのタスクでコマンドが動かない

WindowsのコマンドプロンプトはMacのシェルと大きく違うせいで色々なシェルコマンドが動かなくなる。

クロスプラットフォームで動くタスクを書くにはコマンドは避けたほうがいい (代わりにNodeツールで行うべき) ことを再実感した。


自動アップデートシステムの構築

これはまだ未解決。(Mac版では、Electronのauto-updater APIを使って構築済み)

https://github.com/GitbookIO/nuts という、Windows/MacのElectronアプリに使えるアップデートのリリースサーバ実装があり、参考になりそう。