Blog

Webアプリケーションの開発において、Google Workspace（グーグル ワークスペース）は非常に強力なプラットフォームです。
Google Workspaceは、Googleが提供しているクラウドベースのビジネス向け生産性向上ツールとコラボレーションツール群で、Gmailや Google ドライブ、Google カレンダー、Google ドキュメント、NotebookLMなどが含まれているほか、Google Apps Scriptやスプレッドシート、Google フォームなどを利用して、アプリケーションの開発も可能となります。

これらのツールを使ったアプリケーションが、通常のWebアプリ開発と比べてどのような特徴があるのか、また、どのような限界があるのかを考える機会があったので、記事を書きました。
※AI開発ではありません。

はじめに

ちゃんとしたWebアプリは高価格です。ちょっとした機能でも作成すると工数がかかり、人件費も安くはないからです。
でも近年は、ノーコードやローコードでアプリを作成できるサービスがたくさんあり、要件によってはそのようなもので十分な場合もあります。

…とはいえ、どれくらいのものなら開発コストをかけずに作成できるのかというのは、実際にローコードアプリを作成して運用した経験と、通常の高価格Webアプリを作成・運用した経験のどちらもないと比較ができません。

自分はフロントエンジニアとしてアプリ制作に関わることがほとんどですが、今回、直接お客さんとのやりとりをする仕事がありました。そこでは、Google Workspaceのツールを使って、できるだけ安価にやりたいことを実現しました。

その時、通常のWebアプリでは気にしなくても良いこと…つまり限界値を感じるところがありました。これ以上のことをしたい場合は、しっかりと開発コストをかけないといけないというラインを感じたので書いていきたいと思います。

アプリの要件

実際の要件はこんな感じでした。

• スタッフ（50名ほど）の毎日のスケジュールページを作成し、スタッフが自分のスケジュールをスマホで確認できるようにする
  • スケジュールには、日付と業務内容、日報フォームのURLが表示されている。
  • 今日のスケジュールと、1ヶ月分のスケジュールを確認できるようにする
  • 業務を始めた時に、始めた時間を送信して記録する
• スタッフは毎日、業務ごとの日報を提出する
  • 日報は、決まった項目の報告が必要
  • 日報は、管理者がスプレッドシートで確認できるようにする
• スケジュールと日報は一覧で管理者が確認できるようにする
  • この一覧はフィルタリングやソート、CSVダウンロードができるようにする

実際はこのほかにもありましたが、大枠は「スケジュール」「日報」「その両者を確認する管理者用の一覧」というものでした。
この要件に対して、Google Workspaceのツールを使ってどこまで実現できるかを考えました。

結果を先に書きますが、この要件でギリギリといった感じでした。できなくはないけれど、使う側に色々とルールを定めたり、パフォーマンスやUIに少し我慢が必要なところがありました。

日報はGoogleフォームで実現

日報はGoogleフォームを使って実現しました。
Googleフォームは、簡単にアンケートやフォームを作成できるツールで、Google Workspaceの一部として提供されています。

Googleフォームのメリット

フォームの作成は非常に簡単で、質問項目を追加するだけでフォームが完成します。
また、Googleフォームは自動的に回答をスプレッドシートに保存する機能があり、これにより、日報のデータを簡単に管理することができます。

これを1から開発するとなると、フロントエンド・バックエンド共にそこそこの手間がかかります。Googleフォームは普通のWebアプリと違ってUIのカスタマイズはほぼできませんが、日報の提出という目的に対しては十分な機能を持っています。
さらに何もしなくてもスプレッドシートと連携してリストまで完成してしまうので、今まで紙の日報を使っていたことを考えると、非常に大きな変化でした。

Googleフォームでできないこと

実現できなかった要望として、「チェックボックスの後ろにテキストを入力したい」というものがありました。

Googleフォームでは、決まった様式で決まった項目のみを設定することとなるため、「チェックボックスの後ろにテキストを入力してグループ化」みたいな高度ことはできません。（「その他」のみ可能）
セクションを増やして必要なことを回答させることはできますが、項目が増えてしまい冗長になってしまうというデメリットがありました。

また、後述しますが、Apps Scriptの連携において、微妙に制限がありました。（独立したフォームとなるため、フォームの送信をトリガーにして、Apps Script側のHTMLを更新することができませんでした。）

Google AppSheetとGoogle Apps Script

