Google Apps ScriptでWebアプリのシステムを開発する

Google Apps Scriptでは、Webアプリケーションの開発も行えます。GoogleスプレッドシートなどのGoogle Workspaceのアプリ内でのWeb UI化もできますし、HTMLページとしての公開も行えます。GASでは一般的なウェブ言語（HTML、CSS、JavaScript）を使って開発を行えます。必要に応じて、BootstrapやVueといったフレームワークを活用することで、よりモダンなWebアプリを構築することもできます。

今回のブログでは、公式リファレンスを確認しつつGoogle Apps Script(グーグルアップススクリプト、GAS）を使ってどんなウェブアプリケーションの開発ができるのかをまとめていきたいと思います。

本エントリーの想定読者は、開発者ではなく、GASを使うと具体的にどんな事ができるのかイメージを膨らませたいという読者向です。そのため、以下の説明ではソースコードについては省略し、実際の実行結果の画面とGoogle Apps Scriptのスクリプトエディタに表示されるログの結果を元に説明を進めたいと思います。もし本エントリーのファイルやソースコードについて確認したいという方がいらっしゃいましたら、お問い合わせフォームよりご連絡いただければ幸いです。

Google Apps ScriptでメニューつきのWebページを公開する

Google Apps Scriptを用いてHTMLページ（Webページ）を作成する際に単一のページを作るだけであれば、doGetという関数を用いて作成したhtmlファイルを読み込ませればすんなり表示してくれます。しかしながら、複数ページとなると少し工夫が必要になります。というのも、GASのWebページを公開した際に生成されるURLは一つだけとなっているためです。ページ遷移を実現するにはURLにパラメーターを付加して処理してあげる必要があります。

細かい実装方法は省略しますが、サンプルページはこちらよりご確認いただけます。

ページ上部にあるそれぞれのメニューをクリックすると以下の各ページへ擬似的に遷移します。

Google Apps ScriptでGoogleドキュメントにHTMLのサイドバーやダイアログを追加し動的処理を行う

ここではGoogleドキュメントにサイドバーやダイアログを追加してみます。ここで紹介するサイドバーやダイアログはGAS内のHTMLファイルを読み込み表示をさせています。HTML内で入力内容を受け付けるフォームやボタン動作の受け付けをすることで、Googleドキュメント内に値を反映させていくということをやっていきます。

なお、題材としてGoogleドキュメントで行っていますが、サイドバーやダイアログを追加することは、Googleドキュメント以外に、Googleスプレッドシート、Googleフォーム、GoogleスライドといったGASでのUI追加に対応しているGoogle Workspaceのアプリであれば同様のことが実現できます。

Google Apps ScriptでGoogleドキュメントにHTMLで構築したサイドバーやダイアログを表示する

まずは、Googleドキュメントにカスタムメニューを追加します。

「サイドバー」と「ダイアログ」のメニューをそれぞれ実行すると、HTMLファイルに反映した本文テキストやGASで指定したタイトルが表示されます。

次に「サイドバー」の方を変更してみたいと思います。サイドバーで「見出し」「段落」を入力し、「ドキュメントへ反映」ボタンを押すと、Googleドキュメント側に内容が反映されるというものにしてみます。まずはサイドバーに入力フォームを追加します。また、HTMLそのままだと見た目があまりきれいではないので、CSSで背景色などの設定を行います。