JS Board Shibuya #2 もくもく会の登壇資料です。 http://jsbshibuya.connpass.com/event/18845/ ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・商用フリーで使える影絵素材サイト シルエットデザイン →　http://kage-design.com/ ・human pictogram 2.0 →　http://pictogram2.com/

1. JS Board Shibuya #2 もくもく会
littleBitsとMilkcocoa
ワンフットシーバス 田中正吾

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

3. 自己紹介

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

5. littleBits

6. こんなかんじ。

7. 磁石でくっつく小型モジュール
色で役割を意識しながら電子工作できる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT

8. 今回作ったもの

9. 実は

10. ただいまlittleBitsでプレゼン中

11. こんな構成
POWER
BUTTON
ArduinoFORK
BUTTON
PC

12. littleBits Arduinoモジュールで
PCと連携できる

13. littleBits Arduinoモジュールで
PCと連携できる

14. 今回は左右キーとして連携
POWER
左
ArduinoFORK
右
PC

15. プレゼンと同期（プレゼンポインター）
POWER
左
ArduinoFORK
右
PC

16. PC
NodeJSArduino
左右キー情報をstepにし
て
データストアに記録する
node-serialportで
シリアルポート監視。
左右キーを送信。
こんな連携

17. シリアルポート監視コード

18. NodeJS
/push
.on(“push”)で
データストアの
pushイベントを監視
/pushを叩くとデータ記録
.push({ step: 1 or -1 });
Milkcocoa側で
データストアに記録する
NodeJS/Milkcocoaのやりとり

19. Milkcocoaでプレゼン進捗を記録

20. ふりかえり

21. ➔ littleBitsでArduinoと連携すればPCやネットワーク機能を
持つデバイスとも接続可能。つまりネットワークと連携で
きる。
➔ 連携するデバイス側でNodeJSはArduinoとシリアルポー
ト経由で連携可能。そして、NodeJS経由でArduinoデー
タを送ればMilkcocoaと連携できる。
➔ Milkcocoaがデータ記録を担ってくれたので自前でデータ
記録機構うを作るよりも、実装が素早く出来た。ありがた
や。
ふりかえり

22. 貯めてみたかったので
貯めてみたのだが
何に使えるかの話

23. ➔事前練習するときに使って話す速度の分析や
精度向上をできそう。
➔本番後に練習時と比較してみて、緊張などに
よる現場要素でのスピード感の変化が見れて
面白そう。
➔などなどプレゼンのトレーニングに使えるん
じゃないか？
こんなふうに使えるんじゃないか？

24. 余談

25. ➔時間があればやる
◆littleBitsネタに色々付け替えてみる
◆HerokuでMilkcocoaする記事最近アップし
ました。
◆littleBits Arduinoモジュールでハマった話
（ポート名を読み替える）
◆など

26. ということで

27. ご清聴いただきまして
ありがとうございました！