[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers (Japanese | 日本語)

電球をスマホから作動できたり、体重や心拍数をブラウザからモニタリングできたり、いろいろなモノがモバイルやインターネット上に接続されるようになり、今やモノのインターネット (Internet of Things) の時代と言われています。Web Developer は既にソフトウェアでアプリケーションのプロトタイプをするスキルを持ち合わせているのだから、この際ハードウェアも含めて Internet of Everything のプロトタイプをしてみませんか？

このスライドは、2015年11月7日に東京、渋谷で行われた NodeFest からのもので、Node.js / Johnny-Five を使って Arduino や Raspberry Pi と、Front-end JavaScript そして PubNub を使ってモノのインターネットのプロトタイプをしてみよう、という内容です。

- Arduino
- Raspberry Pi
- Johnny-Five JS robotics framework
- PubNub
- Prototyping Phillips Hue Clone
- KittyCam (Raspberry Pi camera w/ cat facial recognition)

Transcript

1. @girlie_mac Hardware Hacking for JavaScript Devs Tomomi Imura (@girlie_mac) Hardware Hacking for JavaScript Devs https://flic.kr/p/8tuc1u by randomliteraturecouncil CC-BY 2.0 2015 東京 Node 学園祭
2. @girlie_mac I am a: • Front-End Engineer • N00b Hardware Hacker • Sr. Developer Evangelist at PubNub • San Francisco Dweller
3. @girlie_mac Internet of Things の時代 Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf 500億！
4. @girlie_mac Withings: Smart Body Analyzer GE Link Cinder Sensing Cooker Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
5. @girlie_mac 猫も杓子も インターネット ｷﾀ━━━(ﾟ∀ﾟ)━━━!!!
6. @girlie_mac ニュータイプ なのか…？ Srsly, where should I start?
7. @girlie_mac Arduino (Genuino) • MCU のキット • オープンソースなハードウェア とソフトウェア (IDE) • ディベロッパ・フレンドリー
8. @girlie_mac LittleBits
9. @girlie_mac LittleBits & Arduino at Heart 9V BATTERY USB PLUG TO COMPUTER MODULES
10. @girlie_mac Arduino-Compatible MCUs BeagleBone C.H.I.P mCookie Petduino LinkIt One
11. @girlie_mac Tessel USB PLUGS TO COMPUTER ETHERNET MODULES GPIO DIGITAL PINS EXTRA USB PORTS
12. @girlie_mac Programming Tessel in Node.js var tessel = require('tessel'); var camera = require('camera-vc0706').use(tessel.port['A']); camera.on('ready', function() { camera.takePicture(function(err, image) { if (err) { console.log(err); } else { var name = 'pic-' + Date.now() + '.jpg'; process.sendfile(name, image); camera.disable(); } }); }); カメラモジュールの 差し込まれたポート ready イベント コールバック
13. @girlie_mac Raspberry Pi USB TO POWER SOURCE TO MONITOR TO MOUSE TO KEYBOARD WI-FI ADAPTER SD CARD GPIO DIGITAL PINS 4 EXTRA USB PORTS ETHERNET
14. @girlie_mac Raspbian OS
15. @girlie_mac Programming Raspberry Pi プリインストールされた言語 C / C++
16. @girlie_mac LED: Hello World of Hardware
17. @girlie_mac Circuit 電気回路 3.3V (Raspberry Pi) LED
18. @girlie_mac オームの法則 R = V - V s f I 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω)
19. @girlie_mac オームの法則と抵抗 R = 3.3 - 1.9 0.02 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω) = 70Ω
20. @girlie_mac ラズベリーパイでの回路 3.3V (Pin 1) GND アノード （足の長い方） カソード
21. @girlie_mac LED をプログラムで操作 GPIO-4 (Pin 7)
22. @girlie_mac Programming MCU with Node.js
23. @girlie_mac Programming Pi with Node.js node-arm を使って Node.js をインストール $ wget http://node-arm.herokuapp.com/node_latest_armhf.deb $ sudo dpkg -i node_latest_armhf.deb もしくは特定バージョンの Node
24. @girlie_mac Johnny-Five • JS で書けるロボティクス・フレーム ワーク • Arduino 互換機で作動 • 他機種はIOプラグインで • http://johnny-five.io/ Woot!
25. @girlie_mac Johnny-Five & Raspi-io $ npm install johnny-five $ npm install raspi-io
26. @girlie_mac Blinking LED var five = require('johnny-five'); var raspi = require('raspi-io'); var board = new five.Board({io: new raspi()}); board.on('ready', function() { var led = new five.Led(7); // インスタンスの作成 led.blink(500); // 500ms 間隔の on-off フェイズで "blink" （チカチカ） させる }); Pin 7 (GPIO-4) ラズパイ用プラグイン。 Arduino を使う場合は必要 なし
27. @girlie_mac スマートなんちゃらを プロトタイプしてみよう
28. @girlie_mac デバイス間データのストリーミング PubNub を使って Publish/Subscribe
29. @girlie_mac ブラウザからデータを送信 var pubnub = PUBNUB.init({ subscribe_key: 'sub-c-...', publish_key: 'pub-c-...' }); function lightOn() { pubnub.publish({ channel: 'remote-led', message: {light: true}, callback: function(m) {console.log(m);}, error: function(err) {console.log(err);} }); } document.querySelector('button') .addEventListener('click', lightOn); クリックイベントの 発生 <script src="http://cdn.pubnub. com/pubnub-3.7.15.min.js"></script>
30. @girlie_mac MCU でデータを受信 var pubnub = require('pubnub').init({ subscribe_key: 'sub-c-...', publish_key: 'pub-c-...' }); pubnub.subscribe({ channel: 'remote-led', callback: function(m) { if(m.light) { // Johnny-Five でLチカ！ } } }); led.pulse();
31. @girlie_mac RGB LED で Hue もどきを作る カソードコモン４本足 LED R G B GND アナログ PWM pins
32. @girlie_mac
33. @girlie_mac RGB LED で Hue もどきを作る {'red':215, 'green':50, 'blue':255} publish data subscribe data Software UI Physical Output
34. @girlie_mac ブラウザからデータを送信 redInput.addEventListener('change', function(e){ publishUpdate({color: 'red', brightness: +this.value}); }, false); function publishUpdate(data) { pubnub.publish({ channel: 'hue', message: data }); } その値を PubNub に送信し て、MCU 側に伝える UI で赤色の値が変 更
35. @girlie_mac MCU でデータを受信 var led = new five.Led.RGB([7, 5, 3]); pubnub.subscribe({ channel: 'hue', callback: function(m) { if(led) { r = (m.color === 'red') ? m.brightness : r; g = (m.color === 'green') ? m.brightness : g; b = (m.color === 'blue') ? m.brightness : b; led.color({red: r, blue: b, green: g}); } } }); GPIO ピンに接続 された LED ア ノードに各色の 値を伝達 http://johnny-five.io/examples/led-rgb/ pin#s for R, G, B
36. @girlie_mac KittyCam
37. @girlie_mac
38. @girlie_mac KittyCam in Node.js 1. 動きを察知 (Johnny-Five IR.Motion obj) 2. 写真を撮影 (Raspistill, command line tool) 3. ネコ顔認識 (KittyDar) 4. クラウド (Cloudinary) に写真を保存 5. データを PubNub でパプリッシュ 6. web でストリーム (PubNub でデータをサブスク ライブ)
39. @girlie_mac PIR Sensor（焦電型赤外線センサ）
40. @girlie_mac PIR Sensor > Run Camera board.on('ready', function() { // `motion` ハードウェア・インスタンスを生成 var motion = new five.Motion(7); //pin 7 (GPIO 4) にワイヤーが接続 // セッションが始まると 'calibrated' が発火 motion.on('calibrated', function() {console.log('calibrated');}); motion.on('motionstart', function() { // 動きが感知されたぞ！ // raspistill コマンドでカメラを動かす var filename = 'photo/image_'+i+'.jpg'; var args = ['-w', '320', '-h', '240', '-o', filename, '-t', '1']; var spawn = child_process.spawn('raspistill', args); ... motion detected! Take a photo!
41. @girlie_mac Processing Photo ... spawn.on('exit', function(code) { if((/jpg$/).test(filename)) { var imgPath = __dirname + '/' + filename; // Child process: 画像ファイルを読み取り、別プロセスで KittyDar を使ってネコの顔を認識 var args = [imgPath]; var fork = child_process.fork(__dirname+'/detectCatsFromPhoto.js'); fork.send(args); // the child process is completed fork.on('message', function(base64) { if(base64) { // クラウドストレージへ送る } }); ... var kittydar = require ('kittydar'); a cat detected!
42. @girlie_mac github.com/girliemac/RPi-KittyCam
43. @girlie_mac https://twit.tv/shows/new-screen-savers/episodes/19
44. @girlie_mac I hacked hardware so you can too! International NodeBots Day!
45. @girlie_mac Thank you! @girlie_mac github.com/girliemac speakerdeck.com/girlie_mac pubnub.com github.com/pubnub