• Technique
  • Database

Tips

  • Technique
  • Database

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 => {

      },
    );
  }
})

コメント


  • Report issue
  • Get help