Vue.js と Spreadsheet ( Google Sheet ) を使って静的ページに表示するコンテンツを動的に管理しよう
CMS を使えば、ある程度動的かつ自由にページに表示するコンテンツを管理できます。でも、なんかそうじゃない、というとき、ありませんか ?
例えば、Blogger では、ブログ全般に対して設定できるテキストは title と description の 2 つしかありません。もうちょっとほしい、というときがたまにありますよね。
Vue.js は JavaScript のフレームワークのひとつで、簡潔には、
{{hogehoge}} というストリングを、動的に置換できるというメリットがあります。しかも、データの配列があるときはその回数分反復したり、条件付きでレンダリングすることもできます。
では、はじめましょう。
function getData(id, sheetName) { var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName); var rows = sheet.getDataRange().getValues(); var keys = rows.splice(0, 1)[0]; return rows.map(function(row) { var obj = {} row.map(function(item, index) { obj[keys[index]] = item; }); return obj; });}
function doGet(e) { var data = getData("1_4qwY1jd2rdVb6Ruk3t4kUxCmB61tgq5Y_tAbbaJYQU", "var: Databook"); var output = ContentService.createTextOutput(JSON.stringify(data, null, 2)); output.setMimeType(ContentService.MimeType.TEXT); return output;
console.log(data);
}
<script src="https://unpkg.com/vue"></script>
<div id="cc-app">
<p v-for="book in books">
{{book.varName}},{{book.Meanings}},{{book.value}}
</p>
</div>
new Vue({ el: '#cc-app', data () { return { books: null, } }, mounted () { fetch( 'https://script.google.com/macros/s/AKfycbz7UiZcFqCCsux968jBNzDD2kZ874Dr6nx-kvYAWQBU3891RPR11MrswYW1MpZSQBB17w/exec', ) .then(res => res.json()) .then( result => { this.books = result console.log(result) }, error => {
}, ); }})
function getData(id, sheetName) {
var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
var rows = sheet.getDataRange().getValues();
var keys = rows.splice(0, 1)[0];
return rows.map(function(row) {
var obj = {}
row.map(function(item, index) {
obj[keys[index]] = item;
});
return obj;
});
}
function doGet(e) {
var data = getData("1_4qwY1jd2rdVb6Ruk3t4kUxCmB61tgq5Y_tAbbaJYQU", "var: Databook");
var output = ContentService.createTextOutput(JSON.stringify(data, null, 2));
output.setMimeType(ContentService.MimeType.TEXT);
return output;
console.log(data);
}
<script src="https://unpkg.com/vue"></script> <div id="cc-app"> <p v-for="book in books"> {{book.varName}},{{book.Meanings}},{{book.value}} </p> </div>
new Vue({
el: '#cc-app',
data () {
return {
books: null,
}
},
mounted () {
fetch(
'https://script.google.com/macros/s/AKfycbz7UiZcFqCCsux968jBNzDD2kZ874Dr6nx-kvYAWQBU3891RPR11MrswYW1MpZSQBB17w/exec',
)
.then(res => res.json())
.then(
result => {
this.books = result
console.log(result)
},
error => {
},
);
}
})
コメント
コメントを投稿