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でデバイスとやりとりしてみてください！

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