스플릿 시트의 데이터를 Vue.js(vue-table-2)로 좋은 느낌으로 표시하기까지의 흐름의 해설입니다.

Google 스프레드시트를 API 서버화

본 기사의 작성에 있어서 참고로 한 사이트의 소개입니다.

(참고 1)
Qiita[@ksyunnnn] | Google 스프레드시트 데이터를 표시하여 풍부한 정적 사이트 만들기
스플릿 시트의 API 서버화/Vue.js로 취득 데이터의 묘화에 대해서 참조(특히 HTML/JS/CSS는 베이스로 했습니다.)

(참고 2)
Vue.js 공식 페이지 | axios를 사용하여 API 사용
axios를 사용한 API로부터의 데이터 수신 참조

(참고 3)
SIer이지만 기술하고 싶은 블로그 | Vuejs vue-tables-2에서 테이블 표시
vue-table-2의 작법에 대해서 참조

【이번 활용하는 데이터】
과거의 기사에서도 다루고 있는 회의의 참가자 리스트를 예로서 활용합니다.

스플릿 시트는 공개하고 있으므로, 필요에 따라 복사하여 활용해 주십시오. 이번에 다루는 데이터 세트는 여기입니다.

Google 스프레드시트를 API 서버화

우선 스플릿 시트를 준비해 주시고, 참고 기사(Google 스프레드시트 데이터를 표시하여 풍부한 정적 사이트 만들기) 가 되어 API 서버화를 실시해 주세요.

만약을 위한 보충입니다만, 스프레드시트의 ID는, 황색 밑선부의 부분에 해당하므로 수중의 스플릿 시트를 확인해 주세요.

Vue.js(SPA)로 데이터 그리기(HTML/JS/CSS)

Vue.js에서 표시되는 코드는 다음과 같습니다.

index.html

<meta http-equiv="content-type" charset="utf-8">

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="app">
  <h3 class="vue-title">厳かな会合参加者リスト</h3>
  <v-client-table :columns="columns" :data="data" :options="options">

    <a slot="画像" slot-scope="props" :href="props.row.画像" target="'_blank'">
        <img :src="props.row.画像" width="40" height="40" />
      </a>

  </v-client-table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<script src="main.js"></script>

main.js

Vue.use(VueTables.ClientTable);

new Vue({
  el: '#app',
  data() {
    return {
      loading: true,
      errored: false,
      columns: [
        '画像',
        '名前',
        '出身地',
        '主な実績'
      ],
      data: [],
      options: {
        sortable: [
          'name'
        ],
        texts: {
          filterPlaceholder: 'search'
        },
        columnsDropdown: true,
        perPage: 25
      }
    }
  },
  filters: {
    currencydecimal(value) {
      return value.toFixed(2)
    }
  },
  mounted() {
    // axiousを用いてスプレットシート（APIサーバ化）から値を取得
    axios
      .get('https://script.google.com/macros/s/AKfycbz792Y12WYDaiW2U5CiUdgCj8Uu9xWIDfq6cYfyXqq5m3MFRxU/exec')
      .then(response => {
        this.data = response.data
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

main.css

* {
  box-sizing: border-box;
  font-size: 15px;
}

#app {
  max-width: auto;
  margin: 0 auto;
  padding: 10px;
}

td {
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  border-bottom: 2px solid #0099e4;
  /*#d31c4a */
  color: #0099e4;
}

th,
th {
  padding: 0 8px;
  line-height: 40px;
}

thead th.id {
  width: 50px;
}

thead th.state {
  width: 100px;
}

thead th.button {
  width: 60px;
}

tbody td.button,
tbody td.state {
  text-align: center;
}

tbody tr td,
tbody tr th {
  border-bottom: 1px solid #ccc;
  transition: all 0.4s;
}

tbody tr.done td,
tbody tr.done th {
  background: #f8f8f8;
  color: #bbb;
}

tbody tr:hover td,
tbody tr:hover th {
  background: #f4fbff;
}

button {
  border: none;
  border-radius: 20px;
  line-height: 24px;
  padding: 0 8px;
  background: #0099e4;
  color: #fff;
  cursor: pointer;
}

/* columns choice button */
button.btn.btn-secondary.dropdown-toggle {
  margin-right: 10px;
}

앱 이미지(실행 결과)

결국 이러한 앱으로 작동합니다.


vue-tables-2 옵션을 변경하면 필터와 같은 옵션을 쉽게 부여할 수 있습니다. 서두에 소개한 기사 (SIer이지만 기술하고 싶은 블로그 | Vuejs vue-tables-2에서 테이블 표시) 에서, 매우 알기 쉽게 데모를 정리해 주시고 있으므로 꼭 신경이 쓰이는 분은 꼭 확인해 보세요.

스프레트시트 데이터를 Vue.js（SPA）로 표시하는 방법에 대해 설명했습니다. 이 조합으로 또한 axious 나 vue-tables-2를 병용하고있는 참고 사이트가 없었기 때문에, 처음 소개한 블로그를 참고로 받으면서 조합으로 앱을 짜고 있습니다.

쉽게 웹 응용 프로그램을 만들 수 매우 매력적입니다. 덧붙여서 사내 이용에 닫은 이용입니다만 같은 구성으로 만든 데이터 뷰어 앱을 Firebase로 배포하고 있습니다. 인증 기능도 빨리 만들 수 있기 때문에 매우 고맙습니다 (무엇보다 무료 테두리로 맡기는 고마움).