IoT & xR & Display Node-RED Technology Performance

by 1ft-seabass

Slide 1

Slide 1 text

IBM Cloud Community Summit 2018 IoT＋XR＋Display いろいろなインターフェースのかけ橋！Node-RED演舞！ワンフットシーバス田中正吾

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 5

Slide 5 text

今日の流れ

Slide 6

Slide 6 text

IoT pressed A

Slide 7

Slide 7 text

XR = VR/MR/AR Oculus Go HoloLens

Slide 8

Slide 8 text

Display

Slide 9

Slide 9 text

これらをNode-REDと組み合わせていろいろなデモをお見せしていきます！

Slide 10

Slide 10 text

Node-RED

Slide 11

Slide 11 text

Node-RED https://nodered.jp/

Slide 12

Slide 12 text

Node-RED IoTをはじめとする様々なAPI/Data連携を GUIで直感的に構築できるオープンソースソフトウェア

Slide 13

Slide 13 text

今日はIBM CloudでNode-REDを作り IoT Platformを構築します IBM Watson IoT Platform Node-RED

Slide 14

Slide 14 text

今日はIBM CloudでNode-REDを作り IoT Platformでデバイスと連携します pressed A

Slide 15

Slide 15 text

IoT Platformの連携具合

Slide 16

Slide 16 text

そのほかに外部にワンクッション MQTTを担当するNode-REDも配備さくらのクラウド MQTT Broker

Slide 17

Slide 17 text

2つのNode-REDでいろいろとつなぎます！さくらのクラウド MQTT Broker IBM Watson IoT Platform Node-RED IBM Cloud

Slide 18

Slide 18 text

まず軽いデモから

Slide 19

Slide 19 text

M5Stackというデバイス pressed A

Slide 20

Slide 20 text

ディスプレイもボタンもあってパッケージしっかりなM5Stack ESP32というWi-Fiボードベースで扱いやすい pressed A

Slide 21

Slide 21 text

ディスプレイを変化させてみます！ pressed A IBM Watson IoT Platform Node-RED IBM Cloud

Slide 22

Slide 22 text

Node-REDではこんな仕組み M5StackはJSON命令で変化するようにしてあるNode-REDからはIoT Platformからデータを送る

Slide 23

Slide 23 text

試行錯誤しやすい

Slide 24

Slide 24 text

できる人が増える

Slide 25

Slide 25 text

あとで見ても分かりやすい（はず）

Slide 26

Slide 26 text

公開されているカスタムノードを取り込んでより良くできる

Slide 27

Slide 27 text

すばやく作りたいものができる

Slide 28

Slide 28 text

こんな感じでデモをしながらお伝えしていきます

Slide 29

Slide 29 text

いざ演舞！

Slide 30

Slide 30 text

つぎはLEDを光らせてみよう

Slide 31

Slide 31 text

ただしテープLEDでピカピカ

Slide 32

Slide 32 text

1つめで使うのはNefryBT

Slide 33

Slide 33 text

NefryBTは簡単にインターネットにつながる

Slide 34

Slide 34 text

Groveシステムによってハードウェアも試行錯誤しやすい

Slide 35

Slide 35 text

スイッチサイエンス社の例 https://www.switch-science.com/catalog/list/379/

Slide 36

Slide 36 text

IBM Cloud IoT Platformと連携できる

Slide 37

Slide 37 text

obnizはIoT Platform直は難しかったので WebSocket経由で動かす IBM Watson IoT Platform Node-RED IBM Cloud

Slide 38

Slide 38 text

こんなフローで指示を出している NefryBT内で受け取りルールを作って動作

Slide 39

Slide 39 text

いざデモしてみる

Slide 40

Slide 40 text

obnizというデバイスも動かしてみる

Slide 41

Slide 41 text

obnizはモーターやセンサーをつなぐだけですぐにクラウド経由で操作できるようになります

Slide 42

Slide 42 text

しかもJavaScriptでコードがかけていろいろな試行錯誤か可能

Slide 43

Slide 43 text

obnizはIoT Platform直は難しかったので WebSocket経由で連携さくらのクラウド MQTT Broker IBM Watson IoT Platform Node-RED IBM Cloud WebSocket MQTT

Slide 44

Slide 44 text

こんなフローで指示を出している obnizではobnizクラウドでJavaScriptでルールを作って動作させる

Slide 45

Slide 45 text

いざデモしてみる

Slide 46

Slide 46 text

つづいてobnizからM5StackとNefryBTに指示 Party Time pressed A

Slide 47

Slide 47 text

obnizから受けると色替えするフロー

Slide 48

Slide 48 text

