Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google Nest HubでInteractive Canvasを試してみた / ss-0801

gaomar
August 01, 2019

Google Nest HubでInteractive Canvasを試してみた / ss-0801

2019年8月1日に開催された登壇資料です。
Google Nest HubでInteractive Canvasを試してみた

https://osaka-driven-dev.connpass.com/event/137383/

gaomar

August 01, 2019
Tweet

More Decks by gaomar

Other Decks in Technology

Transcript

  1. JOUFSBDUJWF@DBOWBTNJOKTΛJOEFYIUNMͰݺͼग़͢ <!DOCTYPE html> <html lang="en"> <head> // লུ <!-- Load

    Interactive Canvas JavaScript --> <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script> </head> <body> <noscript> <strong>We're sorry but nesthub-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
  2. <script> export default { methods: { bmiStart () { //

    Google Assistantʹ ʮbmiʯ ͱ͍͏จࣈྻΛૹΔ interactiveCanvas.sendTextQuery('bmi'); } } } </script> JOUFSBDUJWF$BOWBTTFOE5FYU2VFSZͰ (PPHMF"TTJTUBOUʹૹΔ
  3. <script> export default { data () { return { result:

    '' } }, created () { var me = this const callbacks = { onUpdate(state) { // bmiͷ஋͕ඈΜͰ͖ͨΒऔಘ͢Δ if ('bmi' in state) { me.result = state.bmi } }, } interactiveCanvas.ready(callbacks) } } </script> JOUFSBDUJWF$BOWBTSFBEZͰ (PPHMF"TTJTUBOU͔ΒͷԠ౴Λ଴ͭ
  4. )UNM3FTQPOTFͷEBUBʹ7VFKTʹ౉͢஋Λઃఆ͢Δ // BMIଌఆॲཧ app.intent('bmi', (conv, {height, weight}) => { const

    bmiVal = (parseFloat(weight) / (parseFloat(height)/100 * parseFloat(height)/ 100)).toFixed(1); var speechText = `͋ͳͨͷBMI͸${bmiVal}Ͱ͢ɻ`; conv.ask(speechText); conv.ask(new HtmlResponse({ url: `https://{݁Ռը໘ͷURL}`, suppress: true, data: { bmi: speechText, }, })); });