소개

요전날 google씨에서 행해진 VUILT에서, ( 🍑 🌸 )씨가 「VUI 시대의 홈페이지를 만들어 보았다」로 등단하고 있었습니다.

Alexa에 「전기 지워」라고 하면, 웹 사이트상의 방의 화상의 전기가 사라지는 녀석.
그 때는 데모 동영상에서 사실은 제대로 작동하지 않고 이미지의 전기가 사라지는 타이밍에 말을 걸었던 것 같습니다.
아니 그래도, 개인적으로 이 아이디어가 굉장히 재미있고, 미래를 느꼈기 때문에 실제로 만들기로 했습니다.
하지만 똑같은 만들면 재미 없기 때문에 360도 이미지를 도입하는 것.

조금 소개하겠습니다.

실제 웹사이트
h tps : // s3- 아 p의 r아아 st-1. 아마조나 ws. 이 m / 하지만 - 칭찬 / 가서 x. HTML

그래서, 실제로 동영상을 보는 쪽이 이미지 붙기 쉽기 때문에, 봐 주세요.

메커니즘

간단한 구조도.
말의 표현이 미묘하지만 대체로 이런 느낌.



firebase realtime database의 값이 변경되면 웹 사이트 측에서 이벤트를 얻을 수 있는 기능을 이용.
참고 htps : // 이 m/세이야 1121/있어 ms/4cbc32678558315c2159

즉, Alexa의 스킬로 「전기 지워」라고 말하면 firebase의 데이터의 값을 변경한다.
그 때, web측에서 「값이 바뀌었어ー」라는 것을 알 수 있다. (일단 값도 알 수 있다).
「값이 바뀌었어――」가 된 순간 web측은 전기를 끄는 화상으로 하고 있다.
(사실은 전기가 사라지는 이미지가 아니라 CSS로 이미지를 어둡게합니다)

아래 이미지는 firebase 이미지입니다.isOn가 true일 때는 전기는 온. false라면 전기 끄기.

코드라든지 조금

알렉사 측

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'

참고
htps : // 푹 빠져라. 오, ぇ. 이 m / 드 cs / 다타바세 / 레 st / 사오? hl = 그럼

웹 측

사실은, firebase의 설정등을 쓰지 않으면 갈 수 없지만 끝단 접습니다.
자세한 것은 htps : // 코 m / 히로 유키 7 / ms / 2f74105d9d0298 c317 라든지 봐.

// 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 가전제품이나 자사의 사이트에 도입해 보는 것도 있을까