Google Workspaceには、アプリケーション開発を支援するツールがいくつかあります。

最近はGoogle AI StudioというAIで開発そのものをやってしまうプロトタイピングツールもありますが、まだAIに開発を任せるのは不安な部分がかなりあるので（というかプロトタイプレベルでは足りないので）

Google AppSheet と Google Apps Script をまず検討しました。

Google AppSheet

Google AppSheet（以下AppSheet）は、ノーコードでアプリケーションを作成できるツールです。

AppSheetのメリット

ノーコードなのでUIをコーディングする必要もないし、AIに何をしたいか伝えるだけで作成ができるというのが大きな特徴なのですが、個人的にはそれ以上に、他のアプリケーションと連携しやすいという点が非常に大きいと思います。

通常、個々のアプリケーションを連携させるためには、APIという仕組みを使い、そのためのコードを書く必要があります。フロントエンドとバックエンドの連携も必要で、この連携の仕組みもいろいろと考慮しなければなりません。

しかし、AppSheetを使うと、Googleのアプリケーション（スプレッドシート、Google フォーム、Google カレンダーなど）と簡単に連携することができます。

また、今回は関係なかったのですが、データソースにはGoogleサービスだけでなく、MicrosoftやDropbox、Salesforceなどの外部サービスも利用できます。

AppSheetのチュートリアルムービーをいくつか見てみました。

▼参考 Building with AppSheet
https://www.youtube.com/playlist?list=PLU8ezI8GYqs7hJp2tx3k7eReVqSCQYDQg

スプレッドシートのメニューからAppSheetを選択するだけで、データベースのテーブルが作成され、横にUIのライブビューが表示されます。

UIのライブビューは、スプレッドシートのデータを元に自動的に生成され、デザインもシンプルで綺麗でした。
ノーコード故にフロントエンドの細かなカスタマイズはできませんが、それを差し引いても、

• 強力な連携機能あり
• セキュリティ面でも一定の安心感あり

ということで、AppSheetは非常に魅力的なツールだと感じました。

AppSheetの制限

調べれば調べるほど魅力的でしたが、結局はAppSheetは採用しませんでした。

理由は、固定費がかかりすぎるからです。

AppSheetは、アプリを使う側にも有料プランが必要になります。今回の要件ではコアプランが必要で、月額$10ドル/ユーザー/月が必要でした。
Google Workspaceの有料アカウントを持っていれば、個別にこのAppSheetのプランを契約する必要はありません………が、それに必要なGoogle Workspaceのアカウントも月1600円（Standardプラン）。

この「使う側にもGoogle Workspaceの有料アカウントが必要」というのがネックで、50名のスタッフでは、単純計算で月$500の固定費がかかります。
1ドル148円だとして、月74,000円、年間88万8000円。
制作費を抑えたいという要件に対して、これは大きすぎる負担です。

社内システムでユーザーが管理者1人だけといった場合であれば、AppSheetは検討の余地ありかもしれませんが、今回のように多くのユーザーが使う場合は、コスト的に厳しいと感じました。

Apps Scriptでスタッフスケジュールの実装

今回の開発において、スタッフスケジュールはこのApps Scriptを使って実装しました。

スプレッドシートにスケジュールのデータを入力し、メニューから「Apps Script」を選択すると、スクリプトエディタが開きます。
ここで、ファイルの作成やデータ取得のお作法など、細かな部分でApps Scriptの専門知識が必要となります。正直ここに学習コストをかけたくないと思っていましたが、ジェミニに聞けば順を追ってわかりやすく教えてくれたので非常に楽でした。

昨今AIの進化により開発が楽になってきてはいるものの、プロジェクト全体を見渡したコード生成をAIに任せるというのは、まだ不安です。
ですが1ファイル単位であれば、かなりの精度でコードを生成してくれます。Apps Scriptはプロジェクトの構造がシンプルなので、AIに聞きながら進めるのもやりやすいと感じました。

他のGoogleサービスとの連携も、Apps Scriptを使うことで非常に簡単に実現できます。
先ほども書きましたが、スプレッドシートにデータを入力しておけば、Apps Scriptからそのデータを簡単に取得できます。
スプレッドシートにApps Scriptが紐づいているため、スプレッドシートのデータを直接操作することができ、データの取得や更新も簡単に行えます。

