7/22に行ったウフル様 littleBits x Node-RED レクチャー資料です。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・シルエットデザインhttp://kage-design.com/ ・human pictogram 2.0http://pictogram2.com

1. ウフル様 7/22
Node-RED(enebular) x littleBits
ワンフットシーバス 田中正吾

2. 私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です！

3. 自己紹介

4. 田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作にも関わります。デジ
タルサイネージやアプリ制作もやります。
ツール導入やワークフロー改善に関わったりし
ています。

5. littleBits

6. デジタルサイネージ

7. デバイス
デバイス
デジタルサイネージにも人感センサーやWEBカ
メラなどプラスアルファな機材が出てきた。
デバイス

8. littleBits

9. こんなかんじのブロック

10. パーツを磁石でつなげる

11. 間違ってると磁石なので反発する
（接続ミス防止）

12. 4つの機能を色で分かりやすくデザイン
Bits 製品情報 - littleBits より
http://jp.littlebits.com/bits/

13. たとえば

14. お家の明かりスイッチ

15. お家の明かりスイッチ

16. 電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT
こんな仕組みを思いついたとする

17. 色で役割を意識しながら設計できる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT

18. スイッチを押すとライトが付くよ！
できた！

19. プログラムを書くのにも似てる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT
// INPUT
LittleBitsPushSwitchModule.addEventListener( "push" , handlerMySwitchPush );
function handlerMySwitchPush(){
// OUTPUT
LittleBitsLEDModule.output(100);
}

20. そもそもデザインステキ

21. littleBits

22. littleBitsパーツのご紹介
Bits 製品情報 - littleBits より
http://jp.littlebits.com/bits/

23. ピンクは、いろんなキッカケ
（ON・OFFLINE）

24. ピンクは、いろんなキッカケ
（度合いを伝える）

25. 特に面白いのが赤外線センサー
（リモコンと連動）

26. みどり色はいろいろな動力や光などの反応

27. バーLED

28. RGBLED

29. サーボは角度で伝える

30. 数字で状況を示したり

31. 音で知らせたり

32. モーター。

33. バイブレーションで
振動で伝えたり

34. Visualization
(enebular)

35. まず、デバイスがPCと会話しやすくする
Arduino（あるでぃーの）というしくみがある
♪

36. ArduinoはUSB（シリアルポート）経由で
NodeJSのserialportライブラリと会話ができる

37. littleBitsにもArduinoモジュールがあるので
PC経由でネットワークとやりとりが出来ます

38. Firmata（汎用Arduinoライブラリ）を
インストールすることでNode-REDと連動

39. 今回はenebularの入ったRaspberryPiと
littleBitsが連携します

40. このようにArduinoには
いろいろなパーツがついています。

41. 入力のパーツを入れ替えて
いろいろな可視化が出来ます

42. 出力もいろいろな反応を伝えられます

43. enebularで作ったフローで
littleBitsのセンサーを取得したり動かしたり

44. デモ
littleBits Digital I/O Simple

45. デモ
littleBits Arduino x Milkcocoa Flow

46. 実際に触ってみましょう！