Technical Information/GR-CITRUS
 Windows環境への開発環境 Crione の導入メモ
1.Node.jsのNative addon module ビルド環境の構築
- この記事は、Windows7 Pro (32bit) で確認しています。Crioneのバージョンはv1.4.16 developブランチ です。
- Windowsの環境の前準備として、Visual Studio 2015 をインストールした後、Visual C++を追加インストールします。（VisualStudio2015の「ファイル」-「新規作成」-「プロジェクト」にて「新しいプロジェクト」ダイアログを開き、「インストール済み」-「テンプレート」-「Visual C++」を選択して表示される「Visual C++ツールをインストール」をクリックする）
- .NET Framework 4.5.1 のインストールが必要ということですが、私は v4.6.1 の環境下で問題になっていません。必要に応じてインストールしてください。
- Git for windows をインストール
- Node.js をインストール
- あまりりバージョンが古いとCrioneのインストールに失敗するそうです。v6.3以降がおすすめとのことです。
- 私はnodist をインストールして、Node.jsのバージョンをv6.3.1に変更しました。本家Node.jsで該当のバージョンをダウンロード＆インストールしてもよいと思います。
2.Windows-Build-Tools のインストール
- Windows PowerShell を管理者権限で起動し、下記コマンドを実行します。
npm install -g windows-build-tools
npmインストールが始まり、正常にインストールできると以下のようなコンソール出力になります。これでPython2.7とVisual Studio Build Tools がインストールされます。
Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.
PS C:\Windows\system32> npm install -g windows-build-tools
\
> windows-build-tools@1.2.1 postinstall C:\Users\wdn\AppData\Roaming\npm\node_modules\windows-build-tools
> node ./lib/index.js
Downloading BuildTools_Full.exe
Downloading python-2.7.11.msi
[============================================>] 100.0% of 18.64 MB (5.73 MB/s)
Downloaded python-2.7.11.msi. Saved to C:\Users\wdn\.windows-build-tools\python-2.7.11.msi.
Starting installation...
Launched installers, now waiting for them to finish.
This will likely take some time - please be patient!
Waiting for installers... /Successfully installed Python 2.7
Successfully installed Visual Studio Build Tools.
windows-build-tools@1.2.1 C:\Users\wdn\AppData\Roaming\npm\node_modules\windows-build-tools
├── cli-spinner@0.2.6
├── chalk@1.1.3 (escape-string-regexp@1.0.5, ansi-styles@2.2.1, supports-color@2.0.0, strip-ansi@3.0.1, has-ansi@2.0.0)
├── debug@2.6.6 (ms@0.7.3)
├── fs-extra@1.0.0 (graceful-fs@4.1.11, jsonfile@2.4.0, klaw@1.3.1)
└── nugget@2.0.1 (throttleit@0.0.2, minimist@1.2.0, single-line-log@1.1.2, progress-stream@1.2.0, pretty-bytes@1.0.4,
request@2.81.0)
PS C:\Windows\system32>
3.Pythonへのパスの設定
4.Crioneのビルドの前準備（webpackのインストール）
- コマンドプロンプトを起動し、下記コマンドを入力します。
npm install -g webpack
成功すると、結果表示は以下のようになります。
D:\codes\crione>npm install -g webpack
npm WARN optional dep failed, continuing fsevents@1.1.1
C:\Users\wdn\AppData\Roaming\npm\webpack -> C:\Users\wdn\AppData\Roaming\npm\nod
e_modules\webpack\bin\webpack.js
webpack@2.4.1 C:\Users\wdn\AppData\Roaming\npm\node_modules\webpack
├── json-loader@0.5.4
├── tapable@0.2.6
├── loader-runner@2.3.0
├── interpret@1.0.3
├── json5@0.5.1
├── supports-color@3.2.3 (has-flag@1.0.0)
├── loader-utils@0.2.17 (object-assign@4.1.1, big.js@3.1.3, emojis-list@2.1.0
)
├── ajv-keywords@1.5.1
├── source-map@0.5.6
├── webpack-sources@0.2.3 (source-list-map@1.1.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── acorn@5.0.3
├── enhanced-resolve@3.1.0 (object-assign@4.1.1, graceful-fs@4.1.11)
├── memory-fs@0.4.1 (errno@0.1.4, readable-stream@2.2.9)
├── acorn-dynamic-import@2.0.2 (acorn@4.0.11)
├── watchpack@1.3.1 (graceful-fs@4.1.11, chokidar@1.6.1)
├── yargs@6.6.0 (decamelize@1.2.0, get-caller-file@1.0.2, camelcase@3.0.0, y1
8n@3.2.1, set-blocking@2.0.0, which-module@1.0.0, yargs-parser@4.2.1, require-ma
in-filename@1.0.1, require-directory@2.1.1, string-width@1.0.2, cliui@3.2.0, os-
locale@1.4.0, read-pkg-up@1.0.1)
├── uglify-js@2.8.22 (uglify-to-browserify@1.0.2, yargs@3.10.0)
├── ajv@4.11.8 (co@4.6.0, json-stable-stringify@1.0.1)
├── node-libs-browser@2.0.0 (punycode@1.4.1, string_decoder@0.10.31, constant
s-browserify@1.0.0, https-browserify@0.0.1, tty-browserify@0.0.0, path-browserif
y@0.0.0, os-browserify@0.2.1, process@0.11.10, domain-browser@1.1.7, assert@1.4.
1, querystring-es3@0.2.1, stream-browserify@2.0.1, timers-browserify@2.0.2, even
ts@1.1.1, console-browserify@1.1.0, vm-browserify@0.0.4, util@0.10.3, url@0.11.0
, readable-stream@2.2.9, stream-http@2.7.0, browserify-zlib@0.1.4, buffer@4.9.1,
crypto-browserify@3.11.0)
└── async@2.3.0 (lodash@4.17.4)
D:\codes\crione>
5.Crioneのビルドの前準備（electron-packagerのインストール）
- コマンドプロンプトで、下記コマンドを入力します
npm install -g electron-packager
成功すると、結果表示は以下のようになります。
D:\codes\crione>npm install -g electron-packager
C:\Users\wdn\AppData\Roaming\npm\electron-packager -> C:\Users\wdn\AppData\Roami
ng\npm\node_modules\electron-packager\cli.js
electron-packager@8.6.0 C:\Users\wdn\AppData\Roaming\npm\node_modules\electron-p
ackager
├── semver@5.3.0
├── run-series@1.1.4
├── rcedit@0.8.0
├── minimist@1.2.0
├── debug@2.6.6 (ms@0.7.3)
├── plist@2.0.1 (base64-js@1.1.2, xmldom@0.1.27, xmlbuilder@8.2.2)
├── extract-zip@1.6.0 (debug@0.7.4, mkdirp@0.5.0, yauzl@2.4.1, concat-stream@
1.5.0)
├── sanitize-filename@1.6.1 (truncate-utf8-bytes@1.0.2)
├── fs-extra@2.1.2 (jsonfile@2.4.0, graceful-fs@4.1.11)
├── resolve@1.3.3 (path-parse@1.0.5)
├── electron-osx-sign@0.4.4 (compare-version@0.1.2, isbinaryfile@3.0.2, tempf
ile@1.1.1, bluebird@3.5.0)
├── get-package-info@1.0.0 (lodash.get@4.4.2, bluebird@3.5.0, read-pkg-up@2.0
.0)
├── electron-download@4.0.0 (path-exists@3.0.0, sumchecker@2.0.2, rc@1.2.1, n
ugget@2.0.1)
└── asar@0.13.0 (chromium-pickle-js@0.2.0, commander@2.9.0, minimatch@3.0.3,
glob@6.0.4, tmp@0.0.28, mkdirp@0.5.1, cuint@0.2.2, mksnapshot@0.3.1)
D:\codes\crione>
6.Crioneのビルドの前準備（yarnのインストール）
7.Crioneのビルド
- まず、githubからdevelopブランチをクローンします。つづいて、crioneディレクトリに移動し、yarnにてインストールを行った後、依存ライブラリをリビルドします。最後に√ Rebuild Completeが表示されれば成功です。
D:\codes\crione>git clone -b develop https://github.com/ogom/crione.git
Cloning into 'crione'...
remote: Counting objects: 467, done.
remote: Total 467 (delta 0), reused 0 (delta 0), pack-reused 467Receiving object
Rece
Receiving objects: 100% (467/467), 466.63 KiB | 297.00 KiB/s, done.
Resolving deltas: 100% (197/197), done.
D:\codes\crione>cd crione
D:\codes\crione\crione>yarn install
yarn install v0.23.3
[1/4] Resolving packages...
[2/4] Fetching packages...
warning fsevents@1.0.17: The platform "win32" is incompatible with this module.
info "fsevents@1.0.17" is an optional dependency and failed compatibility check.
Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 325.41s.
D:\codes\crione\crione>node_modules\.bin\electron-rebuild
√ Rebuild Complete
D:\codes\crione\crione-develop>
下記のウィンドウが起動すれば、成功です。
8.パッケージ化
- 手順に従って、Crioneを起動しやすくするためのパッケージ化を行います。
D:\codes\crione\crione>set NODE_ENV=production
D:\codes\crione\crione>webpack -p --config webpack.config.production.js
D:\codes\crione\crione>cd app
D:\codes\crione\crione>npm install
< 表示省略 >
| `-- is-promise@2.1.0
+-- rx@4.1.0
+-- strip-ansi@3.0.1
| `-- ansi-regex@2.1.1
`-- through@2.3.8
D:\codes\crione\crione\app>..\node_modules\.bin\electron-rebuild -m .
√ Rebuild Complete
D:\codes\crione\crione\app>cd ..
- electoron-packager にパスが通っていないようなので、検索してコマンドにパス（ C:\Users\wdn\AppData\Roaming\npm ）を追加して以下のように実行しました。（一般的には、C:\Users\<ユーザー名>\AppData\Roaming\npm）となります。
D:\codes\crione\crione>C:\Users\wdn\AppData\Roaming\npm\electron-packager .\app --asar --icon=.\assets\app.icons --overwrite --platform=win32 --arch=x64 --prune=true --out=dist
Downloading electron-v1.4.16-win32-x64.zip
[============================================>] 100.0% of 54.38 MB (1.38 MB/s)
Packaging app for platform win32 x64 using electron v1.4.16
Wrote new app to dist\Crione-win32-x64
D:\codes\crione\crione>
- 上記は64bit版ですが、32bit版を作る場合は以下のようになります。
D:\codes\crione\crione-develop>C:\Users\wdn\AppData\Roaming\npm\electron-packager .\app --asar --icon=.\assets\app.icons --overwrite --platform=win32 --arch=ia32 --prune=true --out=dist
Packaging app for platform win32 ia32 using electron v1.4.16
Wrote new app to dist\Crione-win32-ia32
D:\codes\crione\crione-develop>
- distディレクトリに生成された実行環境の中で、crione.exeをダブルクリックし、正常に起動することを確認します。
9.動作確認
- 最後に、生成したCrione実行ファイルを起動して、コンパイル、ビルド、及びGR-CITRUSへのダウンロードができることを確認します。Crioneからmrubyコンパイラ(mbrc.exe)を呼び出す必要がありますが、これはソースからビルドする必要があります。 RubicでGR-CITRUSのmrubyプログラミング事始め４[mrbgems編] などを参考にビルドしたmbrc.exe(githubよりクローンしたフォルダのmruby\build\host\bin\mrbc.exe)を指定してください。
以上で説明は終わりです。
|
![[kio-denshilogo]](image/kio-denshilogo.png "[kio-denshilogo]")
