ゴール
こんな感じのスプレッドシートのデータをWebサイトに表示させたいと思います。
動作環境
- @gridsome/cli v0.3.4
- gridsome v0.7.21
- yarn 1.22.0
- macOS 10.14.6
プロジェクト作成&準備
-
Gridsome
- vue.jsの静的サイトジェネレーター
-
gridsome-source-google-sheets
- GridsomeのプラグインでスプレッドシートのデータをGraphQLで取得できるようになります。
やる前にGraphQLがどういったものかを知るために下の記事を参考にさせていただきました。
ありがとうございます。
1.Gridsome CLI インストール
# yarn を使う場合
$ yarn global add @gridsome/cli
# npm を使う場合
$ npm install --global @gridsome/cli
2.プロジェクト作成
$ gridsome create sheetSample
$ cd sheetSample
3.サイト表示
$ gridsome develop
アクセスしてサイトが表示されたらOK
静的ファイル生成 /distフォルダに生成されます。
$ gridsome build
3.スプレッドシートのデータを利用するのに必要なプラグインのインストール
# yarn を使う場合
yarn add gridsome-source-google-sheets
# npm を使う場合
npm install gridsome-source-google-sheets
4. sheetIdとapiKeyを準備
module.exports = {
siteName: 'Gridsome',
plugins: [
{
use: 'gridsome-source-google-sheets',
options: {
sheetId: 'GOOGLE_SHEET_ID',
apiKey: 'GOOGLE_API_KEY',
// type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
}
}
]
}
sheetIdとapiKeyを準備します。
apiKeyを設定
APIキーを作成
https://console.developers.google.com/apis/credentials
Google Sheets APIを有効にする
作成したAPIキーを gridsome.config.js のGOOGLE_SHEET_IDの部分に貼り付けます
sheetIdを設定
作成したスプレッドシートの共有リンクを作成します。
スプレッドシートのURLを確認します。
https://docs.google.com/spreadsheets/d/GOOGLE_SHEET_ID/edit#gid=0
GOOGLE_SHEET_IDの部分がsheetIdになります。
取得したsheetIdを gridsome.config.js のGOOGLE_SHEET_IDの部分に貼り付けます
スプレッドシートからデータを取得する
1.GraphQL でデータを取得してみる
Introduction to GraphQL | GraphQL
$ gridsome develop
ここにアクセスしましょう
実際にサイト内でアクセスする際に使用するクエリーを作って確認してみましょう
query {
allGoogleSheet {
edges {
node {
id
title
description
}
}
}
}
これを実行すると下記のような結果が得られます。
{
"data": {
"allGoogleSheet": {
"edges": [
{
"node": {
"id": "11",
"title": "あああああ11",
"description": "テストテスト11"
}
},
{
"node": {
"id": "10",
"title": "あああああ10",
"description": "テストテスト10"
}
},
{
"node": {
"id": "9",
"title": "あああああ9",
"description": "テストテスト9"
}
},
{
"node": {
"id": "8",
"title": "あああああ8",
"description": "テストテスト8"
}
},
{
"node": {
"id": "7",
"title": "あああああ7",
"description": "テストテスト7"
}
},
2.スプレッドシートのデータをサイトに表示させる
<page-query>ここのブロックに目的のquery（1.GraphQL でデータを取得してみるで作成したやつ）を記載します。
<template>
<Layout>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr v-for="page in $page.allGoogleSheet.edges" :key="page.id">
<td>{{ page.node.id }}</td>
<td>{{ page.node.title }}</td>
<td>{{ page.node.description }}</td>
</tr>
</tbody>
</table>
</Layout>
</template>
<page-query>
query {
allGoogleSheet {
edges {
node {
id
title
description
}
}
}
}
</page-query>
結果
表示できました。
でもidが降順ではなく昇順がいいので昇順にしてみます。
query {
allGoogleSheet(order: ASC, sortBy: "id") {
edges {
node {
id
title
description
}
}
}
}
並び替えられていますね！
templateを使ってみる
templateを使ってよくある詳細画面を作ってみましょう
1.template作成
<template>
<layout>
<div>{{$page.googleSheet.title}}</div>
<div>{{$page.googleSheet.description}}</div>
</layout>
</template>
<page-query>
query Post ($path: String!) {
googleSheet (path: $path) {
title
description
}
}
</page-query>
module.exports = {
siteName: 'Gridsome',
plugins: [
{
use: 'gridsome-source-google-sheets',
options: {
sheetId: 'GOOGLE_SHEET_ID',
apiKey: 'GOOGLE_API_KEY',
// type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
}
}
],
templates: {
googleSheet: [
{
path: '/:id',
component: './src/templates/googleSheet.vue'
}
]
}
}
作成したtemplateのパスを指定します。
pathは/:id とすることで
http://localhost:8080/:id => http://localhost:8080/1 これでアクセスするとidが1のデータを取得し templateに表示されます。
2.リンク作成
<template>
<Layout>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr v-for="page in $page.allGoogleSheet.edges" :key="page.id">
<td><g-link :to="page.node.id">{{ page.node.id }}</g-link></td>
<td>{{ page.node.title }}</td>
</tr>
</tbody>
</table>
</Layout>
</template>
<page-query>
query {
allGoogleSheet(order: ASC, sortBy: "id") {
edges {
node {
id
title
description
}
}
}
}
</page-query>
idのリンクを押すと対応したtitleと詳細が出るようになりました。
最後に
Gridsomeのプロジェクト作成は特に指定なして今回は作成しましたが公式でstarterがいくつか用意されているのでより効率よく目的のサイトを作成できると思います。
blog系のスターター + Headless CMSとかでJamStackなブログを作ってもいいですね.
gridsome-source-google-sheetsのプラグインを利用すると,
スプレッドシートAPIをそのまま利用してシートデータを取得するのではなく、Graphqlを利用してデータを取得するので扱いやすく、フロントエンドに集中できると感じたのでよかったです。
また、スプレッドシートでデータを用意できれば個人で開発する小規模のものや、短期間でサクッとものを作りたい時などに良さそうと感じました。
$ gridsome build
で静的サイト生成するときにスプレッドシートのデータを取得してくれるのでvercelやnetlifyを利用してデプロイ時にbuildコマンドを走らせるようにすればサイトが最新の状態に更新されかつサクサク快適に動くサイトが作れそうですね。
Gridsomeに関しては今回スプレッドシートのプラグインを使いたくて使ってみたばかりなので
このプラグインおすすめだよなどありましたら教えてくださるとありがたいです。