360度画像×スマスピ×webで誰でもIoTホームを体験できる

はじめに

先日googleさんにて行われたVUILTにて、(@TakeruY1206 )さんが「VUI時代のホームページを作ってみた」で登壇してました。

Alexaに「電気消して」っていうと、webサイト上の部屋の画像の電気が消えるやつ。
その時は、デモ動画で本当は連携してなく、画像の電気が消えるタイミングで話しかけてたみたい笑
いやそれでも、個人的にこのアイデアがすごく面白くて、未来を感じたので実際に作ることにしました。
でも、同じの作ってちゃあ面白くないから３６０度画像を取り入れることに。

ちょっと紹介させて。

実際のwebサイト
https://s3-ap-northeast-1.amazonaws.com/demo-home/index.html

そんで、実際に動画をみてもらったほうがイメージつきやすいので、みてみてください。

仕組み

簡単な仕組み図。
言葉の表現が微妙だが、だいたいこんな感じ。

firebase realtime databaseの、値が変更されたらwebサイト側でイベントを取得できる機能を利用。
参考　https://qiita.com/seiya1121/items/4cbc32678558315c2159

つまり、Alexaのスキルで「電気消して」とかっていうとfirebaseのデータの値を変更する。
そのとき、web側で「値がかわったよーー」ってのがわかる。（一応値もわかる）。
「値が変わったよーー」ってなった瞬間web側は電気を消す画像にしている。
(本当は電気が消えてる画像ではなくて、cssで画像を暗くしている)

下の画像はfirebaseの画像。
isOnがtrueの時は電気はオン。falseだったら電気オフにする。

コードとかを少し

Alexa側

firebase realtime databaseはPUTなどでも値を操作できる。
以下のcurlコマンドと同じ操作をAlexa(nodeのrequest-rpomiseモジュールなど)で行う。

curl -X PUT -d '{
  "light": {"isOn": "true"}
}' 'https://docs-examples.firebaseio.com/rest/saving-data/fireblog/users.json'

参考
https://firebase.google.com/docs/database/rest/save-data?hl=ja

web側

本当は、firebaseの設定とかを書かないと行けないんだけど端折ります。
詳しくは　https://qiita.com/hiroyuki7/items/2f74105d9d0298ac317a とかを見て。

// databaseの値をリッスン
firebase.database().ref('light').on("value", snapshot => {
  if(snapshot.val().isOn === true){
    // cssで画像を明るくする処理
  }else{
    // cssで画像を暗くする処理
  }
})

databaseの値がAlexaなどで変更された時、firebase.database().ref('light').on("value", snapshot => {})が呼ばれる。
値はsnapshotに張っているから、trueかfalseかを判断して画像を明るくするか暗くしている。

360度カメラ

このままでは、人のアイデアをもらっただけなのでもう少し工夫をしたい。
ってことで、360度カメラを使ってガチで部屋っぽさを出そうかなと。
360度画像を簡単に表示するライブラリがあった。

さすがGoogle様って感じ。

最後に

IoT電化製品とか自社のサイトに取り入れて見るのもありかと