vue create kudamonoquiz-app
vue add vuetify

<scripttype="text/javascript"src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

<template><v-app><v-app-barapp><v-toolbar-titleclass="headline text-uppercase"><span>くだものくいず</span></v-toolbar-title></v-app-bar><v-content><router-view/></v-content></v-app></template>

<template><HelloWorld/></template><script>importHelloWorldfrom'../components/HelloWorld.vue'exportdefault{name:'home',components:{HelloWorld}}</script>

<template><v-container><!-- スタートページ --><v-layouttext-centerwrapv-show="target === 'top'"><v-flexxs12md-10><h3class="display-3 font-weight-bold mb-10"></h3></v-flex><v-flexxs12><h1class="display-2 font-weight-bold mb-10">くだものえいご
        </h1></v-flex><v-flexxs12mb-4><v-btncolor="success"@click="start">スタート</v-btn></v-flex></v-layout><!-- 問題表示ページ --><v-layouttext-centerwrapv-show="target === 'kudamono'"><v-flexxs12md-10><h3class="display-3 font-weight-bold mb-10"></h3></v-flex><v-flexxs12mb-4><h1class="display-1 font-weight-bold mb-3">【くだものえいご】
          </h1></v-flex><v-flexxs12mb-4><imgclass="img":src="imgurl"alt="くだもの画像"></v-flex><v-flexxs12mb-4><h5class="display-1 font-weight-bold mb-3">このくだものはなーんだ？
          </h5></v-flex></v-layout><!-- 正解後の表示ページ --><v-layouttext-centercolumnalign-centerv-show="target === 'congratulation'"><v-flexxs12mb-10><h3class="display-3 font-weight-bold"></h3></v-flex><v-flexxs12mb-4><imgclass="img"alt="congratulation"src="../assets/congratulation.png"></v-flex><v-flexxs12mb-4><imgclass="img":src="imgurl"alt="くだもの画像"></v-flex><v-flexxs12mb-4><h2>だいせいかい！<br>これは{{kotae}}（{{tango}}）だよ！</h2></v-flex><v-flexxs12mb-10><v-btnlargecolor="success"@click="start">スタート</v-btn></v-flex></v-layout></v-container></template><stylescoped>.img{width:300px;}.endimg{width:200px;}</style><script>exportdefault{data(){return{target:'top'}},created(){varme=thisconstcallbacks={onUpdate(data){if('kudamono'indata){me.kotae=data.kudamono.kotae,me.tango=data.kudamono.tango,me.imgurl=data.kudamono.imgurl,me.target=data.kudamono.target}},}interactiveCanvas.ready(callbacks)},methods:{start(){interactiveCanvas.sendTextQuery('スタート');}}};</script>

{
  "name": "kudamonoquiz-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.4.3",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "^2.0.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  }
}

npm install -g azure-functions-core-tools 

$ mkdir kudamonoquiz-app-functions
$ cd kudamonoquiz-app-functions
$ func init                             # 選択肢が出てくるのでnodeとjavascriptを選ぶ
$ func new                              # Http triggerを選択し、kudamonoquiz-appという名前で作成する
$ npm init -y
$ npm i -s actions-on-google@2.10.0     # 2.10.0を入れる
$ npm i -s azure-function-express       # azure-function-expressを入れる
$ npm i -s express
$ npm i -s firebase-admin

{"bindings":[{"authLevel":"anonymous",//anonymousにしておく"type":"httpTrigger","direction":"in","name":"req","methods":["post"//getは使わないので消しておく]},{"type":"http","direction":"out","name":"res"}]}

constcreateHandler=require("azure-function-express").createHandler;constexpress=require("express");const{dialogflow,HtmlResponse}=require('actions-on-google');constapp=dialogflow({debug:false});//スタート処理app.intent('StartIntent',async(conv)=>{//問題の生成constkudamonoquiz=[{"imgurl":"/img/banana.jpg","kotae":"バナナ","tango":"banana"},{"imgurl":"/img/cherry.jpg","kotae":"チェリー","tango":"cherry"},{"imgurl":"/img/grape.jpg","kotae":"グレープ","tango":"grape"},{"imgurl":"/img/melon.jpg","kotae":"メロン","tango":"melon"},{"imgurl":"/img/orange.jpg","kotae":"オレンジ","tango":"orange"},{"imgurl":"/img/peach.jpg","kotae":"ピーチ","tango":"peach"},{"imgurl":"/img/remon.jpg","kotae":"レモン","tango":"remon"},{"imgurl":"/img/strawberry.jpg","kotae":"ストロベリー","tango":"strawberry"}];constwordIndex=Math.floor(Math.random()*kudamonoquiz.length);constselKudamono=kudamonoquiz[wordIndex];conv.contexts.set('game',5,selKudamono);conv.ask('このくだものを英語で言ってみてね');selKudamono["target"]="kudamono";conv.ask(newHtmlResponse({data:{kudamono:selKudamono}}));});//ゲーム処理app.intent('MainIntent',async(conv,{any})=>{constcontext=conv.contexts.get('game');if(context.parameters.kotae===any){conv.contexts.delete('game');conv.ask(`大正解。答えは ${context.parameters.kotae}でした！ もう一度クイズをするなら「する」終了するなら「終了」と言ってください。`);context.parameters["target"]="congratulation"}else{conv.ask('よくわかりませんでした。もういちど言ってみてね。');}conv.ask(newHtmlResponse({data:{kudamono:context.parameters}}));});//起動時app.intent('Default Welcome Intent',(conv)=>{conv.ask('果物英語をはじめるには、スタートボタンを押してください。');conv.ask(newHtmlResponse({url:'https://{表示させたいホームページのURL}',supperss:true}));});//functionの名前を一致させておくconstexpressApp=express();expressApp.post('/api/kudamonoquiz-app',app);module.exports=createHandler(expressApp);

cd ./kudamonoquiz-app
npm install

npm run serve

cd ./kudamonoquiz-function
npm install

//起動時app.intent('Default Welcome Intent',(conv)=>{conv.ask('果物英語をはじめるには、スタートボタンを押してください。');conv.ask(newHtmlResponse({url:'http://localhost:8080',supperss:true}));});

func host start