みやもとメモ

「Notion」「Google Apps Script」「ブログカスタマイズ」などについて書いていきます。

目次
目次

GASでWebページを作成する手順(doGet/HtmlService/デプロイ)

この記事をシェアする

今回はGAS(Google Apps Script)に関して書いていきます。

以前もGASに関する記事を書いています(以下リンク)。

miya-moto-memo.hatenablog.com

上記の記事で、GASでスプレッドシートからデータ取得してWebページに表示させています。
プログラムも載せていますが、プログラムの具体的な説明はしませんでした。

今回の記事で、「Webページに表示」の部分を具体的に説明してみます。
プログラムの中身というより、GASにおけるWebページの公開手順について書いていきます。

それでは本題へ。

やりたいこと

記事の冒頭でも触れた通り、GASにおけるWebページの公開手順を書いていきます。
プログラムの内容自体はシンプルに、「Hello World!!!」を表示するだけの機能にしてみます。

Webページに「Hello World!!!」を表示したい

プログラム

プログラムは以下、2ファイルです。

  • コード.gs
  • index.html

コード.gs

/**
 * メイン処理
 */
function doGet() {
  const template = HtmlService.createTemplateFromFile('index');
  template.str = 'Hello World!!!';
  return template.evaluate().setTitle('Hello World');
}

index.html

「index.html」ファイルを追加します。
手順は以下の通りです。


STEP
「+」→「HTML」をクリック
STEP
ファイル名に「index」と入力する
STEP
ファイル名が確定すると、自動でHTMLコードが生成される
STEP
以下のコードに差し替える

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= str ?>
  </body>
</html>

デプロイ

Webページを公開

上記プログラムをデプロイして、Webページとして公開します。


STEP
「デプロイ」→「新しいデプロイ」をクリック
STEP
「歯車マーク」→「ウェブアプリ」をクリック
STEP
「説明文」「実行ユーザー」「アクセスできるユーザー」を決めて「デプロイ」をクリック
※今回は「自分のみ」としました
STEP
ウェブアプリのURLをクリック
STEP
ウェブアプリが開く
※プログラム通り「Hello World!!!」と表示されました

Webページを更新

プログラムを変更しても、そのままWebページに反映されるわけではないようです。
Webページを更新する手順も書いておきます。


STEP
プログラムを変更する
※「Hello World!!! change!!!」に変更しました
STEP
「デプロイ」→「デプロイを管理」をクリック
STEP
「編集」をクリック
STEP
「新バージョン」を選択する
STEP
「デプロイ」をクリック
STEP
「ウェブアプリ」のURLをクリック
STEP
変更した内容がWebページに反映される

Webページをテスト

プログラムを変更する度に、上記の更新手順を繰り返すのは少し面倒です。
バージョンもどんどんカウントアップされてしまいます。

ということで、もう少し簡単な手順で動作確認することができます。


STEP
プログラムを変更する
※「「Hello World!!! test!!!」に変更しました
STEP
「デプロイ」→「デプロイをテスト」をクリック
STEP
「ウェブアプリ」のURLをクリック
STEP
変更した内容がWebページに反映される

動作確認が問題なく、プログラム変更がひと区切りになったら、改めて更新手順の操作を実施するのが良いかなと思います。

プログラム詳細

doGet関数

「doGet関数」または「doPost関数」が含まれていることが、Webアプリを公開するための要件のようです。
今回のプログラムでは「doGet関数」を含めています。

リファレンスをリンクしておきます。
developers.google.com

HtmlService

「HtmlService」で、スクリプトからHTMLに渡すアレコレを操作できます。
developers.google.com

HtmlService.createTemplateFromFile

「HtmlService.createTemplateFromFile」で、ファイルを基にテンプレートを作成します。
今回は「index.html」のテンプレートを作成しています。
developers.google.com

HtmlTemplate.evaluate

「HtmlTemplate.evaluate」で、テンプレートを評価します。
「HtmlTemplate.evaluate」はHtmlOutputオブジェクトを返します。

前述したdoGet関数ではHtmlOutputオブジェクトを返す必要があります。
なのでdoGetの最後の処理は「HtmlTemplate.evaluate」になることが多いかなと思います。
developers.google.com

HtmlOutput.setTitle

「HtmlOutput.setTitle」で、Webページのタイトル(titleタグ)を設定できます。
developers.google.com

おわりに

ということで、「GASでWebページを作成する手順(doGet/HtmlService/デプロイ)」に関してアレコレ書いてみました。

ちょっとしたルールはありますが、把握さえ出来ればサクサクWebページを実装できそうだなと思いました。

この記事が参考になれば幸いです。

関連記事

GAS(Google Apps Script)に関してはいくつか記事にしています。
気になる記事があればぜひ。

GASの活用事例


GASでWebページ(リンク集)を作ってみる - 派生記事

TOPへ戻る HOMEへ