また、別のスプレッドシートのデータを取得することも可能で、複数のスプレッドシートのデータを突き合わせたり統合したりもできます。
コードがかけるということは、それだけ自由度が高いということでもあります。

Google Apps Script の制限１　- HTMLのリアルタイム変更に制限あり

今回は、Googleフォームで作成した日報のURLを、スケジュールに表示する必要がありました。

フォームには、日付や業務内容の項目をあらかじめ入力しておく必要があり、そのためにはフォームにパラメータをつけておく必要があったため（つまりURLを動的に生成する必要があったため）、Apps ScriptでフォームのURLを生成しました。

ここまでは良かったのですが、一つ実現できなかったことがありました。それは「フォームの送信をした時に、日報のURLボタンを非活性にする」という要件です。
通常のWebアプリなら、フロントエンドで状態管理をし、画面更新を始め様々な処理をすることができます。Googleフォーム＋Apps Scriptでは、フォームの送信をApps Script側に伝えることはできたのですが、HTML/CSSをリアルタイムで変更するようなことはできませんでした。

Google Apps Script の制限２　- クオータ数

Apps Scriptには、実行時間やURLの呼び出し回数などに制限があります。

例えば、無料Googleアカウントのユーザーの場合、1日の実行時間は90分間、URLの呼び出し回数は2万回までなど細かい制限があります。

▼Google 割り当てと上限
https://developers.google.com/apps-script/guides/services/quotas?hl=ja#current_quotas

今回のアプリの場合、トリガーの合計実行時間90分のみ、ひっかかる可能性があるのではと常に計算をしていました。
実行時間とは、Apps Scriptのコードが実行される時間、ざっくり言えば画面を更新して更新し終わるまでのローディング時間や、スプレッドシートに書き込む時間などです。

普通に考えれば、1日に90分もApps Scriptのコードが実行されることはないと思いますが、屋外で使うアプリなので、電波の状況によっては時間がかかる可能性がありました。そのため、Apps Scriptのコードを実行する時間をできるだけ短くするように、コードの最適化は必須でした。

ちなみに、Apps Scriptのクオータは、Google Workspaceの有料アカウントを持っている場合は、無料アカウントよりも緩和されます。例えば、合計実行時間は6時間、URLの呼び出し回数は10万回までになります。

そして、Apps Scriptのアプリは、「実行者」を選択することができ、「アプリを使うユーザー」ではなく「アプリの所有者」として実行することも可能です。（というより、デフォルトは「アプリの所有者」として実行されます。）
この場合、アプリの所有者のクオータが適用されるため、アプリの所有者がGoogle Workspaceの有料アカウントを持っていれば、Google Workspaceの上限が適用されます。

…が、今回の場合50人分の実行時間全てが管理者のクオータの範囲内で実行されることになるので、6時間ではむしろ足りない可能性がありました。そのため、Apps Scriptの実行者は、個々のユーザーにして、各ユーザーのクオータを使うようにしました。

Google Apps Script の制限3　- アプリアクセス時に出てくるいろいろなダイアログ

上記の通り、Apps Scriptの実行者を個々のユーザーにしたのですが、それはそれで若干気になることが出てきました。Apps Scriptのアプリを開くと、いろいろなダイアログが出てきます。

• グーグルアカウントログイン
• 「このアプリはGoogleで確認されていません」
• アプリがGoogleデータにアクセスするのを許可する画面
• このブラウザでは動作しない可能性があるという警告（ブラウザによってでてくる）

これらのダイアログは、管理者の権限で実行する場合は出てきませんが、個々のユーザーで実行する場合は出てきます。初回アクセス時のみのダイアログもありますが、スタッフの入れ替わりのたびに指導が必要なこと、スタッフ自身のスマホでアプリを開く必要があることから、これらのダイアログは気になるところでした。

Google Apps Script の制限4　- データベース（スプレッドシート）読み出し時間は改善に限界あり

Apps Scriptは、スプレッドシートのデータを直接操作することができますが、スプレッドシートの読み出し時間は結構かかるという印象があります。
実際にテストデータを入れて計測してみました。

• 1500行のシート
• 400行のシート（マスターデータ）
• 65行のシート（マスターデータ）
• 22行のシート（マスターデータ）

単純にそのままデータを返すだけでも6秒近くかかりました。画面上で、「今日のスケジュール」と「1ヶ月分のスケジュール」を表示切り替えする必要があったので、サーバー側かフロント側、どちらでデータをこねるかを考えましたが、スプレッドシート読み出しが遅いのでフロント側でフィルターをかける方が圧倒的に使い勝手が良いと感じました。

