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上のコンピュータ。
具体的に言うと
- Webブラウザ(クライアント)でURLを入力(リクエスト)する。
- Web上のコンピュータ(サーバ)がWebページを準備する。
- Web上のコンピュータがWebブラウザにページ情報を返す。
- Webブラウザがページを表示する。
一般的に、サーバからクライアントに返されるのはHTMLファイルです。
例えば、ピザが食べなくなって、ピザを注文するときは
- ピザ屋に電話をかけて、ピザを注文します。
- ピザ屋は注文を受け、ピザを作ってあなたに届けます。
こういうことがページが表示されるまでに行われています。
- ピザ屋の電話番号=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ファイルをもとに表示されます。仕組みは次のとおりです。
- 表示したいURLにアクセスして、HTMLファイルをリクエストする
- リクエストがあれば、サーバがHTMLファイルを返す
- HTMLファイルをもとにブラウザがページを表示する。
GASでのWebアプリの具体的な作り方はこちら