これは学んだことを整理しただけの完全な技術メモです。

ITに興味ない方

読む必要ないです

これから学習してみようという方

読む必要はないと思います。

https://nodejs.org/ja/

PythonやRubyとかは遥か昔の古の時代ではナウでヤングな最先端って感じでしたが、現代はNode.jsで何でもやっちゃう時代なので今から勉強するならNode.jsがいいと思います。

Electron + Pythonでクロスプラットフォーム開発-1

世界的ですもんね乗るしかないこのNode.jsに

ぜひともNode.jsのスペシャリストになって私に色々と教えてください（切実）

古の技術しか使えない方

さて、ここで問題となるのは古の時代の技術しか使えない我々です。

もちろん新しい技術（言語、フレームワーク、ライブラリ）を使うのが一番コスパがかからない場合は移行していくのがいいと思います。

ただ『いい感じのコード書いたから、これを非エンジニア用に配布するために簡易GUIを付けてバイナリ化したい』みたいな時があるかもしれません（というか私がそんな感じでした）

更に普段はWeb開発してる人が入力フォーム程度の簡単なものを用意するためだけに新しいGUIのAPIを学ぶのは割に合わないという時もあると思います（というか私がそんな感じでした）

そんな時にDiscordで「Electronいいかもよ」って教えてもらったので試しに使ってみました。

アーキテクチャ

Electron + Pythonでクロスプラットフォーム開発-2

Electronというのは雑に言うとChromium(Chrome)のエンジンを使ってデスクトップアプリケーションを作れるという感じです。

これはnode.jsで記述する感じなので、node.jsで全てを書くなら特に問題なく開発ができます。

ただ、別の言語で書いたコードを走らせるのは一工夫必要です。

ここでZeroMQというメッセージングライブラリを使います。親からサブプロセスとして子のコードを走らせて、そこでプロセス間通信をする感じです。

つまりZeroMQがサポートしている言語ならばGUIの画面の部分は完全にElectron任せにしてビジネスロジックの部分は自分の使い慣れた環境で開発ができます。

適当なスクリプトを書いて、後でそれを走らすためだけのおまけのGUIを付けるみたいな場合だと便利だと思います。

Windowsでのビルド

https://github.com/fyears/electron-python-example

今回はこのサンプルをWin / Macの両方に向けてビルドしていきます。

git cloneもしくは右上のDownload ZIPでダウンロードして解凍して適当な作業フォルダに置いてください。

ドキュメントも兼ねてるので、分からないところがあったらまずは上記の記事を読んでみてください（知りたいことは大体書いてあります）

Git

https://git-scm.com/download/win

おそらく殆どの場合は "64-bit Git for Windows Setup" をインストールすれば大丈夫だと思います。

git

gitコマンドが使えるようになっていれば成功です。

Visual Studio

http://d.hatena.ne.jp/mocotiti/20170504/1493868466

Visual Studio Community 2015のイメージディスク

ZeroMQ（詳しく言うとZeroMQのNode.js向けのライブラリのビルド）にはVisual C++ 2015が必要です。VS 2017でもできるらしいんですが、私は上手くいかなかったので大人しくVS 2015を入れました。

Python

https://www.python.org/downloads/

macOSでもそうですが、ZeroMQにはpython 2.x系が必要です。

しかしpython 2.x系が2020年にサポートが終了するオワコンレガシー言語なので、ビジネスロジックの部分はpython 3.x系で書きたいと思います。

今回はpython 2.7.15 と 3.6.7 の64bit版をインストールしました。

Electron + Pythonでクロスプラットフォーム開発-3

先にPython 3.x系統を『Add Python 3.x to PATH』にチェックボックスを付けてインストールします。その後にPython 2.x系統をインストールして1度再起動します。

py -3 -V # Python 3のバージョン
py -2 -V # Python 2のバージョン
python -V # Python 3のバージョン

それぞれ正しい結果が表示されたら成功です。

Node.js

https://github.com/nullivex/nodist/releases

Windowsでnode.jsのバージョン管理にはnodistというのがいいらしいです。

