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

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にパラメーターを付加して処理してあげる必要があります。

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

GAS_Web_01

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

GAS_Web_02
GAS_Web_03
GAS_Web_04

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ドキュメントにカスタムメニューを追加します。

GAS_Web_05

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

GAS_Web_06
GAS_Web_07

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

GAS_Web_08

入力フォームにテキストを入力して「ドキュメントへ反映」ボタンを押すと、Googleドキュメントに該当の文字が反映されます。ドキュメント反映時に段落の方はハイライトの色を変更してみます。ボタンを押した分だけ値が反映されていることがわかります。

GAS_Web_09

次に、ダイアログメニューの方を変更します。ダイアログメニューでは、Googleドキュメントの内容を取得できるようにします。また、ダイアログメニュー上で取得したテキストをクリックしたら、「テキスト削除済み」という文字に変更するようにしてみます。

GAS_Web_10

上記のダイアログで「ページの要素一覧を表示」を押すと、下記のようにGoogleドキュメント内のテキストを取得できます。

GAS_Web_11

さらに、それぞれのテキストをクリックすることで、該当テキストの値の変更を行います。ここでは「テキスト削除済み」の文言に変更しています。

GAS_Web_12

いかがでしょうか?この他にもできることは様々にあります。今後も定期的にこのブログでGASでできる様々なことをアップデートしていきます。また、こんなことはできないの?といった疑問やご質問、ご意見などあればコメント欄かお問い合わせ頂けますようお願いいたします。

なお、冒頭でもご説明しましたように、上記で紹介したGoogle Apps Scriptをご利用になれたい方は、お問い合わせフォームよりご連絡いただければ、ファイルをシェアいたします。お気軽にご連絡ください!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA