はじめに
最近Google Apps ScriptでWebアプリを作ることが多いです。無料で作れるWebサーバー的用途で使えるので便利なんですよね。ただGoogle Apps Scriptで構築する際に諸々制限も発生します。これを回避したテンプレートの開発環境を公開します。
GASでReactを使う制限と対策
- WebpackでバンドルしたHTMLをUpload出来ない
制限はこれにつきます。普通にGoogle Claspでアップロードすると重すぎてブラウザが固まっておちるのと何とかWebアプリケーションとして公開しても全く動きません。よってWebpackバンドル時に各々node_moduesをバンドルしないようにしてReactがうまく動くような環境にします。
前提
- Google ClaspでGASの開発を既に行なっている方を対象とします
開発環境構成
- Node.js 13.13.0
- Visual Studio Code
- 利用モジュールは以下
{
"name": "web-app-template",
"main": "./src/Index.tsx",
"license": "MIT",
"private": true,
"scripts": {
"dev": "NODE_ENV=development npx webpack-dev-server --open --hot",
"shell": "rm build/app.js & cp ./src/gas/app.js ./build/app.js",
"build": "NODE_ENV=development npx webpack && npm run shell && clasp push --force && clasp open",
"deploy": "NODE_ENV=production npx webpack && npm run shell && clasp push --force && clasp open"
},
"dependencies": {
"@types/google-apps-script": "1.0.12",
"@material-ui/core": "4.9.10",
"@types/react": "16.9.34",
"@types/react-dom": "16.9.6",
"@types/react-router-dom": "5.1.4",
"html-webpack-inline-source-plugin": "1.0.0-beta.2",
"html-webpack-plugin": "4.2.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-router-dom": "5.1.2",
"ts-loader": "6.2.2",
"typescript": "3.8.3",
"webpack": "4.42.1",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.10.3"
}
}
ソースコード
以下Githubにアップロードしました。
web-app-template
基本的な使い方
- プロジェクトをダウンロードしたディレクトリでまずはApp Scriptプロジェクトを紐付けましょう。
clasp create --rootDir ./src
- まずは以下コマンドでテストします
npm run dev
これにてローカルでWebサーバーが立ち上がり、Web画面のイメージが表示されます。
- ./src/pages内のtsxファイルを編集しましょう
- 編集が完了したら以下コマンドでApp Scriptに反映しましょう
npm run deploy上記を行った後、対象のApp ScriptでWebアプリケーションを公開すれば構築したReactのサイトが表示される筈です。
ReactからApp Scriptを呼ぶ時
./src/gas/googleScriptRun.jsに以下のようなスクリプトがあります。
google.script.run.withSuccessHandler(function () {
console.log("success");
}).recieveSpreadsheet();
これはWebアプリケーション側よりGAS上の関数を実行する記載方法で以下のような構文になります。
google.script.run.withSuccessHandler(__コールバック関数__}).実行するGASの関数名();
よって上記google.ScriptRun.jsにてWebアプリ側で呼びたい関数を記載し、./src/gas/app.js側に呼ばれる関数を記載すればWebアプリケーション側よりGAS上の関数を実行することが可能です。
上記、もし何かのお役に立てばお使い頂ければ幸いです。
宜しくお願い致します。
以下でも他詳細を記載しています。
Blogger