みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
GASユーザーのためのHTML・CSSによるWebページ制作入門をシリーズでお伝えしています。
前回の記事はコチラです。
GASで最も簡単なWebページを作成して公開する方法をお伝えしました。
ただ、ひとまず手順はお伝えしたのですが、実際作成したコードがいったいどんなものなのか…気になりますよね。
今回は、GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説をしていきますよ！
では、行ってみましょう！
前回作成したコードとそのページ
前回、GASのプロジェクト内に作成したファイルは二つあります。
一つは、こちらのHTMLファイル「index.html」。
Hello HTML!
ほとんど、スクリプトエディタでHTMLファイルを作成したときに入力されている内容で、実際に編集したのは、以下の部分だけでした。
Hello HTML!
もう一つが、いわゆるGASのスクリプト「コード.gs」。以下のようにdoGetという関数を作成しました。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
この状態でウェブアプリケーションとして公開、そのURLにアクセスすると、以下のようなWebページを確認することができます。
ここまでが前回のおさらいです。
今回は、後者の「コード.gs」のスクリプトについて解説をしていきますよ。
GASでHTMLによる静的なWebページを表示する
doGet関数とは
まず、doGet関数ですね。
GASでは決められた関数名でスクリプトを作成することで、何らかの「イベント」が発生したときに、そのスクリプトを実行させることができるようになります。
そのような仕組みを「シンプルトリガー」と言います。
※トリガーには、シンプルトリガーとインストーラブルトリガーとがあります。インストーラブルトリガーについては、以下の記事をご参考ください。
それで、そのシンプルトリガーにはいくつかの種類が用意されていますが、公開したWebアプリケーションのURLにアクセスがあったときに、自動でスクリプトを実行させる関数が用意されていて、それがdoGet関数というわけです。
Htmlサービスとは
さて、次にHtmlサービスについて説明をしましょう。
GASでHTMLファイルを操作する機能を提供しているのがHtmlサービスです。
Htmlサービスを使う場合は、グローバルオブジェクトHtmlServiceからアクセスをすることになります。
それで、HtmlサービスはWebページを作成、表示するときだけでなく、ダイアログやサイドバーなどのUIを作成するときにも使います。
ですから…覚えておいて損はない！ですよ～。
HTMLファイルからHtmlOutputオブジェクトを生成する
そして、そのHtmlServiceオブジェクトに対して、createHtmlOutputFromFileメソッドというめっちゃ長いメソッドを実行していますね。
このメソッドは、プロジェクト内の指定のHTMLファイルから、HtmlOutputオブジェクトを生成するメソッドです。
ファイル名には拡張子「.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のほうを解説していきますね。
どうぞお楽しみに！