nodist 10.11.0

新しいnode.jsを入れます。バージョンはElectronで走ってるのと同じバージョンがいいと思います。多分。

  "devDependencies": {
    "electron": "*",
    "electron-packager": "*",
    "electron-rebuild": "*"
  }

package.jsonをテキストエディタで開いて "devDependencies" の項目に "electron-rebuild" を追加します。

set PATH=C:¥Python27;%PATH%
npm install
.¥node_modules¥.bin¥electron-rebuild
.¥node_modules¥.bin¥electron

Electron + Pythonでクロスプラットフォーム開発-4

ZeroMQのビルドはPython 2.x系でないといけないので、npm installの前にPATHを追加しておきます。.¥node_modules¥.bin¥electronで初期状態のアプリが立ち上がったら成功です。

Virtualenv

先程の状態だとPATHがpython 2.x系のままなのでpython 3.x系に戻すために一度コマンドプロンプトを終了して、もう一度起動します。こまめに "python -V" をして、今どのpythonが走っているのか確認すると安全です。

https://qiita.com/maisuto/items/91143d26b609d6cfc1ac

pip install virtualenvwrapper-win
mkvirtualenv envname

こんな感じで仮想環境を構築します。ちなみに↑の記事になかったですが仮想環境を削除する時は "rmvirtualenv envname" らしいです。

もし仮想環境に入ってない場合は "workon envname" をします。

https://qiita.com/akabei/items/da70ebf61cc413d5ff0d

chcp 65001

WindowsはShiftJISという未知の文字コードを使っているらしいので、人間が本来使うべき文字コードであるUTF-8に変更します。

pyinstaller pycalc¥api.py --distpath pycalcdist

これでpycalcdistというフォルダに新しいexeが作られていれば成功です

パッケージング

"build" というフォルダと "api.spec" というファイルを削除します。

.¥node_modules¥.bin¥electron-packager . --overwrite --ignore="pycalc$" --ignore="¥.venv" --ignore="old-post-backup"

Electron + Pythonでクロスプラットフォーム開発-5

pretty-calculator-win32-x64というフォルダが作られていて、中のexeを起動して電卓として使えれば成功です。

macOSでのビルド

macで開発している人は最低限のことは自分で調べれるはずなので、かなりガバく書きます。

まずプロジェクトをダウンロードしてきて解凍して適当な作業ディレクトリに置きます。

  "devDependencies": {
    "electron": "*",
    "electron-packager": "*",
    "electron-rebuild": "*"
  }

Windowsと同じようにpackage.jsonをテキストエディタで開いて "devDependencies" の項目に "electron-rebuild" を追加します。

Anyenv

anyenvの入れ方は適当にググってください。

ndenv install v10.11.0
ndenv global v10.11.0
pyenv install 2.7.15
pyenv install 3.6.7
pyenv virtualenv 2.7.15 python2
pyenv virtualenv 3.6.7 python3
pyenv local python3 python2
npm install --global npm
pip install --upgrade pip

ここで大事なところは "pyenv local python3 python2" とpython3の仮想環境名を先に書くことです。

python2 -V # python2のバージョン
python -V # python3のバージョン

これによって、python2のコマンドでは2.x系がpythonのコマンドでは3.x系が走ります。

パッケージング

npm install
./node_modules/.bin/electron-rebuild
pip install zerorpc
pip install pyinstaller
pyinstaller pycalc/api.py --distpath pycalcdist
rm -rf build/
rm -rf api.spec

./node_modules/.bin/electron-packager . --overwrite --ignore="pycalc$" --ignore=".venv" --ignore="old-post-backup"

pretty-calculator-darwin-x64というディレクトリが作成されていて中のアプリが起動できたら成功。

おわりに

Webの技術をWindowsで動かそうとしたら発狂しそうでした（血の涙）

お問い合わせや質問など

Discord: EVE Japanese IT
Twitter: @evekatsu

IT系に興味がある人はぜひDiscordの方に遊びにきてみてください。
また、面白いアイデアも随時募集しています！
Twitterの方はフォロー外にDMを解放しています。