今回は単純なテキストデータのみなので1ヶ月分のスケジュールをまとめてフロントに送ってしまうという選択をしましたが、場合によってはそれではよくないこともあるかもしれません。普通のWebアプリであれば、サーバー側でフィルタリングを行い、必要なデータのみを取得して端末側の負荷を減らすことができます。

Apps Scriptのスプレッドシートをデータベースとして使う場合は、データの量や構造に注意が必要です。

Google Apps Script の制限5　- 権限の設定

Apps Scriptのアプリからスプレッドシートのデータを操作する場合、スプレッドシートを操作する権限がそのアカウントに必要です。

そのため、通常管理者だけ確認できればよいような管理用スプレッドシートに、スタッフのアクセス権限を付与しなくてはならなくなります。
アプリの実行者を管理者にしておけば、管理者だけがアクセスできるようにすることも可能ですが、今回はクオータの関係で、アプリの実行者を個々のユーザーにしたため、管理者用のスプレッドシートにもスタッフがアクセスできるようにしなければなりませんでした。

個人情報を含むようなデータを扱っているわけではないので、スタッフが管理用のスプレッドシートにアクセスできてしまうことは許容しましたが、本来は、管理者だけがアクセスできるようにしたいところです。セキュリティ的に気になるところでした。

スケジュールと日報は一覧をGoogle Looker Studioで確認

スケジュールと日報の一覧は、Google Looker Studioを使って作成しました。

Google Looker Studioは、Google Workspaceとして直接組み込まれているわけではありませんが、Googleのさまざまなサービスからデータを直接取り込むことができます。

データの可視化ツールで、スプレッドシートなどのデータソースからデータを取得し、一覧表を作成することができます。
つまりレポートツールです。
最初はスプレッドシートの関数を使って、別シートから色々データを取得して一覧を作成する、

もしくは、Apps Scriptでスプレッドシートのデータを加工して一覧を作成しようと考えていました。
しかし、複数のマスターシートを統合するのには、スプレッドシートの関数では限界がありました。

また、Apps Scriptでスプレッドシートのデータを加工するのも、Apps Scriptのクオータの関係で、データ量が多いと時間がかかりすぎてしまう可能性がありました。

Google Looker Studioのメリット

Google Looker Studioは、スプレッドシートのデータを直接取り込むことができ、ブレンドという機能を使って、複数のデータソースをノーコードで統合することができます。
今回は単純な表形式で作成しましたが、グラフを追加したりすることもできます。

しかも、Apps Scriptでは懸念点だった読み出しスピードも問題なく、わりとサクサク動きました。日付フィルターやソート、カラムごとにテキスト検索など、機能も悪くありません。

Google Looker Studioの物足りない点

UIにはちょっと不満を感じました。
レスポンシブに最低限対応しているものの、日付フィルターの幅が広くて押せないボタンがあったり、基本的にはPCで使うことを前提に作られている印象があります。

また、スタイルはスタイルの設定パネルで設定できますが、決まった項目の変更にのみとどまり、細かなカスタマイズはできません。とりわけ、表の高さが自動ではないのが気になりました。閲覧者のPCに合わせて高さのスタイルを調整する必要がありました。

まとめ 通常のWebアプリと比べてGoogle Apps Scriptアプリで注意すべき点

Googleサービスは非常に便利で、特にスプレッドシートやGoogleフォームなどのツールを使うことで、アプリケーション開発のコストを大幅に削減することができます。

しかし、今回の開発を通じて、要件によってはクオータの制限を気にしなければいけないことや、UIのカスタマイズの自由度の低さ、セキュリティ面での懸念など、いくつかの制限があることも実感しました。

そして、共通して言えるのは、アプリを使う管理者のITリテラシーが必要になるということです。
エンドユーザー側の画面はApps scriptで作り込むことが可能だとしても、どうしても管理者側の画面はスプレッドシートなどのサービスをそのまま使うことになります。

管理者のITリテラシーがある程度ないと、スプレッドシートを安全に使うことができないし、データベースとして使うのは危険です。

また、UIをカスタマイズすることもほぼできないので、若干遠回りな操作になる可能性もあります。

そのあたりを考慮して、Google Workspaceのツールを使うかどうかを検討する必要があると思いました。