電球をスマホから作動できたり、体重や心拍数をブラウザからモニタリングできたり、いろいろなモノがモバイルやインターネット上に接続されるようになり、今やモノのインターネット (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)

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 - Vs 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