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

web

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ファイル「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ページを確認することができます。

GASで作成した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環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定
タイトルとURLをコピーしました