Share
Embed
Slide 1
Slide 1 text
20181217_XD プラグインもくもく会
WebSocketとIoTをつなげるやつ
ワンフットシーバス 田中正吾
Slide 2
Slide 2 text
私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です！
Slide 3
Slide 3 text
田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い現
在に至る。
最近ではWEBフロントエンドをベースにしなが
らも、情報とインターフェースが合わさるアプ
ローチという視点でIoTやMixed Realityといっ
た技術も取り入れながら活動しています。
Slide 4
Slide 4 text
Adobe XDはWebSocketが使える
WEBSOCKET
Adobe XD 外部サーバー
HTTPと同じように
データを送ることができる
一度接続されれば
サーバーからデータ受信もできる
（チャットのようなもの）
WEBSOCKET
Slide 5
Slide 5 text
WebSocketとIoT連動するやつ作りました
Node-REDが中継して伝えます
WEBSOCKET
Adobe XD
外部サーバー
NefryBT
＋
テープLED
Slide 6
Slide 6 text
選択したテキストのカラーとテキストが
IoTデバイスと連動する
Slide 7
Slide 7 text
Node-REDが受け止める情報はこんな感じ
Slide 8
Slide 8 text
デモしてみます！
Slide 9
Slide 9 text
うまく行かなかった点
WebSocketから非同期でデータを受け取ってテキスト反映するとasyncエラーでPromise使ってねってなるー！
WebSocketのイベントにasyncつけてみたけどうまくいかない！
Slide 10
Slide 10 text
なるほどと思った点
text.fillで色情報くるけどColorクラスで来るのでテープLEDと親和性高かった
Slide 11
Slide 11 text
ご清聴いただきまして
ありがとうございました！