[個人開発向け] Google Spread Sheet でデータを管理してプログラムに反映させるシンプルなやり方 (GitHub Actions付き)

動機

少し個人開発をしていて、以下のようなことをやりたいと思いました

• データはGoogle Spread Sheet
• コードで扱うデータはjson
• Spread Sheet → jsonの変換を簡単にそして個人開発だからシンプルにやりたい
• 面倒くさい手続きでデプロイとか個人開発でやってらんねーのでGitHub Actionsで意識しなくていいようにする

つまりやりたいことはこうです。

それをやってみたリポジトリがこちらです。
https://github.com/Marimoiro/trpg-data-template

ちょっと規模の大きい個人開発の途中で手習いとして差し込んでみました。
(完成品作らないとモチベが続かない…)

戦略

達成したいこと

• Spread Sheetはこんな感じで公開してよい
• apiキーは作成したくない (設定面倒くさい…)
• Spread Sheetのjsonはそのままほかのアプリにデータとして読み込ませるのはちょっと大変…
  • そのためいい感じに実データの配列という形で読みたい
• デプロイ先は今回はgithub pagesへ出したい

方針

• Spread Sheet -> csv -> json という変換にすればうまくいきそうだ
• csv -> jsonの変換が簡単なのはpwshなのでこれを使う
• データ更新もGitHub Actionsにやってもらえれば幸せになれそう

実装

Spread Sheet をcsvとしてダウンロード

2023/08現在Google Spread Sheetにはcsvを公開する方法があります。

ファイル > 共有 > ウェブに公開

とすると

こんな感じでurl作ってくれます。

データ公開したくない場合はapiキーとってApi経由でとればいいと思います。
今回は公開してOKだったので公開です。

csvをDLしてjsonに変換するスクリプト

pwsh書きました。
こんな感じです。

SpreadSheetPublishedUriにcsvの先ほどのurl入れればjsonにしてくれます。

param(
    [uri]$SpreadSheetPublishedUri
)

$tempFile = New-TemporaryFile
Invoke-WebRequest -Uri $SpreadSheetPublishedUri -OutFile $tempFile

Get-Content -Raw $tempFile | ConvertFrom-Csv | ConvertTo-Json

これをベースにして、必要なデータを一括でDLしてくるスクリプトはこちらです。

GitHub Actionsへデプロイ実装

今回は quasar フレームワークを使うのでそのDeployもはいってます。

gh-pagesブランチに成果物をpushするスクリプトです。
後は、設定でGitHub Pagesの対象をgh-pagesにすればページができます。

name: Build & Deploy
permissions:
  contents: write
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'
      - name: Cache
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      - name: Install
        run: yarn install
      - name: Download Data
        run: .\scripts\Download-DataToJson.ps1
        shell: pwsh
      - name: Build
        run: npm run build
      - name: List
        run: ls dist/spa
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: dist/spa

で出来上がったページがこんな感じです。