GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説

photo credit: Infomastern Lined up via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

GASユーザーのためのHTML・CSSによるWebページ制作入門をシリーズでお伝えしています。

前回の記事はコチラです。

Google Apps Scriptで最も簡単なWebページを作成して公開する

GASユーザーかつHTMLページ・CSS初心者向けにWebページの作り方の基本中の基本を解説していきます。まず、その最初の一歩として、GASで最も簡単なWebページを作成して公開する方法をお伝えします。

GASで最も簡単なWebページを作成して公開する方法をお伝えしました。

ただ、ひとまず手順はお伝えしたのですが、実際作成したコードがいったいどんなものなのか…気になりますよね。

今回は、GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説をしていきますよ！

では、行ってみましょう！

前回作成したコードとそのページ
GASでHTMLによる静的なWebページを表示する
まとめ
連載目次：GASユーザーのための初めてのHTML・CSS講座

前回作成したコードとそのページ

前回、GASのプロジェクト内に作成したファイルは二つあります。

一つは、こちらのHTMLファイル「index.html」。

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

ほとんど、スクリプトエディタでHTMLファイルを作成したときに入力されている内容で、実際に編集したのは、以下の部分だけでした。

<h1>Hello HTML!</h1>

もう一つが、いわゆるGASのスクリプト「コード.gs」。以下のようにdoGetという関数を作成しました。

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

この状態でウェブアプリケーションとして公開、そのURLにアクセスすると、以下のようなWebページを確認することができます。

ここまでが前回のおさらいです。

今回は、後者の「コード.gs」のスクリプトについて解説をしていきますよ。

GASでHTMLによる静的なWebページを表示する

doGet関数とは

まず、doGet関数ですね。

GASでは決められた関数名でスクリプトを作成することで、何らかの「イベント」が発生したときに、そのスクリプトを実行させることができるようになります。

そのような仕組みを「シンプルトリガー」と言います。

※トリガーには、シンプルトリガーとインストーラブルトリガーとがあります。インストーラブルトリガーについては、以下の記事をご参考ください。

【初心者向けGAS】時限式のイベントトリガーを設置して決まった時刻にBotを送信する方法

初心者向けGoogle Apps Scriptのシリーズとして、名言Botの作成の方法をお伝えしています。今回は、時限式のイベントトリガーを設置して決まった時刻にChatworkにBot送信する方法です。

それで、そのシンプルトリガーにはいくつかの種類が用意されていますが、公開したWebアプリケーションのURLにアクセスがあったときに、自動でスクリプトを実行させる関数が用意されていて、それがdoGet関数というわけです。

Htmlサービスとは

さて、次にHtmlサービスについて説明をしましょう。

GASでHTMLファイルを操作する機能を提供しているのがHtmlサービスです。

Htmlサービスを使う場合は、オブジェクトHtmlServiceからアクセスをすることになります。

それで、HtmlサービスはWebページを作成、表示するときだけでなく、ダイアログやサイドバーなどのUIを作成するときにも使います。

ですから…覚えておいて損はない！ですよ～。

HTMLファイルからHtmlOutputオブジェクトを生成する

そして、そのHtmlServiceオブジェクトに対して、createHtmlOutputFromFileメソッドというめっちゃ長いメソッドを実行していますね。

このメソッドは、プロジェクト内の指定のHTMLファイルから、HtmlOutputオブジェクトを生成するメソッドです。

HtmlService.createHtmlOutputFromFile(ファイル名)

ファイル名には拡張子「.html」は不要です。

HtmlOutputオブジェクトをdoGet関数でreturnすることで、ブラウザにそのWebページを表示してくれるというわけです。

HtmlOutputオブジェクトとは

ていうか、そもそもHtmlOutputオブジェクトとは、何でしょう？

少しWebページの作成方法に詳しい方なら、「HTMLなんてただのテキストデータなんだから、そのままブラウザに表示すりゃいいじゃん、なんでわざわざそんなややこしそうなオブジェクトが必要なのか？」と思うかも知れません。

その理由はこうです。

GASでWebページを表示する場合、セキュリティ上の理由から、直接ブラウザにHTMLを表示することはせずに、Googleのほうで「サニタイズ」という処理を施してからブラウザに渡すことにしているんですって。

その、「サニタイズ」をするメソッドがcreateHtmlOutputFromFileメソッドであり、HTMLファイルをサニタイズしたものがHtmlOutputオブジェクト、というわけですね。

まとめ

以上、GASでWebページを表示するdoGet関数の作り方とその内容について解説をしました。

doGet関数は、公開したウェブアプリケーションのURLにアクセスがあったときに、自動で実行される関数です。

Htmlサービスは、GASでHTMLを操作するための機能で、ダイアログやサイドバーを作成するときにもお世話になります。

ブラウザにreturnするのはGoogle側でアレコレして安全に表示できる状態になったHtmlOutputオブジェクトです。

次回は、HTMLのほうを解説していきますね。

GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説

GASユーザーのためのはじめてのHTML・CSSによるWebページ入門です。今回は、HTMLやタグとは何か、またGASで作成した最も簡単なWebページのHTMLファイルの内容について解説をしていきます。

どうぞお楽しみに！

連載目次：GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ！