JavaScript と Arduino でオリジナルデバイスを作ろう

http://atnd.org/events/47308

Transcript

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. (TechShare) 必要⼗十分なパーツ。安い。 Amazon で注⽂文し、2 ⽇日後に届いた。 Arduino エントリーキット オススメ
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. 概要 Firmata protocol StandardFirmata
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