シニアジョブで簡単な来客記録システムを作りあたり、Google Workspaceを使っているので、
NuxtJSでUI作って、Google スプレッドシートとGASでいけるんじゃね?
と思ってやってみたら、ちょっとハマったものの出来たのでメモ。
※画面は開発中のものです(圧倒的いらすとや感)
NuxtJSの方は今回は省略。
ログを書き込むスプレッドシートをつくる
特に何の変哲もないやつ作ります。
スクリプトを書く
ツール → スクリプトエディタ でGASの入力画面へ。
今回はGETリクエスト使うのでdoGet()という名前にする必要があります。
詳細は公式。GAS関係は結構デタラメな古い情報が検索に溢れているので注意しましょう。
https://developers.google.com/apps-script/guides/web
名前、会社名とかをGETパラメーターで受け取るようにして雑にこんな感じになりました。
認証とかライブラリインストールとか省けるのでいいですね。
空白行とかできるとアレなので簡単に有無チェックだけはしておきます。
function doGet(e) { const ss = SpreadsheetApp.getActive().getSheetByName('来客ログ'); if (!e) { return ContentService.createTextOutput('{result:"NG", error: "eventがありません"}') } const params = e.parameter const name = params.name if (!name) { return ContentService.createTextOutput('{result:"NG", error: "nameは必須です"}') } const description = params.description if (!description) { return ContentService.createTextOutput('{result:"NG", error: "descriptionは必須です"}') } const company = params.company ss.appendRow([new Date(), company, name, description]); return ContentService.createTextOutput('{result:"OK"}'); }
アクセスできるユーザーを"全員"にする
この画面で全員にしておかないと認証画面にとばされaxiosでCORSエラーになります。
開発者ツールでリクエストをよく見れば分かるものの、認証エラーではなくCORSエラーで来るのが曲者でした。
全員と社内だとURLが変わるので注意しましょう。
また設定変更後デプロイしないと反映されません。
axiosでリクエストする
今回はNuxtJSだったのでプラグインでメソッドを生やしました。
上記で取得したURLはnuxt.config.jsのenvに追加。
あとは必要なパラメーターをつけるだけ。
plugins/gas-api.js
import axios from 'axios' async function addSpreadSheet(name, company, description) { await axios.get(`${process.env.gasApiUrl}`, { params: { name, company, description }, }) } export default (_, inject) => { inject('addSpreadSheet', addSpreadSheet) }
あとはコンポーネントのmethodsでこんな感じのを追加して使いました。
send() { this.$refs.form.validate() this.isLoading = true if (this.valid) { // 送信処理 try { await this.$addSpreadSheet(this.name, this.company, 'テスト') } catch(e) { this.isLoading = false this.$router.push('error') return } this.isLoading = false this.$router.push('thanks') } },
感想
サーバーいらずでスプレッドシートに書き込みできるAPI作れるので超便利。
詳解! Google Apps Script完全入門[第2版] ~GoogleアプリケーションとGoogle Workspaceの最新プログラミングガイド
- 作者:高橋宣成
- 発売日: 2020/12/01
- メディア: 単行本