Googleスプレッドシートのデータを表示させてリッチな静的サイトを作る

背景

こんなサイトを作りました

https://meatup.love/ 🍖

どうやっていい感じにデータを取得してきたのか気になる、という方がいたので、ここに書いてみます！

概要

Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る
ほとんどは上記の記事の内容です。

ただこの記事では、「GoogleスプレッドシートをAPIサーバー化し」てフロントでデータを受け取るところまで記載します。

この記事に書いてあること

こんなデータが

こんなデータ形式に変換され

[
  {
    "title": "1973年のピンボール",
    "review": "ウイスキー飲みたくなる",
    "rate": 4
  },
  {
    "title": "風の歌を聴け",
    "review": "忘れた",
    "rate": 3
  },
  {
    "title": "ノルウェイの森",
    "review": "まだ途中",
    "rate": 4
  },
  {
    "title": "青の炎",
    "review": "ニノちゃん主演で映画化",
    "rate": 5
  },
  {
    "title": "心が雨漏りする日には ",
    "review": "エモい",
    "rate": 5
  },
  {
    "title": "成りあがり",
    "review": "ビッグ",
    "rate": 100
  }
]

最終的にこうなるまでのすべてが書かれています

See the Pen BookList by Kobashi syunsuke (@ksyunnnn) on CodePen.

今回はフロントサイドではVue.jsを使用します。JavaScriptの知識があれば、jQueryでもなんでも応用はできるかと

手順

データを用意

こんな感じのデータを用意します。
今回の例では、本のレビューコメントと評価レートをデータとして扱います。

Google Apps Scriptを利用してデータをjson化

1. メニューバーの「ツール」よりスクリプトエディタを開く

1. スクリプトを追加指定していく

こんな画面で追加します。

コードの中身はこちら

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) {
  // getDataの第1引数のハッシュ値は、スプレッドシートのURLの
　// https://docs.google.com/spreadsheets/d/｛この部分｝/edit#gid=0
　// です 
 
 //　第2引数はデータのある表のシート名です！
  var data = getData('1pxAIGBFP7-UUC16dm9tZ6HYdbN6zyVkYpZSqnZI3DAg', 'BookList');
  var output = ContentService.createTextOutput(JSON.stringify(data, null, 2));
  output.setMimeType(ContentService.MimeType.TEXT);
  return output;
}

1. プロジェクトをWebアプリケーションとして公開する

メニューより選択

公開範囲を全員に変更

承認が必要だったり、ブラウザ環境によっては危ないアクセスと言われたりしますが
無視して進みます。

公開するとURLが表示されるので、アクセスしてみます。

こんな感じでデータが表示されれば完了！

フロント側でデータを受け取って表示

受け取り確認

  fetch('https://script.google.com/macros/s/AKfycbzdU4Md20DUSfQFcqJJbUG81LIFGh42WmAQZN_9r3wh3SKSJknB/exec')
      .then(res => res.json())
      .then(
      result => {
       console.log(result)
      },
      error => {
       console.log("errorらしい")
      },

これはCodePenとかつかって確認すると楽です。コンソールに値が表示されれば受け取りOK

Vue.jsで実装

あとは最初に掲載したCodepenのまま
取得したデータをJavaScriptを利用してhtmlに差し込んでいます

index.js

new Vue({
  el: '#app',
  data () {
    return {
      message: 'Book List',
      books: null,
    }
  },
  mounted () {
    fetch(
      'https://script.google.com/macros/s/AKfycbzdU4Md20DUSfQFcqJJbUG81LIFGh42WmAQZN_9r3wh3SKSJknB/exec',
    )
      .then(res => res.json())
      .then(
      result => {
        this.books = result
      },
      error => {

      },
    );
  }
})

index.html

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <div class="books">

    <div class="book" v-for="book in books">
      <div class="info">
        <div class="title"><i class="book icon"></i> {{book.title}}</div>
        <div class="review">{{book.review}}</div>
      </div>
      <div class="rate">
        <div class="ui statistics">
          <div class="statistic">
            <div class="value"><i class="star icon"></i> {{book.rate}} </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

style.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500');
* {
  margin: 0;
  padding: 0;
}

#app {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  padding: 16px 48px;
}

h1 {
  font-weight: 100;
  margin-bottom: 48px;
  position: fixed;
  background: rgba(#fff,.8);
}

.books {
  max-width: 720px;
  margin: 80px auto;
}

.book {
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  padding: 8px;
  margin-bottom: 24px;
  &:hover {
    background: darken(#fff,5%);
    i.star {
      color: #FECA42;
    }
  }
  .title {
    font-size: 24px;
    line-hetght: 48px;
    margin-bottom: 24px;
  }
}

そしてこうなるはず

See the Pen BookList by Kobashi syunsuke (@ksyunnnn) on CodePen.

まとめてみたけど、意外と難しいのかな、、、

以上ですｗ

気軽に質問とか指摘あればください〜〜〜〜〜