2015年末JavaScript祭ゆく年くる年
さあ!JavaScriptで
デバイスとやりとりするよ!
ワンフットシーバス 田中正吾
私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です!
自己紹介
田中正吾(たなかせいご)
屋号:ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作のワークフロー改善に
関わったりしていました。
デジタルサイネージやアプリ制作もやります。
デバイスとやりとりするネタですと
最近ウォンバットとIoTの話をしました
さっそくはじめましょう
今回のタイトル
さあ!
JavaScriptと
デバイスとやりとりするよ!
ということで
まずブラウザ上で
JavaScriptボタン
まずブラウザ上で
JavaScriptボタン
$(dom).on(“click”,function(){
// なにか起きるよ!!
})
ブラウザ
(表示側)
このようにJavaScriptは
はじめはブラウザ表示上が主戦場
まずNodeJSの登場で
サーバーサイドもできるように!
ブラウザ
(表示側)
サーバー
(NodeJS)
NodeJS
なんと最近では
NodeJSからハードウェアの
デバイスもつながるようになってきた!
ブラウザ
(表示側)
サーバー
(NodeJS)
デバイス
(NodeJS)
NodeJS
デバイスとは。
引用:
デバイス=リアルの何か
引用:
つまり
リアルの
ボタン
つまり
リアルの何かと
つまり
リアルの何かとやりとりできる!
JavaScriptでのデバイス連携の
しくみをお伝えしていきます
!
デバイス連携する
JavaScriptでのしくみ
今日お伝えするJavaScriptでの
デバイス連携のしくみ
まず、デバイスがPCと会話しやすくする
Arduino(あるでぃーの)というしくみがある
♪
ArduinoだけはJavaScriptでなく
C++風の独自の言語
ArduinoはUSB(シリアルポート)経由で
NodeJSのserialportライブラリと会話ができる
PCと、こういう風に会話できる!
node-searialportのコードの雰囲気
Arduino側から特定の文字が来たら
動作するようにしています
さらに、サーバーとしてのNodeJS(express)も
加わるとWEBとの相性がとてもよくなります
NodeJS
加えて、リアルタイムに強いSocket通信が
NodeJS(socket.io)で扱いやすい
NodeJSの
司令塔サーバー
デバイスの動きをすぐに反映できる。
WEBの反応をすぐに伝えられる。
NodeJSの
司令塔サーバー
司令塔サーバー側の
NodeJSコードの雰囲気
司令塔サーバーで中継して
WEBとデバイスでいろいろやりとりできる!
NodeJSの
司令塔サーバー
たくさんつくれば、
いろいろ測れる、うごかせる!
余談:おのおのの接続ポイントでの実装は
見通しやすくするためメリハリをつけてます
(ローカルサーバー→司令塔に実装多めにしてる)
local
実装小
実装小 実装中
実装大
私のブログに今回の話に関連しそうな記事を
ピックアップしました。よろしければ。
URL : http://www.1ft-seabass.jp/memo/
デバイスの動き
さて今回のデバイス①
デバイス1号(でばいすいちごう)
デバイス1号(でばいすいちごう)
光ったりする!
ボタン押せたりする!
中身はこんな感じ
littleBitsという磁石でつないで
電子工作できるデバイスで構成
カラーごとの役割を意識して
つなげて磁石でパチパチつなげて設計できる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT
そんなlittleBitsには
ArduinoもあるのでPCと連携しやすい
さきほどの連携図と照らし合わせると
デバイス+Arduino部分は以下になります
PCの役割のところは、今回は
Raspberry PiというミニPCにやってもらう
さきほどの連携図と照らし合わせると
PC部分がRaspberry Piになります
そして、SORACOMがLTE/3G接続を担当
Raspberry Pi
FS01BU +
SORACOM Air
(通信をする)
Raspberry Pi
(サーバー)
SORACOMで少ない初期コストで
デバイスの「つながる」を実現
これを箱を組み立てて
これを箱を組み立てて
実装してGO!!!
いよいよデモ
デバイス1号
ボタンでWEBと連携して
画面がしゃべります
(CreateJS+Web Speech API)
画面がしゃべります
(CreateJS+Web Speech API)
デモ
littleBitsはこんなやりとり
IFTTT(Maker Channel)を利用し
スマホ連携で光ります
デモ
littleBitsはこんなやりとり
うまくいってほしい
ちょっと準備しまーす
ON
デバイス②
デバイス2号(でばいすにごう)
組み立てる
サーボ矢印と赤外線センサの構成
サーボ矢印が私のTwitter投稿と反応
今からのみんなの#jsfes投稿にも
反応するかどうか!?
デモ
赤外線リモコンともやりとり
画面がしゃべります
(CreateJS+Web Speech API)
画面がしゃべります
(CreateJS+Web Speech API)
デモ
実は操作したものはSlackにもログ連携
うまくいってほしい
まとめ
このようにやりとりできると
いろいろおもしろい!
今まで見たデモから
発展させてみる
デバイス→JavaScript→WEBの例
自分の知りたい現実のデータ貯めて
遠くでいつでも見ることができる!
家の温度
自分の知りたい現実のデータ貯めて
遠くでいつでも見ることができる!
家の温度
WEBのよいところ
自動・蓄積・遠隔
WEB→JavaScript→デバイスの例
WEBの情報をデバイスに
反応させることもできる!
デバイス
盛り上がってるよ
SNSなど
WEBの情報をデバイスに
反応させることもできる!
デバイス
盛り上がってるよ
SNSなど
WEBのよいところ
収集・通知・見える化
➔JavaScriptでデバイスとWEBが連携しやすく
なってきた。サーバーや表示も絡めて、いろ
いろ楽しい!
➔JavaScriptでWEBのよいところ(自動・蓄
積・遠隔・収集・見える化など)をデバイス
やセンサーと絡めると新しい可能性が!
まとめ
2016年ぜひJavaScriptで
デバイスとやりとりしてみてください!
ご清聴いただきまして
ありがとうございました!

さあ!Javascriptでデバイスとやりとりするよ!