LoginSignup
2
3

More than 5 years have passed since last update.

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

Posted at

今年の頭にやっていたことを振り返って、ターゲットとして初心者を想定した割に、
手順が多すぎると感じたので、node.js(electron)で手順を少なくした。

※毎度のことですが、実際にやるときは自己責任でお願いいたします。

ds_cam.jpg

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を入れる。
  • Homebrewを使って、libusbをインストール。 brew install libusb
app

実行

app実行時にクリップボードにURLのコピーが行われるので注意!

DigisparkをUSBに挿した状態で、中に入っているappを実行すると、以下のようなウィンドウが立ち上がる。

dsapp.png

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

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

ds_scratchx.jpg

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

Windows

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

環境

動作確認した環境は

  • Windows10
  • node.js - v6.1.0
  • npm - 3.8.6

準備

Digispark

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

libusb

Windowsではzadig(usbドライバ書き換えソフト)を使ってインストール。

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

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

uitspitss/electron_scratchX-digispark

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

実行

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

-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のバージョンも噛んだりしていて、私の環境では解決しなかった…

まとめ

技術的なところ

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

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

思ったこと

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

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

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

ダ○ソーで売っていたLEDランプの外装をランプカバーにすると、かわいい。
IMAGE ALT TEXT HERE

参考にしたサイト

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3