【完全解説】GASでWebアプリを作る方法(簡単なWebページ)

GoogleAppscript(GAS)はグーグルが提供するスクリプトサービスで、スプレッドシートを自動処理するプログラムが作成できます。さらにExcelのマクロのような事だけでなく、GASを使って作成したスクリプトを、Webブラウザ上で動作するWebアプリケーションとして公開することも可能です。GoogleAppsScriptの実行は、Googleのサーバ上で行いますから、通常のWeb開発のようにレンタルサーバを用意したり、Webサーバをたてたりする必要もありません。これからWebアプリの開発に取り組みたい方は、開発環境としてGASを使ってみるのも一つの方法となります。ここでは、GASを使って簡単なWebページを公開しながら、GASウェブアプリケーションのデプロイと公開方法について解説します。

web公開の流れ

ユーザーがGASアプリのURLをクリックすると、ブラウザがこれを解析してGoogleクラウドサーバーに「HTMLを下さい」というGETリクエストを送信します。
GASはブラウザからのリクエストを受け取るとルール(シンプルトリガー)に従い「doGet関数」を実行します。Spreadsheetから必要なデータを読み込む等、送り返すWebページを作るための準備をします。
doGet()の最後にHTML文書をreturnすることで、それがブラウザへのレスポンスとして送られます。(HtmlOutputオブジェクトをdoGet関数でreturnする)
ブラウザは、レスポンスとして受け取ったHTMLを解析(レンダリング)します。
ユーザーは、Webページが表示されたことを確認します。

[ getメソッドとpostメソッド ]

Webアプリでは、クライアント側がHTTPリクエストを送り、サーバー側がHTTPレスポンスを返すという流れで通信します。HTTPリクエストには主なものとしてGETメソッドとPOSTメソッドがあります。GETメソッドは、指定したURLのページをリクエストする際にURLのあとにデータを付加して送信します。例えばGoogle等で検索すると、URLに検索語句などのデータが含まれています。これは検索キーワードをGETメソッドで送っているためです。

POSTメソッドは、投稿専用のHTTPリクエストでGETメソッドに比べて大容量のデータを送信できます。そしてデータ送信にURLを使わないので閲覧履歴などから送信内容を見られることはありません。用途としてデータを取得する場合にはGET、送る場合にはPOSTといった感じで使い分けをすると良いでしょう。

[ GASのdoGet関数とdoPost関数 ]

GASでは、GETメソッドに対応するdoGet関数、POSTメソッドに対応するdoPost関数を定義し、応答データはHtmlOutputオブジェクトを戻り値にします。この戻り値がHTTPレスポンスとして、サーバーからクライアントへ送出されます。doGet関数もdoPost関数もシンプルトリガーの1種でGASのWebアプリのURLにブラウザからアクセスがあった時に実行されます。

GASでWebページを公開する方法
ページタイトル、ファビコンの変更方法
1. ページタイトルを変更する。
2. ファビコンを変更する。

GASでWebページを公開する方法

それでは、簡単なWebアプリケーションを作成、実行してみます。まず、スクリプトエディターを開きます。

スクリプトエディターを開く

スプレッドシートの作成

まずは新規のスプレッドシートを作成します

ファイル名の変更

ここでは「GASで簡単なWebページを表示する」としています。

AppsScriptの選択

次に「拡張機能」から「Apps Script」を開きます。

プロジェクト名の変更

ここでは「Webページの表示」としています。

引数に書いたHTMLコードを公開

createHtmlOutputメソッドの引数にHTMLを書いて、Webページを表示してみます。

doGet関数を定義

デフォルトで定義されているmyFunction関数は削除して、doGet関数を定義します。doGet関数はHtmlOutputオブジェクトを返す必要があります。

スクリプトの作成

HtmlサービスのcreateHtmlOutputメソッドは、引数に指定したHTMLコードから生成したHtmlOutputオブジェクトを返します(ソースコードをHTML出力用に変換する関数です。)
HtmlOutputオブジェクトはHTMLのデータを保持するもので、セキュリティの問題が起きない様にサニタイズする働きも持ちます。

function doGet() {
  return HtmlService.createHtmlOutput("<h1>Hello! GAS!</h1>");
}

公開

右上の「デプロイ」から「新しいデプロイ」をクリックします。

「ウェブアプリ」の選択

「種類の選択」の歯車アイコンをクリックし、「ウェブアプリ」をクリックします。

設定

以下を設定して、右下の「デプロイ」をクリックします。

「新しい説明文」にわかりやすい説明文を入力します。
ここでは「最初のデプロイ」と入力します。
「次のユーザーとして実行」で「自分（xxxxx@gmail.com）」を選択します。
「アクセスできるユーザー」で「Googleアカウントを持つ全員」を選択

デプロイの完了

公開

ウェブアプリのURLをクリックしてWebページを表示してみましょう。

無事、HTMLファイルの内容が表示されていることが確認できました！

HTMLファイル(静的)を公開

先ほどは、createHtmlOutputメソッドの引数にHTMLを書きましたが、今度はHTMLファイルの内容を表示させてみます。createHtmlOutputFromFileメソッドで指定されたHTMLファイルを公開します。

