ホーム / R03地区別セミナー /

【地区別⑥】GASの活用 Webアプリの作成

2021/08/16

GAS R03地区別セミナー

今回は、GASによるWebアプリの作成について紹介します。

はじめに

Webアプリについて

GASには、ユーザーがサーバーを用意することなく、手軽にWebアプリを作成できる機能があります。

スプレッドシートやフォームとの連携も可能で、スプレッドシートを簡易的なデータベースに見立てたアプリ等を作成することができます。

Webアプリの作例はネットの情報でたくさん転がっています。勤怠管理システムやオリジナルのBotなどを作っている人が多いようです。

ここでは、Webアプリの紹介例として、簡単な小テストシステムの構築を行っていきます。

プロジェクトの準備

実習用のプロジェクトを作成しましょう。

スプレッドシートのコンテナバインドスクリプトを作成します。

スプレッドシート名、プロジェクト名は任意です。「Webアプリ練習」などでよいでしょう。

index.htmlの作成と公開

公開用のhtmlファイルを作成し、公開します。

index.htmlの作成

プロジェクトを開き、「ファイル」の右の「＋ボタン」をクリックします。「HTML」を選択し、ファイル名を「index」とします。

index.htmlに適当な内容を記述します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello World !</h1>
  </body>
</html>

doGet関数の作成

コード.gsに、以下の内容を記述します。

コード.gs
function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

WebアプリのURLにアクセスがあると、doGet関数がリクエストを受け取り、処理を行います。

そして、HtmlService.createTemplateFromFile("index").evaluate()でhtmlが生成され、ブラウザで表示されます（詳細は省きます）。

Webアプリの公開

画面右側の「デプロイ」から、「新しいデプロイ」を選択します。

歯車ボタンから、「ウェブアプリ」を選択します。

「ウェブアプリケーションにアクセスしているユーザー」、「兵庫県教育委員会・・・の全員」を選択し、「デプロイ」します。

アプリのURLをコピーしておきます。

コピーしたURLにアクセスすると、Webページが表示されます。

複数ページのアプリケーションを作成する

GASのWebアプリでは、基本的に一つhtmlしか表示できませんが、少し工夫すると複数ページあるように見せかけることができます。

doGet関数を以下のように修正します。

コード.gs
function doGet(e) {
  var page = e.parameter['page'];
  
  // index
  if (page == 'index' || page==null) {
    var tpl = HtmlService.createTemplateFromFile('index');
    return tpl.evaluate();
  }
  // next page
  else if (page.includes('next')) {
    var tpl = HtmlService.createTemplateFromFile('next');
    return tpl.evaluate();
  }
}

次に、２番目のhtmlファイルを作成します。適当にnext.htmlとしておきます。next.htmlへのリンクの部分は、[WebアプリのURL]?page=nextなどとします。先ほど作成したhtmlのファイル名がnext.htmlなので、揃える形です。

next.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Next Page !</h1>
  </body>
</html>

最後に、index.htmlを以下のように修正します。

next.htmlへのリンクの部分は、[WebアプリのURL]?page=nextなどとします。先ほど作成したhtmlのファイル名がnext.htmlなので、揃える形です。

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello World !</h1>
    <a href="https://script.google.com/a/macros/hnd.hyogo-c.ed.jp/s/AKfycbxNrpFRAU7-49fFFpMP4OxfqyGABcVt9XU0XMxuozUmQ3EF4p3fUZE56ZbaVbhD3N97-Q/exec?page=next">Next Pageへ</a>
  </body>
</html>

デプロイすると、２番目のページに飛ぶことができます。

おわりに

GASによるWebアプリの作成について紹介しました。

QooQ