今回はGAS(Google Apps Script)に関して書いていきます。
以前もGASに関する記事を書いています(以下リンク)。
上記の記事で、GASでスプレッドシートからデータ取得してWebページに表示させています。
プログラムも載せていますが、プログラムの具体的な説明はしませんでした。
今回の記事で、「Webページに表示」の部分を具体的に説明してみます。
プログラムの中身というより、GASにおけるWebページの公開手順について書いていきます。
それでは本題へ。
やりたいこと
記事の冒頭でも触れた通り、GASにおける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」ファイルを追加します。
手順は以下の通りです。
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <?= str ?> </body> </html>
デプロイ
Webページを公開
上記プログラムをデプロイして、Webページとして公開します。
※今回は「自分のみ」としました
Webページを更新
プログラムを変更しても、そのままWebページに反映されるわけではないようです。
Webページを更新する手順も書いておきます。
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ページを実装できそうだなと思いました。
この記事が参考になれば幸いです。