doGet関数を定義

デフォルトで定義されているmyFunction関数は削除して、doGet関数を定義します。

HTMLファイルの追加

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello! GAS!</h1>
  </body>
</html>

スクリプトの作成

HTMLファイルの内容を表示するには、createHtmlOutputFromFileメソッドを使います。こちらは、HTMLファイルからHtmlOutputオブジェクトを生成して返します。引数にHTMLファイル名を指定しますが、拡張子は不要です。
注意:
createTemplateFromFileの場合にはスクリプトレットが使用できますが、createOutputFromFileの場合には使用することができません。

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

公開

右上の「デプロイ」から「新しいデプロイ」をクリックします。

「ウェブアプリ」の選択

「種類の選択」の歯車アイコンをクリックし、「ウェブアプリ」をクリックします。

設定

以下を設定して、右下の「デプロイ」をクリックします。

「新しい説明文」にわかりやすい説明文を入力します。
ここでは「最初のデプロイ」と入力します。
「次のユーザーとして実行」で「自分（xxxxx@gmail.com）」を選択します。
「アクセスできるユーザー」で「Googleアカウントを持つ全員」を選択

デプロイの完了

公開

ウェブアプリのURLをクリックしてWebページを表示してみましょう。

無事、HTMLファイルの内容が表示されていることが確認できました！

HTMLファイル(動的)を公開

こちらは、createHtmlOutputFromFileではなく、craeteTemplateFromFileメソッドを使います。

craeteTemplateFromFileは、指定のhtmlファイルからHtmlTemplateオブジェクトを生成するメソッドで、HtmlTemplateオブジェクトを使うことでスクリプトレットと呼ばれる動的にHTMLを生成する構文を使うことができます。
(スクリプトレット構文を使うとHTMLの中にGASのコードを埋め込むことができます。)

doGet関数を定義

デフォルトで定義されているmyFunction関数は削除して、doGet関数を定義します。

HTMLファイルの追加

スクリプトの作成

HTMLファイルの内容を表示するには、createTemplateFromFileメソッドを使います。
こちらの場合は、evaluate();を付ける必要があります。引数にHTMLファイル名を指定しますが、拡張子は不要です。

function doGet() {
  const template = HtmlService.createTemplateFromFile("index");
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

[ createHtmlOutputFromFileと、createTemplateFromFileの違い ]

createHtmlOutput～() 系は読み込んだデータからそのまま HtmlOutput を生成します。対して、createTemplate～() 系は HtmlTemplate を生成します。
HtmlTemplateはいわゆるテンプレートエンジンで、外部から動的に値を埋め込んだり条件分岐やループを使用してコンテンツをサーバーサイドで動的に変更することができます。(HtmlTemplate.evaluate()を呼ぶことでHtmlOutputに変換します。）

[ スクリプトの解説 ]

function doGet() {

doGet関数は、デプロイURLにアクセスした際に実行される特殊な関数です。doGet関数の引数eとすることで、デプロイURLにアクセスした際(GETリクエストを送った際に)URLに含まれるクエリやパラメーターを引き渡すことができます。

const template = HtmlService.createTemplateFromFile(“index”)

2行目のHtmlService.createTemplateFromFile(“index”)で、index.htmlファイルを読み込んで結果をtemplateという変数に代入しています。このtemplateは、HTMLとスクリプトが混在した状態のもので、まだこの時点ではブラウザで表示できる状態ではありません。

HtmlServiceとはHtmlServiceオブジェクトのことで、Google Apps Scriptとやり取りをすることができるWebページを作成するためのHTMLファイルを操作する機能とセキュリティ(サニタイズ)を提供してくれます。GASでWebアプリケーションを作成するときは、HtmlServiceオブジェクトを使います。
HtmlServiceオブジェクトのメソッドであるcreateTemplateFromFileは、指定のhtmlファイルからHtmlTemplateオブジェクトを生成するメソッドです。HtmlTemplateオブジェクトは動的にHTMLを構築するためのテンプレートです。HtmlTemplateオブジェクトを使うことでスクリプトレットと呼ばれる動的にHTMLを生成する構文を使うことができます。(スクリプトレット構文を使うとHTMLの中にGASのコードを埋め込むことができます。)

const htmlOutput = template.evaluate();

そこで3行目で、HtmlTemplateオブジェクトをevaluate(評価)することでHtmlOutputという形式のオブジェクトに変換しています。変換されたHtmlOutputオブジェクトはブラウザで表示ができる状態となります。
留意:
evaluate()とはHtmlTemplateオブジェクトをHtmlOutputオブジェクトに変換するメソッドです。HtmlOutputオブジェクトに変換することでWebページを表示できるようになります。

return htmlOutput;

このHtmlOutputオブジェクトをdoGet関数からreturnすることで、Webページに指定したHTMLファイルを表示することができます。なぜHtmlOutputオブジェクトに変換する必要があるかというと、doGet関数の戻り値としてHtmlOutputオブジェクトを返すことがGASで決まっているからです。