| SpreadsheetID | SheetName |
|---|---|
| 123456789012345678901234567890123456789012345 | HistName |
コード.gs
function doGet() {
var html = HtmlService.createTemplateFromFile("index").evaluate();
return html;
}
function appendData(inputData){
var spreadSheetID_write = "123456789012345678901234567890123456789012345";
var sheetName_write = 'HistName';
var sheet = SpreadsheetApp.openById(spreadSheetID_write).getSheetByName(sheetName_write);
var dataList = [];
for (i in inputData){
var approvedSet = inputData[i];
dataList.push(approvedSet);
}
sheet.appendRow(dataList);
}
vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
var app = new Vue({
el: '#app',
data: {
showTemplate: 'App',
inputName: '',
rndNum: '',
setAppData:[],
},
methods:{
checkApp: function(){
this.showTemplate = 'Confirm';
},
checkConfirm: function(){
this.showTemplate = 'Thanks';
this.setData();
google.script.run
.withSuccessHandler(function(arg){
alert("データの登録に成功しました。");
})
.withFailureHandler(function(arg){
console.log(arg);
alert("データの登録に失敗しました。");
}).appendData(this.setAppData);
},
setData: function(){
this.setAppData = [];
this.rndNum = this.createRndNum();
// inputするデータ配列の作成
this.setAppData.push(this.rndNum);
this.setAppData.push(this.inputName);
},
createRndNum: function (){
var l = 12;
// 生成する文字列に含める文字セット
var c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var cl = c.length;
var r = "";
for(var i=0; i<l; i++){
r += c[Math.floor(Math.random()*cl)];
}
return r;
},
},
})
</script>
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="app">
<template v-if="showTemplate === 'App'">
<input type="text" id="inputName" name="inputName" v-model="inputName"></input>
<button type="submit" v-on:click="checkApp">確認画面に進む</button>
</template>
<template v-if="showTemplate === 'Confirm'">
<input type="text" id="inputName" name="inputName" v-model="inputName" disabled=""></input>
<button type="submit" v-on:click="checkConfirm">登録</button>
</template>
<template v-if="showTemplate === 'Thanks'">
<p>Thanks！</p>
<p>{{ setAppData }}</p>
</template>
</div>
</body>
<?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>