http://atnd.org/events/47308

1. JavaScript と Arduino で
オリジナルデバイスを作ろう
html5j エンタメ技術部
第１回勉強会

2. 話者
@y_iwanaga_
@quake_alert
テレビより早い
地震速報

3. 30分後：
オリジナルデバイスを作れる状態
• 自分で回路を組み、
• 自分のコードで操る

4. Arduino の役割：1. 出力
電流を供給されて光る
電圧を発生させる

5. Arduino の役割：2. 入力
電圧を読み取る
0 V 〜 5V → 0 〜 1023 or 0, 1 に変換
センサーの
抵抗変化・電流発生

6. 必要な材料
個別に買うのは面倒くさい。キットを買えばいい。

7. オススメ
Arduino エントリーキット
必要十分なパーツ。安い。
Amazon で注文し、2 日後に届いた。
(TechShare)

8. この後の流れ
•
•
•
•
Arduino 基礎知識
電子回路の組み方
自分のプログラムと連携させる手順
応用例

9. この後の流れ
•
•
•
•
Arduino 基礎知識
電子回路の組み方
自分のプログラムと連携させる手順
応用例

11. ここに USB ケーブルを挿して、PC とつなぐ

12. DIGITAL I/O
電圧をかける or 読み取る。

13. L, TX, RX インジケータ

14. GND
出力の終端をここにつなぐ。

15. Analog In
電圧値を細かく読み取りたいときはココに。

16. Power
シールドに電源を供給するときはココから。

17. Reset ボタン
初期状態に戻したいときにプッシュ！

18. この後の流れ
•
•
•
•
Arduino 基礎知識
電子回路の組み方
自分のプログラムと連携させる手順
応用例

19. Breadboard

20. Breadboard

21. 例

22. 鉄の掟
パーツの
許容電流 を守る。

23. 過電流が流れて

24. こうなります。

25. 電流は抵抗で調節すればいい。
使うべき抵抗値 ＝
[電源の電圧] − [パーツに加える電圧]
[流す電流]
5 V 固定
パーツの仕様書で調べる
⇒ パーツが決まれば、自動的に決まる。

26. この後の流れ
•
•
•
•
Arduino 基礎知識
電子回路の組み方
自分のプログラムと連携させる手順
応用例

27. 概要
StandardFirmata
Firmata protocol

28. JavaScript ライブラリ
johnny-five
CylonJS

29. この後の流れ
•
•
•
•
Arduino 基礎知識
電子回路の組み方
自分のプログラムと連携させる手順
応用例

30. 回路

31. コード
var j5
= require('johnny-five'),
arduino = new j5.Board();
arduino.on('ready', function(){
var led = new j5.Led({
pin: 13
});
led.strobe(200);
});

32. デモ

33. スイッチの ON/OFF を拾う

34. var j5 = require('johnny-five'),
arduino = new j5.Board();
arduino.on('ready', function(){
var button = new j5.Button({
pin: 2,
holdtime: 2000
});
button.on('down', function(){
console.log('button - on');
});
button.on('up', function(){
console.log('button - released');
});
button.on('hold', function(){
console.log('button - hold');
});
});

35. デモ

36. LEDとスイッチの組み合わせ

37. デモ

38. 面白そうなネタ
• IR レシーバ
– リモコン操作
• ガスセンサー
– おなら検知 ⇒ LED や Twitter で盛大に通知
• 土壌湿度センサー
– 水やり時期を教えてもらう

39. 良い情報源
抵抗の見分け方
http://part.freelab.jp/s_regi_list.html
回路の作り方
http://arduino.cc/en/Tutorial

40. 今回の詳細
コード・回路図はココからどうぞ。
github.com/
iwanaga/arduino-test