Webページが表示される仕組み

Googleが提供するスクリプト言語「Google Apps Script（通称、GAS）」。GASでは、２つのファイルで簡単にWebページが作れます。

２つのファイルは「コード.gs」、「index.html」です。

コード.gs

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Webページが表示されました
  </body>
</html>

GASで公開したウェブアプリケーションのURLにアクセスすると「コード.gs」に書かれたスクリプトが動作し、「index.html」をユーザーに返します。そのファイルをもとにページが表示されます。

クライアントとサーバ

Webページは、クライアント側からサーバ側にリクエストを送って、サーバ側がリクエストに応じて処理を行い、サーバ側がリクエスト側にレスポンスを返して表示されます。

具体的に言うと

一般的に、サーバからクライアントに返されるのはHTMLファイルです。

例えば、ピザが食べなくなって、ピザを注文するときは

こういうことがページが表示されるまでに行われています。

HTMLは「Hyper Text Markup Language」の略称です。すごく簡単に言えば、ただの文字にタグで意味を与える言語です。

普段見ているWebページのほとんどは、HTMLで作られています。そのHTMLファイルをもとに、ブラウザがページを表示させています。

タグを使えば、文字に次のような意味を与えることができます。

HTMLは次の３種類のタグで構成されます。

タグの範囲を示すために、<開始タグ>～</終了タグ>で囲みます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Webページが表示されました
  </body>
</html>

作成した「index.html」です。１つずつ見ていきましょう

<!DOCTYPE html>

この文書がHTML５で作成されたことを宣言しています。

<html>
  省略
</html>

<html></html>で囲まれている文書がHTMLであることを示しています。

<head>
  <base target="_top">
</head>

<head></head>で囲まれているのがページ情報を表します。この中に<base target=”_top”>と書かれています。ページ内のリンクの開き方を指定しており、リンク先のページがWebブラウザ全体に単一ページとして開くように指定しています。

<body>
  Webページが表示されました
</body>

<body></body>で囲まれている文字がページに表示されます。Webページに表示したい内容は、ここに書きます。

GASには、ウェブアプリケーションとして導入したURLにアクセスがあったときに動作する関数が用意されています。そのひとつがdoGet関数です。

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

アクセスがあれば、doGet関数が実行されます。doGet関数には処理が書かれています。

GASで提供されているHtmlServiceという仕組みのcreateHtmlOutputFromFileという方法でindexというファイルからHTMLファイルを作成します。

そしてそれを、アクセスもとのクライアントにreturnします。

Webページは、サーバから送られたHTMLファイルをもとに表示されます。仕組みは次のとおりです。

GASでのWebアプリの具体的な作り方はこちら