動機

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

データは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

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