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

机の上のパソコン プログラミング

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

2つのファイルは「コード.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ページは、クライアント側からサーバ側にリクエストを送って、サーバ側がリクエストに応じて処理を行い、サーバ側がリクエスト側にレスポンスを返して表示されます。

  • クライアント:お客さん。Webブラウザ。
  • サーバ:提供する人。Web上のコンピュータ。

具体的に言うと

  1. Webブラウザ(クライアント)でURLを入力(リクエスト)する。
  2. Web上のコンピュータ(サーバ)がWebページを準備する。
  3. Web上のコンピュータがWebブラウザにページ情報を返す。
  4. Webブラウザがページを表示する。

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

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

  1. ピザ屋に電話をかけて、ピザを注文します。
  2. ピザ屋は注文を受け、ピザを作ってあなたに届けます。

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

  • ピザ屋の電話番号=URL
  • ピザ屋=サーバ
  • ピザ=HTMLファイル

HTMLとは

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

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

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

  • 本文
  • 見出し
  • 段落
  • フォントの種類、色、大きさ

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

  • <html>:HTMLであることを示す。
  • <head>:タイトルや文字コードなどのページ情報。ページには表示されません。
  • <body>:ページに表示される内容。

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

GASで作った2つのファイル

index.html

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

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

<!DOCTYPE html> 

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

<html>
  省略
</html>

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

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

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

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

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

コード.gs

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

Function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}  
  • doGet() { 処理 }:URLにアクセスがあったときに処理が実行される
  • return:後ろに書かれている値を呼び出し元に返す
  • HtmlService:GASで提供されているHTMLファイルを操作する仕組み
  • createHtmlOutputFromFile(ファイル名):ファイル名で指定したファイルから、クライアントに返すHTMLファイルを作成する方法

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

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

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

まとめ

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

  1. 表示したいURLにアクセスして、HTMLファイルをリクエストする
  2. リクエストがあれば、サーバがHTMLファイルを返す
  3. HTMLファイルをもとにブラウザがページを表示する。

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

タイトルとURLをコピーしました