GR-CITRUS用GUIクライアント Crione をWindows環境で使うための手順

# はじめに
[Crione](https://github.com/ogom/crione) は mrubyが動くマイコンボード[GR-CITRUS](http://gadget.renesas.com/ja/product/citrus.html) 専用のGUIクライアントです。プログラムの作成から実行までの一連の操作を GUI から行うことができます。

Crioneは[Electron](http://electron.atom.io/) の上で作られており、macOS版は[パッケージ化されて提供](https://github.com/ogom/crione/releases)されていますが、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?](https://github.com/felixrieseberg/windows-build-tools/issues/9)にて原因と対策が報告されていますが、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](https://github.com/Microsoft/nodejs-guidelines/blob/master/windows-environment.md#configuring-your-windows-development-environment) (英文)が役に立つと思います。

## 必要なもの
この記事は、Windows 10(64bit版)で確認しています。以下の2つは事前にインストールしておいてください。

- [Git for windows](https://git-for-windows.github.io/)
- [Node.js](https://nodejs.org/ja/)

また、Windows7の場合は以下も追加で必要という情報もありましたが、当方では未検証です。
- [.NET Framework 4.5.1 ](https://www.microsoft.com/en-us/download/details.aspx?id=40773)

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です。

![production.png](https://qiita-image-store.s3.amazonaws.com/0/17051/4dc58984-f6e9-933e-2637-8d9c6c693cd8.png)


他の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のビルドは、以下のようなサイトが参考になります。

- [mrubyのはじめかたメモ その2 Windows編](http://miyohide.hatenablog.com/entry/2017/01/16/000813)
- [RubicでGR-CITRUSのmrubyプログラミング事始め４[mrbgems編]](http://qiita.com/shimo_cchi/items/645d814995c1902a2563)