3/30・3/31に福岡で行われた明星和楽2018にて、Fukuoka Growth Next でテクノロジーチームで展示を行い、その中で Data Vision Layer というテーマでIoT＆MixedReality展示してきました。
展示の内容
展示の内容は Data Vision Layer という名のとおり、あるデータをIoT/WEB/MRといったいろいろな形で伝達して、情報の見え方について色々な階層があるね。というのを楽しんでいただくものでした。
実際の展示で使った図です。実はもうちょっとしっかりとした図に一度したものの、親しみやすさと見やすさの観点で、元絵のこっちを採用にしました。
いろいろな色の各ローソクをデータのキーにして、そのカラーデータをIoTデバイスに伝達します。たとえば照明に見たてたテープLEDやアニメーションとしてのM5Stackが一気に同期します。そして、さらにMixed Realityで認識した現実空間の壁に対してもカラーが連動します。
カラー判定およびIoTデータ化からIoTデバイス同期まで
まず、カラー判定およびIoTデータ化は、Nefry BTとI2Cカラーセンサーを使って作りました。
このように囲っていって。
うまくNefryBTを溶け込む形に。
例えば、白いロウソクだとこのように光ります。レゴの台形のものを入り口に置くようにして地味に入れやすくしていたり試行錯誤をしてみたり。
今回のキーとなるロウソクはフライングタイガーコペンハーゲンで買ったカラーロウソクを7種類使っています。ロウソクを選んだ理由としては「だれでも分かりやすく親しみやすい形」という意図です。
ここからクラウドに送り展開しやすいように整える
さて、カラーセンサーで取得したのちクラウドに送り展開しやすいようにします。
こちらをまずさくらのクラウドにあるNode-REDに伝えたのちに、さらに2つのNode-REDに可視化やデータ蓄積を展開しています。
Data Vision Layer 展示で、貯めているカラーデータの可視化をゲージでリアルタイムに表示させて、デモ時のわかりやすさをプラスしています～ #ibmcloud #nodered #noderedjp #明星和楽 #明星和楽2018 pic.twitter.com/AwI4OWklYy
— Tanaka Seigo (@1ft_seabass) March 31, 2018
IBM CloudのほうにはMQTTで伝達しダッシュボードの可視化を行いました。その他に、色の言葉を喋ったり、DBへの記録も仕込みましたが、プレゼンしにくかったので、今回は休眠させました。
実はMilkcocoaでデータを貯めてenebular InfoMotion で色の値を可視化もしてます。 #明星和楽 #明星和楽2018 #enebular #mlkcca pic.twitter.com/zZNCDG5coB
— Tanaka Seigo (@1ft_seabass) March 30, 2018
enebularのほうで色の変化を可視化しています。ですが「こんなにたくさん可視化できるんですよ！」というとだいぶコッテリする気配があったので、どちらかというと、Milkcocoa経由で伝えることに注力しました。
Milkcocoaで記録することによりロウソク使用ログを取ることであとで分析しやすいようにしています。いまちょうど、吸い出していたんですが、結構面白いデータが吸い出せたので、分析楽しみです。
デバイスへ展開する
データの流れを知らせる各デバイスの動きです。カラーデータをRGB値で伝えています。
Nefry BT＋テープLEDについては、先ほどのとおり、ロウソクを差し込むとこのように同期します。展示机の中では、起点となるカラーセンサーと各機器が近くなってしまい、IoT感が薄くなったので、途中から、廊下の少し遠くのところに、テープLEDを配置して遠隔感を強めました。
M5Stackの動きです。こちらは2Dアニメーションと文字表示というところを任せています。ちょっと失敗だったのが、ディスプレイ部分が、思いのほか昼間の光に負けてしまうので、3台同時でも結構分かりにくくなってしまったところです。
ですが、テープLEDからいきなり可視化やHoloLensへいくと話題のジャンプ感が強くなるので、プレゼン上でちょうどよいデバイスにはなりました。
そして、オチとしてのHoloLensです。仮想空間と現実空間にカラーデータが一気に反映されるというところを示しています。
ちょうど、HoloLensの視界が左のディスプレイで見えていて、いまは差し込まれた赤いロウソクが反応しています。
白を差し込むとこのように連動します。テープLEDもM5Stackもダッシュボードも一気に動いてます！
このように、実際にロウソクを差し込んで動作していました。
どのように伝えたか
ということで、この仕組みによってどのように伝えたかというところを。
ある意味役者はこのようにそろったというところで、あとは以下のように。
現場プレゼンテーションで、うまく包む！
ざっくりいうと、シナリオはこんなかんじ。だいたい廊下でグイグイ行くのが私だったので。
- tsumugさん含めてのテクノロジー展示全体の説明をざっくりと
- そして自分パネルを見せる形で話していく形で引き込む
- 30秒
- 今回はデータは色ということを意識してもらう
- 私がロウソクで色の変化が起こることをテープLEDを見てもらいつつ説明
- 30秒
- データがインターネットによって遠隔で動いていることを遠くのテープLEDも見せて説明
- 1分
- M5Stackの変化も見せながら、参加者にもロウソクで変化を楽しんでもらう
- 30秒
- ここまでで仕組みが見えるので、ダッシュボードの連動を見せて、クラウドによる可視化・蓄積を伝達
- 1分
- 仕組みも見え落ち着いてくるので、ここでHoloLensのビューをDevice Portalで私が見せながら、壁の色変化を伝える
- 1分
- 参加者もHoloLensを体験したくなるのでかぶせる。
- シースルーで現実が見えながらロウソクを差し込める作業ができるメリットを伝える
- 30秒
- 壁の色変更を見せつつ、最後にピンクでの桜吹雪の仕掛けをお見せする
- 30秒
- 場を締めて、他の展示へ案内する
- END
という、だいたいの流れで、おおよそ5～6分で説明しました。
みなさんの反応
さて、こんなシナリオですが、常に臨機応変でした。
というのも、明星和楽の来場者は幅が広く、お年寄りからお子様連れや、おなじ技術者の人もいれば、もっとプロデュースよりの人がいたり、メディア方面の方がいたりと、説明冥利に尽きる。
技術者ぽい方に蛇足ながらIoTの仕組みも話してしまうこともありましたし、IoTがわからない方に半歩先の面白いテクノロジーを分かってもらえたり。
気持ちで伝える英語だったけど、英語な方に、ちゃんと展示内容を伝えられたと思う。パネルに作っといてよかった！ #明星和楽 #明星和楽2018 #HoloLens #NefryBT #M5Stack pic.twitter.com/9xMELtJfCg
— Tanaka Seigo (@1ft_seabass) March 30, 2018
はたまた、英語な方に、なんとか展示の面白さを伝えられたり、良い経験になりました。
しかし、今回はオチをしっかり意識し、今回のテクノロジー要素が最終的にHoloLensでの桜吹雪に着地して、わりとオールマイティに色々な方に響いたのがうれしかったです。
このような視界で、実際には、みなさんがちょうど桜シーズンというのもあり、頭に記憶が残っているので、そのイメージを拝借できたのも大きいです。ややバクチでハラハラしましたが、桜前線が絶妙に合わさってよかった。
30日も31日も、ほぼほぼ休むことなく説明のし通しでしたが、盛況だったと思います。
隣の教室のGooDay Fab 渡部あゆみさんの楽しそうに体験していただいた様子です。このように皆さんに情報の階層というのを見せつつも、そのデータをうまく活用して、笑顔にできたことが多く、充実感がありました。
この展示で得たものを、また磨いていこうと思います！
それでは。