つづいてobnizからM5StackとNefryBTに指示 Party Time

Slide 49

Slide 49 text

いざデモしてみる

Slide 50

Slide 50 text

つづいてobnizから鍵スイッチ経由で指示 EAOという鍵で回すスイッチを使います

Slide 51

Slide 51 text

鍵を持つ人だけスイッチが入れれる

Slide 52

Slide 52 text

実は先ほどとほぼ同じ仕組み

Slide 53

Slide 53 text

いざデモしてみる

Slide 54

Slide 54 text

Node-REDはWebSocketやMQTTでプロトコルが変わっても柔軟に対応できるさくらのクラウド MQTT Broker IBM Watson IoT Platform Node-RED IBM Cloud WebSocket MQTT

Slide 55

Slide 55 text

機械学習とIoTをつないでみる

Slide 56

Slide 56 text

IBM CloudのWatson Visual Recognitionも画像認識を独自に作ることができる

Slide 57

Slide 57 text

Watson Visual Recognition Default Custom Model https://console.bluemix.net/catalog/services/visual-recognition

Slide 58

Slide 58 text

ツールの起動ですぐにはじめられる

Slide 59

Slide 59 text

いろいろあるが今回はCustomに

Slide 60

Slide 60 text

プロジェクト作成

Slide 61

Slide 61 text

こんな画面で作成していく

Slide 62

Slide 62 text

ZIPで固めた画像一式を一気に登録できる！

Slide 63

Slide 63 text

一気にウォンバット登録

Slide 64

Slide 64 text

最低2つの認識クラスが必要なのでウォンバット以外の動物を登録

Slide 65

Slide 65 text

タスマニアデビル・ヤブイヌ・カピバラ・小熊

Slide 66

Slide 66 text

登録完了！

Slide 67

Slide 67 text

いよいよトレーニング開始→10分程度完了

Slide 68

Slide 68 text

できたのでテストしてみる

Slide 69

Slide 69 text

かなりうまく認識できている

Slide 70

Slide 70 text

他の例

Slide 71

Slide 71 text

ちょっと怪しいのもある

Slide 72

Slide 72 text

ビーバーは迷っている（登録なしなので）

Slide 73

Slide 73 text

判定結果をデバイスに連携！ M5Stackで判定させる！

Slide 74

Slide 74 text

判定結果をデバイスに連携！ M5Stackで判定させる！ WLv:0.907 NG:ChildBear

Slide 75

Slide 75 text

フローはちょっと大きいのでデモしながら説明します！

Slide 76

Slide 76 text

いざデモしてみる

Slide 77

Slide 77 text

AmazonなSORASOM LTE-M Button LTEあればどこでもワンクリックで指示が出せる

Slide 78

Slide 78 text

Lambda経由でNode-REDに投げる

Slide 79

Slide 79 text

NefryBTにボタンの押し方によって光り方を変えます！クリック・ダブルクリック・長押し IBM Watson IoT Platform Node-RED IBM Cloud

Slide 80

Slide 80 text

いざデモしてみる

Slide 81

Slide 81 text

つづいてxRともつなげる Oculus Go HoloLens

Slide 82

Slide 82 text

Oculus Goからやってみましょう

Slide 83

Slide 83 text

Oculus Goはスタンドアロンで動く VRを手軽に体験できるのがよいところ

Slide 84

Slide 84 text

Oculus GoはUnityで作りますが MQTTで連携することができます IoT Platform直でも行けそうだが今度頑張ってみます！今回はMQTTでIoT Platform中継。

Slide 85

Slide 85 text

さきほどのデバイスから文字を送ります

Slide 86

Slide 86 text

いざデモしてみる

Slide 87

Slide 87 text

そしてHoloLens

Slide 88

Slide 88 text

Unity C#でいろいろ書ける Watson Unity SDKも動いて連携できる

Slide 89

Slide 89 text

ここにおけるNode-REDの良さ

Slide 90

Slide 90 text

Unityでソースコード変えるの結構大変

Slide 91

Slide 91 text

でも試行錯誤はしたい

Slide 92

Slide 92 text

Unityからのやり取りはシンプルにしてデータの流れはNode-REDで変えるとやりやすい

Slide 93

Slide 93 text

いろいろと連携させます

Slide 94

Slide 94 text

いざデモしてみる

Slide 95

Slide 95 text

Node-REDが橋渡しをしてくれることでセンサー・データ・空間が自在に連携できる

Slide 96

Slide 96 text

連携したその先にさらなる発想が見えてくる！

Slide 97

Slide 97 text

これからもいろいろな連携をして可能性を接続していきたい！

Slide 98

Slide 98 text

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