GASのTips集

最小構成にてGASへのWEBアプリのデプロイ

GASをWebアプリケーションとしてDeployする

function doGet() {
    return HtmlService.createHtmlOutputFromFile("index.html")
      .addMetaTag("viewport", "width=device-width, initial-scale=1")
      .setTitle("タイトル")
}

一方でGASではURLパラメータは使えない
代わりにクエリパラメータを使用可能
e.parameterにてクエリパラメータを取得可能。これをIF文等で場合分けしてページ分けを行うことができる。以下の場合は?page=abcのときのみabc.htmlを表示することができる。

function doGet(e) {

    let parameter = e.parameter

    if (Object.keys(parameter).length === 0){
        return HtmlService.createHtmlOutputFromFile("index.html")
      .addMetaTag("viewport", "width=device-width, initial-scale=1")
      .setTitle("タイトル")
    }

    if(parameter.page == 'abc'){
        return HtmlService.createHtmlOutputFromFile("abc.html")
        .addMetaTag("viewport", "width=device-width, initial-scale=1")
        .setTitle(`タイトル【abc】`)
    }
}

CoCo9122

GASの開発環境構築

GASのコードをGit管理した場合は以下のサイトがお勧め。WebのデプロイをふくめてClaspで管理できる。

CoCo9122

GASでのWebアプリの構成

開発時はバックエンドのgsとスプレッドシートは使えないため、バックエンド用のコードとDBを用意する必要がある。役割まとめると以下のようになる。

項目	開発	商用
フロントエンド	React	htmlファイル
バックエンド	Python(Django)	gsファイル
データベース	MySQL	スプレッドシート

フロントエンドにはReactのコードをViteにてhtmlファイルに変換しDeploy
バックエンドにはPythonで構築したコードをjs用に再度作成する（APIは同じコードを二回作る、もしかしたらバックエンドもTypescriptで書いたら二回書かなくても済むか？）
データベースはMySQLのテーブル定義とスプレッドシートのシート定義を合わせる必要がある。

CoCo9122

スプレッドシートとMySQL(DB)のテーブル定義

スプレッドシートとMySQLの対応表は以下にまとまった。

項目	MySQL	スプレッドシート
テーブル	テーブル	シート
カラム	カラム	列

以下のスプレッドシートにて一行目がカラムの説明、2行目がDBと同じカラム名とする。

スプレッドシートにセルの定義は基本は文字列、数字、時間型の三つになる。したがって、ここに合わせてDBのカラム定義を決める必要がある。しかし以下の点を注意が必要である

DBでのフィールド値は文字列であるが数字のみで構成されているものに対して、スプレッドシートは数字となる。
スプレッドシートのセルに含めることのできる文字数は50000文字までとなる。
スプレッドシートの時間型の対応がすこし面倒

CoCo9122

スプレッドシートのデータへアクセスする

gasfunction.jsx

export const gasRun = async (gasFuncName, gasObj) => {
    return await new Promise((resolve, reject) => {
        google.script.run.withSuccessHandler((result) => {
            resolve(result)
        }).withFailureHandler((...e) => {
            reject(new Error(e.message))
        })[gasFuncName](gasObj)
    });
}

code.gs

const getData = (gasObj) => {
    const data = スプレッドシートのへアクセスし、セルのデータをとってくる関数
    return data
}

data.js

const getData = async () => {
    const data = await gasRun('getData', {})
}