node.jsでScratchXとDigisparkをつなげる

今年の頭にやっていたことを振り返って、ターゲットとして初心者を想定した割に、
手順が多すぎると感じたので、node.js(electron)で手順を少なくした。  
**※毎度のことですが、実際にやるときは自己責任でお願いいたします。**

![ds_cam.jpg](https://qiita-image-store.s3.amazonaws.com/0/110426/1321144d-5423-d1ea-36fa-5ea96ca471f1.jpeg)

## electronでバイナリ化

最終的な形としては、これを目指していて、Windowsでもこれがやりたかった。  
**現時点、Macのみ対応。Windowsについては後述。**  
動作確認した環境は

+ OS X 10.11 (El Capitan) - 64bit
+ macOS 10.12 (Sierra) - 64bit

#### 準備

##### Digispark

Digisparkには、ArduinoIDEを使って、File > Examples > DigisparkUSB > DigiBlinkの
DigiBlink.inoを書き込んでおく。

##### libusb

+ libusbが必要になるので、パッケージマネージャーの[Homebrew](http://brew.sh/index_ja.html)を入れる。
+ Homebrewを使って、libusbをインストール。 `brew install libusb`

##### app

+ 最後に、実行ファイル(app)が入っているzipファイルを落してくる。 [uitspitss/electron_scratchX-digispark/release](https://github.com/uitspitss/electron_scratchX-digispark/releases)
+ 落してきたzipファイルを解凍(展開)する。


#### 実行

**app実行時にクリップボードにURLのコピーが行われるので注意!**  
DigisparkをUSBに挿した状態で、中に入っているappを実行すると、以下のようなウィンドウが立ち上がる。

![dsapp.png](https://qiita-image-store.s3.amazonaws.com/0/110426/ffeff78b-0011-41a8-1ba6-ecfaf124408c.png)

appを立ち上げたときに、ファイアウォールからの警告が出てきたら、「許可」「拒否」どちらかを選択で警告ウィンドウは消す。

あとは、立ち上ったウィンドウに表示されているURLにウェブブラウザ(Chrome推奨)でアクセスすると、
以下の画像のように、その他(Others)のところにDigispark用のブロックが読み込まれているはず。

![ds_scratchx.jpg](https://qiita-image-store.s3.amazonaws.com/0/110426/50b57aa9-b1ce-4ec2-5f16-ee2344e83655.jpeg)

この読み込まれたブロックを組み込んでプログラムを書くとその通りに動く。


## Windows

Windowsでは、electronとnode-usbの相性問題でelectronがコケてしまうので、
electronを使わずにCLIで動くものも書いた。

#### 環境

動作確認した環境は

+ Windows10
+ node.js - `v6.1.0`
+ npm - `3.8.6`

#### 準備

##### Digispark

ここは、上述のelectronバージョンと同様。

##### libusb

Windowsでは[zadig](http://zadig.akeo.ie/)(usbドライバ書き換えソフト)を使ってインストール。

+ zadigをダウンロードする。
+ zadigでDigiUSBのドライバを`WinUSB`に変更する。


##### node

まず、下のリポジトリをクローンしたら、コマンドプロンプト(cmd.exe)で落としてきたディレクトリの中に入る。

[uitspitss/electron_scratchX-digispark](https://github.com/uitspitss/electron_scratchX-digispark)

そして、 `npm install`で必要パッケージをインストールする。
(package.jsonのelectronは不要であれば、はずしてしまっても大丈夫)

#### 実行

パッケージのインストール後、同ディレクトリの中で `node no_electron.js` とすると、
以下のような出力が出てくる。

```sh
-master>node no_electron.js
Digispark is opened.
ACCESS to following URL
http://scratchx.org/?url=http://localhost:9911/myscratch.js
R:255(100%), G:255(100%), B:255(100%)
R:130(51%), G:10(4%), B:8(3%)
R:212(83%), G:105(41%), B:222(87%)
R:245(96%), G:145(57%), B:161(63%)
R:77(30%), G:229(90%), B:171(67%)
R:214(84%), G:184(72%), B:222(87%)
R:117(46%), G:0(0%), B:26(10%)
R:217(85%), G:41(16%), B:102(40%)
R:41(16%), G:242(95%), B:224(88%)
R:61(24%), G:66(26%), B:194(76%)

-master>
```

実行後に出力されるURLにブラウザ(Chrome推奨)でアクセスすると、
上述したelectronのものと同様の動作をする。
`R:~`以下の部分はScratchXで組み込まれたブロッグが実行されると出力されるもの。

終了するときは、`Ctrl-C`で終了。


#### Windows環境においてのelectronとnode-usbの問題

`electron`は、使用するパッケージ内部の`node`のバージョンと`electron`内部の`node`のバージョンを合わせるようにパッケージをリビルドする機能がある。
しかし、このリビルドがコケてしまい、electronで起動すると、`node-usb`でできなかった。
このあたりは、`node-usb`のissuesのあたりに前例はあったけど、VisualStudioのバージョンも噛んだりしていて、私の環境では解決しなかった…

+ [DLL error when importing module on Windows 10 in Electron](https://github.com/tessel/node-usb/issues/129)
+ [Using Native Node Modules](https://github.com/electron/electron/blob/master/docs/tutorial/using-native-node-modules.md)


## まとめ

#### 技術的なところ

今回は、できるだけnode.jsで使うパッケージを減らす方向で作り始めた。
というのも、下調べ段階で、node.jsとelectronがともにのバージョンアップが頻繁であり、
パッケージのバージョン違いでビルドが失敗しているのをよく見かけたため。

javascriptのコードがES6の書き方をしているのもあれば、
ES5?の書き方をしているもあるのは、そのせい。

#### 思ったこと

最近では、Arduinoなどを使えば、ハードウェアに飛び出していけるものが簡単に作れるようになった。
しかし、それを使うには、プログラミングをする環境をそろえたり、そこに出てくる問題を解決したりしなければいけない。
それがプログラミングのおいしいところにたどり着くまでの障害になっていることもよくある。

そこで、使い方によっては、繰り返し処理(for,while)や条件分岐(if,else)などの深いところまで
使うことができる、ScratchXをベースとして、手軽にプログラミングを楽しみたい。楽しませたいのである。
特にハードウェアに結果が出力されるものは、個人的におもしろいと感じるので、Digisparkを使っている。

最後に、node.jsやelectronに詳しい方は、ぜひ、Windowsバージョンのバイナリ化に挑戦してみてください!
成功しましたら、ご連絡いただけると大変うれしいです。

ダ○ソーで売っていたLEDランプの外装をランプカバーにすると、かわいい。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/KkWJYB_z-cc/0.jpg)](http://www.youtube.com/watch?v=KkWJYB_z-cc)

#### 参考にしたサイト

+ [electron](http://electron.atom.io/)
+ [github/node-usb](https://github.com/tessel/node-usb)
+ [DigisparkでUSBデバイスをつくる](http://pulse.project-pp.com/appnote/avr002/)