はじめに
Crione は mrubyが動くマイコンボードGR-CITRUS 専用のGUIクライアントです。プログラムの作成から実行までの一連の操作を GUI から行うことができます。
CrioneはElectron の上で作られており、macOS版はパッケージ化されて提供されていますが、Windows版はパッケージ化されていないため自分でビルドする必要があります。
Crione をビルドするためには、Electron がビルドできる環境、もう少し具体的に言うと、Node.js のNative addon module がビルドできる環境を用意する必要があります。Windowsでこの環境を構築する手順は日本語の情報が少なくなかなか大変な作業でしたので、ここで紹介します。
Node.js の Native addon module ビルド環境の構築
Windows環境固有の注意事項
- 今回の手順をVisual Studio 2015がインストール済の環境で試したところ、ビルド時にエラー( MSB8036: The Windows SDK version 8.1 was not found.) が発生しました。windows-build-tools not installing Windows SDK 8.1?にて原因と対策が報告されていますが、Visual Studio 2015のインストーラーを再実行して、プログラミング言語 - Visual C++ を追加インストールすることで解決しました。
- 今回の手順をVisual Studio 2015以前の古いVisual Studioが入っている環境で試したところ、ビルド時にエラー（ MSB4019 ）が発生しました。
.\node_modules\.bin\electron-rebuildコマンドを実行する前に、set VCTargetsPath=C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\v140を実行することで解決しました。 - その他、ビルドでエラーが出る場合は、Node.js に関する Microsoft社 の公式ドキュメント Configuring your Windows development environment (英文)が役に立つと思います。
必要なもの
この記事は、Windows 10(64bit版)で確認しています。以下の2つは事前にインストールしておいてください。
また、Windows7の場合は以下も追加で必要という情報もありましたが、当方では未検証です。
- .NET Framework 4.5.1
Crioneのバージョンは、0.2.2（2017/1/16現在の最新版）で確認しています。
Windows-Build-Toolsのインストール
Windows-Build-Tools を使うと、Node.js の Native addon module のビルドに必要な Python 2.7 と Visual Studio Build Tools をまとめてインストールできます。
Windows PowerShell を管理者権限で起動し、以下のコマンドを実行します。
npm install -g windows-build-tools
以降の作業はすべて管理者権限ではなく、通常のコマンドプロンプトで行います。
Pythonへのパスの設定
Pythonへのパスをユーザーの環境変数のPathに追加する必要があります。
コントロールパネル > システムとセキュリティ > システム > システムの詳細設定で、システムのプロパティの詳細設定を開き、環境変数を選択します。
ユーザー環境変数のPathに%USERPROFILE%\.windows-build-tools\python27を追加します。
コマンドプロンプトを起動し、pythonコマンドを実行して、正しくパスが設定できたこと(コマンドが見つからないというエラーがでないこと)を確認してください。
Crioneのビルドと動作確認
事前準備
まず初めに、webpackとelectron-packagerをインストールしておきます。
C:\work\gr-citrus\crione> npm install -g webpack
C:\work\gr-citrus\crione> npm install -g electron-packager
ビルド
githubからソースを取得して依存ライブラリをビルドします。最後に√ Rebuild Completeが出力されていればOKです。
C:\work\gr-citrus> git clone https://github.com/ogom/crione.git
C:\work\gr-citrus> cd crione/
C:\work\gr-citrus\crione> npm install
C:\work\gr-citrus\crione> .\node_modules\.bin\electron-rebuild
√ Rebuild Complete
起動確認
Crione の公式サイトでは、npm startコマンドが紹介されていますが、Windows ではこのコマンドは動きません。
そこで、コマンドプロンプトで以下のコマンドを実行します。エラーダイアログが表示されずに、Crione のウィンドウが立ち上がればOKです。
C:\work\gr-citrus\crione> set NODE_ENV=development
C:\work\gr-citrus\crione> .\node_modules\.bin\electron ./dev/index.js
パッケージ化
毎回コマンドプロンプトからコマンドを入力して起動するのは大変なため、パッケージ化をします。
パッケージ化をすると、exeファイルをダブルクリックして実行したり、zipファイルにまとめて配布したりすることができるようになります。
パッケージ化の準備
crioneフォルダにてwebpackコマンドを実行した後、リリース用フォルダであるappフォルダの中で、npm installとelectron-rebuildを実行します。
C:\work\gr-citrus\crione> set NODE_ENV=production
C:\work\gr-citrus\crione> webpack -p --config webpack.config.production.js
C:\work\gr-citrus\crione> cd app
C:\work\gr-citrus\crione\app> npm install
C:\work\gr-citrus\crione\app> ..\node_modules\.bin\electron-rebuild -m .
√ Rebuild Complete
パッケージ化
crioneフォルダに戻り、electron-packagerコマンドを実行します。
C:\work\gr-citrus\crione\app> cd ..
C:\work\gr-citrus\crione> electron-packager .\app --asar --icon=.\assets\app.icons --overwrite --platform=win32 --arch=x64 --prune=true --out=dist
成功すると、dist\Crione-win32-x64フォルダ内に crione.exe が作成されます。
crione.exeをダブルクリックして起動してください。エラーダイアログが表示されずに、Crioneが立ち上がればOKです。
他のPCに配布する際は、Crione-win32-x64フォルダをフォルダ毎zipファイルにまとめて配布してください。配布先のPCではzipファイルを解凍して、その中にあるcrione.exeを実行してください。
Crioneの簡単な使い方
- Crione を起動します。
- GR-CITRUS を USB で PC に接続します。
- Gadget メニューのConnectを選択し、COMポートを選択してGR-CITRUSに接続します。
- Tools メニューのmruby > mbrc を選択し、
mrbc.exeを選択します。 - 左側のパネルに、適当なmrubyのコードを書いてから、保存します。
10.times { led 1; delay 1000; led 0; delay 1000; }
- Tools メニューの Save & Build を選択して実行します。
補足：mrubyのビルド
Crione を使うためには、mruby のコンパイラであるmrbc.exeが必要になります。
Windows環境でのmrubyのビルドは、以下のようなサイトが参考になります。