はじめに
こんにちは。株式会社ソニックムーブでバックエンドエンジニアしているmugiです。
新卒でインフラ構築をしてみて改めてWebアプリケーションって公開するまで大変だと思ったら、気がついたらとても寒い季節になっていました。皆様風邪には気をつけて。私はつい先日食当たりでダウンしました。
大学時代に、Googleフォーム×Googleスプレッドシート(スプシ)×Google Apps Script(GAS)を使った予約管理およびシフト管理アプリなるものを作ってみたのですが…。今見返してみると、なんというか、恥ずかしいですね。フロントエンド部分をGoogleフォームとスプシに頼りきっていて、とても窮屈なアプリケーション(?)になってしまったな、と思います。
しかし！会社の先輩の知見やインフラの知識を得た私は、スプシをDBとして利用し、GASでフロントエンドとバックエンドのコードを書けば、インフラを構築せずにWebアプリケーションを作ることができるということを学びました！
今回はそんな大学で作った「シフト調整アプリ」をスプシ×GASを使って進化させていこうと思います！
…とは言っても、長く苦しい戦いになるのは目に見えているので、まずは開発環境準備としてGASをVS Codeで開発できるのかについて調査してきましたので、まとめます。
先に結論だけ
この後GASで色々お遊びもしているため、先に【VS CodeだけでGAS開発できるのか？】のYes/Noだけ書いておきます。
答えは部分的にYesです。
というのも、VS Codeからスプシを作成したり、編集したりという方法があまり一般的ではないので、この辺りはChromeなどのブラウザを開いてGoogleドライブから色々行う方がシンプルかな、と思ったからです。
故に、GASエディタとはおさらばできます。使う人は使うかもだけど。
GAS開発をVS Codeで行うための「clasp」
世の多くの人間が思っていたんだと思います。GASエディタは使いたくない、と。
Google Chromeで「GAS VSCode」と調べるだけで、この「clasp」というものが出てきました。
claspは、GASプロジェクトの作成からコーディング、作成したコードのデプロイまで、GASエディタ上でできることをVS Codeで行うためのCLI(Command Line Interface)ツールです。Googleが直々に提供しているものになります。
claspを使うための準備
- Node.jsのインストール(必要であれば)
claspはNode.jsを使ってインストールするので事前に用意しておいてください。
- claspのインストール
インストールコマンドは以下の通りです。
npm i -g @google/clasp
コマンドの実行が完了したら以下のようなコマンドで正常にインストールできているかどうかの確認をしてください。
clasp -v
- Google Apps Script APIの有効化
https://script.google.com/から、設定を開き、Google Apps Script APIをオンにしてください。
GASで書いたWebアプリケーションの公開方法
では、いよいよWebアプリケーションを作成して公開してみましょう。ここからはVS Codeだけ使ってきます。
最初はテストということで、「Hello, World!」とだけ出てくる簡単なWebアプリケーションを作ってみます。
1. Google Accountの認証を行う(初回のみ)
Webアプリケーションを公開するために使うGoogleアカウントの認証を行います。
clasp login
実行するとブラウザに遷移し、色々許可を求められまして、ポチポチしていった後にVS Codeに戻ると、実行完了と一緒にターミナルに出力されている文章がYou are logged in as [自分の認証したGメールアドレス]で終わっていれば成功です。
2. GASプロジェクトの作成
単独ファイルとしてのGASプロジェクトと、それをローカルで置いておくためのディレクトリを作成します。
今回はローカルの「hwApp」というディレクトリの中にGASプロジェクトのあれこれを置くとします。プロジェクト名も「hwProject」とします。
mkdir hwApp
cd hwApp
clasp create --title "hwProject"
以上の3つのコマンドが正常に完了すると、hwAppは以下のような構成になります。
hwApp/
├── .clasp.json
└── appsscript.json
出来上がった2つのファイルは、どちらも設定ファイルです。その内appsscript.jsonの方を次のように書き換えます。
{
"timeZone": "Asia/Tokyo",
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"webapp": {
"access": "ANYONE_ANONYMOUS",
"executeAs": "USER_DEPLOYING"
}
}
これでタイムゾーンとデプロイ設定を変更しています。webappのaccessを変更することによって、Webサイトのアクセス権限が変わります。今回のANYONE_ANONYMOUSはGoogleにログインしているかどうかに関わらず誰でもアクセス可能という設定になっています。デフォルトのANYONEの設定の場合はGoogleにログインしているユーザー誰でもアクセス可能という設定になるので、違いに注意してください。
他にも色々設定できますので、カスタマイズはご自身でしてください。
3. Webアプリケーション用コードを書く
実際にWebサイトのためのプログラミングをしていきます。
hwAppディレクトリに.gsと.htmlの2つのファイルを追加します。今回はmain.gs、index.htmlとします。
hwApp/
├── .clasp.json
├── appsscript.json
├── index.html
└── main.gs
main.gs
Googleのサーバー上で実行されるバックエンドの処理を記述するファイルです。
アクセスユーザーから送られてきたリクエストに対してHTMLを返すためのdoGet関数や、スプシにデータ登録をするための関数などはここに記載します。
今回はただHTMLを返すだけの簡単なお仕事しかないので、記述量は控え目です。
// ブラウザにレスポンスを返すための関数
function doGet(e) {
const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput.setTitle("Hello, GAS!!");
return htmlOutput;
}
index.html
ユーザーに見える見た目や操作などのフロントエンドの処理を記述するファイルです。ごく一般的なHTMLファイルです。
今回は「Hello, World!」と表示するだけの簡単なものになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base target="_top">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
4. GASプロジェクトにアップロード・デプロイしてWebアプリケーション公開
ファイルが出来上がったらいよいよWebアプリケーション公開です！
まず、今編集したファイルを、Google上のGASプロジェクトにアップロードします。
clasp push
アップロードが完了したら、デプロイします。
clasp deploy
すると、ターミナルにはこんな文字が出てくると思います。
Deployed [何やら長い文字列] @1
文章の形式はclaspのバージョンによって違うかもしれませんが、怪しい文字列が出てくると思います。
この[何やら長い文字列]がデプロイIDになります。このデプロイIDは自分の公開したWebアプリケーションにアクセスするための重要な素材になりますので、大切に保管してください。
以上で、Webアプリケーションの公開は完了しました。
自分の作成したWebアプリケーションには、以下のURLでアクセスできます。
https://script.google.com/macros/s/[デプロイID]/exec
5. デプロイしたWebアプリケーションを更新したい場合(2回目以降のデプロイ)
Webサイトを更新したい場合、clasp pushからのclasp deployという手順を踏むことに変わりはないのですが、先ほどと同様の手順で行ってしまうと、違うデプロイIDが発行され、WebアプリケーションのURLが変わってしまいます。
URLを変えないために、デプロイIDを指定してデプロイするという手法をとることで、同じURLでWebアプリケーションの更新を行えます。
clasp push
clasp deploy --deploymentID [デプロイID]
簡単なWebアプリケーションを作ってみる
最後に少しだけ、GASで作るWebアプリケーションはどんなもんなのかをテストして遊んでみたいと思います。
app1: ページ遷移をしてみる「ボタンを押すとページが変わるWebアプリ」
HTMLの中にボタンを置いてクリックしたときに、別のHTMLに遷移することができるのかなと思ってみましたが、実際できました。
簡易的なアプリケーションなので、パラメータを使って制御したら結構簡単にできます。
| トップ画面 | ボタンを押したら出てくる画面 |
|---|---|
 |
 |
