はじめに
先日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電化製品とか自社のサイトに取り入れて見るのもありかと