2016初夏のJavaScript祭り 「JavaScriptでデバイス連携してみて出会える技術！広がる知識！」の登壇資料です。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・シルエットデザインhttp://kage-design.com/ ・human pictogram 2.0http://pictogram2.com

1. 初夏のJavaScript祭
JavaScriptでデバイス連携してみて
出会える技術！広がる知識！
ワンフットシーバス 田中正吾

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

3. 自己紹介

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

5. LIGブログのDevRelコーナーに寄稿してます。
（最近、3記事以上書いたのでライターページできた。）

6. ウォンバットが好きで、その情報収集に
WEBの知見や技術を全力で注いでいます。

7. （豆知識）ウォンバットは、おしりが硬くて、
巣穴をおしりで塞いで外敵から防御します。

8. 背景

9. 普段のWEB制作のかたわら
デバイス連携する制作もしてる

10. なぜやるのか？
デバイス

11. 最近言われはじめてるデバイスをつかった
計測→収集→分析はスマートフォンと似ている
計測 収集 分析
デバイス

12. スマートフォンが多機能・高機能とするなら
デバイス連携は、特化した計測
デバイス

13. つまり、自分が使っているJavaScriptは
デバイス連携も可能。
JavaScriptでいろいろ知見広がる。

14. そんな話をします！

15. デモ

16. 早速デモします

17. リモートサイコロ 1号

18. サイコロの目がいろいろ連動
（まずモニターでWEB連動）

19. 磁石でくっつくlittleBitsというデバイスが
リモートサイコロ1号が反応。

20. 1のときは1つLEDが点灯！

21. 2のときは2つLEDが点灯！！

22. 3のときは3つLEDが点灯！！！

23. 4のときは、さらにBluetooth無線化された
別のlittleBitsがうごきます！！！！

24. リモートサイコロ 1号のしかけ

25. 中にMESHというデバイス

26. MESHというデバイスの傾きセンサを
アプリで上のにある面を検知

27. その情報をアプリ経由でWEBに通知

28. MESHの情報はIFTTTという
TwitterといったWEBサービスや
いろいろなデバイスをつなぐ
サービスで伝えます。

29. 磁石でくっつくlittleBitsのしかけ

30. littleBitsはRaspberryPiという小さなPCで
サイコロ反応と連動します。

31. データ蓄積・連絡は
MilkcocoaというWEBサービス利用

32. こんな流れ
中継

33. いざデモ！

34. うまくいきますように

35. 出会える技術！広がる知識！

36. こんな流れ
中継

37. JavaScriptで連携しているところ
中継
MESHアプリ
WEBサービス
一部Arduino

38. 一部をのぞいて、かなりJavaScript連携
中継
MESHアプリ
WEBサービス
一部Arduino

39. どんな風にJavaScriptが絡んでいるか

40. まずはここ
中継
MESHアプリ
WEBサービス
一部Arduino

41. クラウドで気軽にサーバ解説できるHeroku。
NodeJS(express)サーバーを立ててる。
中継
WEBサービス

42. MESHからの値を使いやすく
Milkcocoaに連絡したいので中継させた。
中継
WEBサービス

43. 「用途に合わせてデータを合わせる」
という知見を持てる
中継
var express = require('express');

44. 次はこのあたり
中継
MESHアプリ
WEBサービス
一部Arduino

45. デバイス連携はできるだけすぐに
反応を伝えたくなるので
リアルタイム通信したくなってくる！

46. そこでリアルタイム通信を追っていくと
WebSocket/SocketIO/MQTTと出会える
WebSocket
SocketIO
MQTT

47. WebSocket/SocketIO/MQTTは
JavaScriptで動かせる！
WebSocket
SocketIO
MQTT
var WebSocket = require('ws');
var io = require('socket.io');
var mqtt = require('mqtt');

48. HTTP通信だと自宅内デバイスを
やり取りするときにIP特定しにくく
手間がかかるケースもある（NAT越え）

49. WebSocket/SocketIO/MQTTは
そのあたりも解決しやすい
WebSocket
SocketIO
MQTT

50. 今回のMilkcocoaはMQTT/WebSocketに対応。
JavaScriptだけでリアルタイム通信が
高速開発できるサービス！
中継
var milkcocoa = new MilkCocoa(" .mlkcca.com");

51. 今回のMilkcocoaはMQTT/WebSocketに対応。
JavaScriptだけでデータの保存・更新・取得も
高速開発できるサービス！

52. 「よりリアルタイムに反応させる通信技術」
という知見を持てる

53. 最後はここ
中継
MESHアプリ
WEBサービス
一部Arduino

54. 一部Arduinoのプログラムを書くが
おおむねJavaScriptで制御できる。
（Arduino部分は文字列1でLED1が光る程度のシンプルなもの）
一部Arduino
プログラム

55. 気軽に買えて小さいPC Raspberry Pi は
NodeJSが動くのでWEB連携しやすい

56. ArduinoとNodeJSで
PCとハードが会話しやすくなる！

57. WEBともリアルタイム連携しつつ
ハード制御（LED点灯とか）も
JavaScriptで一貫してできる
一部Arduino
プログラム
var serialport = require('serialport'); // ハード制御（シリアル）
var express = require('express');
var milkcocoa = new MilkCocoa(" .mlkcca.com");

58. さらにBluetoothの制御もできるので
今回のBluetoothなlittleBitsも操作可能！
var noble = require('noble'); // Bluetooth制御

59. 「ハードとWEBの橋渡しするライブラリ群」
という知見を持てる

60. デバイス連携の楽しさ ふりかえり

61. デバイス連携をしてみると
普段のWEB制作と別のアプローチで
技術を知ることができる

62. 普段のWEB制作でも触れるかもしれないが
技術の見え方・使い方がちがう
（目下の案件重視になりがち）

63. トイレや適温管理など身近な問題解決や
おもしろ反応ネタなど取り組みやすい
（やれそうな事例がいろいろ出てきた）
通信機器
RaspberryPiなど
家庭内や会社内ネットワーク

64. わりと工作がらみをするので
普段とちがうアタマを使っている

65. 手元でモノが動き、やりとりできるので
ディスプレイのなかでの出来事とはちがう体験

66. さらにいえば、モノのデータを
今回のように手持ちのWEB技術で
可視化するのは楽しい
（今回はMilkcocoa＋CreateJSで制作しました）

67. なによりデバイス連携はWEBの技術を
普段とちがう活かし方を知れる。
新しい興味が生まれる可能性を感じる。
家庭内や会社内ネットワーク

68. 新しい興味はスキルアップの原動力。
そこにJavaScriptでかなり踏み込んでいけます！
家庭内や会社内ネットワーク

69. デバイス連携楽しいよ！
JavaScript楽しいよ！

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