↓ソースコード置き場
app2: スプシと連携させてみる「名前入力Webアプリ」
GoogleスプレッドシートをDBとして、以下のような機能を持つアプリケーションを作りました。
- トップページで名前を入力すると、スプシに名前と入力時刻データが登録される
- 今まで登録された名前と、その名前が登録された日時を一覧で確認できる
このアプリケーションを作る時だけはVS Codeだけでは完結しませんでした。
「先に結論」の項目でも記載したように、VS CodeからGoogleスプレッドシートを操作する何かというのを見つけることができなかったので、諦めてChromeからGoogleドライブを開いてスプシを作成しました。
スプシでは「ファイル名」「シート名」「ヘッダー行」だけ入力して、スプシのURLからスプレッドシートIDを確認しました。
スプレッドシートIDは、後ほどスプレッドシートにデータを追加したり、HTMLで使うためのデータを引っ張り出すために必要なので必ずチェックしておいてください。
https://docs.google.com/spreadsheets/d/[スプレッドシートID]/edit
なんだかんだありましたが、doPost関数なども使ってうまく実現できました。
この辺りになってくると、やっとmain.gsの出番が増えてきたな、という気持ちになります。
| トップ画面 | 履歴確認画面(DBデータ引出) | 登録完了画面(DB登録) |
|---|---|---|
 |
 |
 |
↓ソースコード置き場
app3: CSSを使ってみる「名前入力Webアプリ -CSS ver-」
app2で作ったものにCSSを適用させてみました。
せっかくなのでCopilotにソニックムーブのホームページを読み込ませて、「株式会社ソニックムーブをイメージしたデザインにして」と言って作らせました。ちょっと微妙だったので手を加えはしましたが…。
| トップ画面 | 履歴確認画面(DBデータ引出) | 登録完了画面(DB登録) |
|---|---|---|
 |
 |
 |
↓ソースコード置き場
まとめ
というわけで今回はVS CodeだけでGAS開発はできるのか？について調査してきました。
結論としてはGAS開発はできるけど、Web開発は少し厳しいかもといったところに落ち着いたと思っています。
しかしながら、GASエディタとはおさらばできるということは、右手にVS Code+Copilot、左手にChrome+Geminiという夢の開発環境が出来上がったので、mugiちゃん的にはとてもハッピーな結果になりました。
GASを触ってみて、結構色々作れそうだなと思ったので、次回からいよいよ「シフト調整アプリ」の作成に取り掛かっていきたいなと思っています。
まずは設計から。どこから手をつけていくか正直悩んでいる部分はあるので、じっくり進めていきます。大学の時とは違って期限がないので…。
それではまた次回、お会いしましょう。
ここまでのお付き合い、ありがとうございました。
参考にしたもの
- GASエディタとおさらばするために読んだ記事
- claspを使ってWebアプリ公開するために読んだ記事
- GASでの色々な記法を学ぶために旅して出会った記事
Discussion