【GAS・HtmlService】スプレッドシートから取得したデータをWebアプリで表示

超単純なWebアプリを作りたい時、わざわざサーバーやDBを用意するのは面倒ですよね。

そこで、Google Apps ScriptのHtmlServiceを試してみました。

スプレッドシートをデータベースにして、GASでHtmlの生成、スプレッドシートからのデータ取得などを行います。

Googleアカウントさえあれば、環境構築も不要だし、全部ブラウザ上で作れちゃうから気楽だね～

今回作ったWEBアプリについて
作成手順について

今回作ったWEBアプリについて

IPAの情報処理技術者試験の結果照会サイトみたいなイメージです。
受験番号と、パスワード（受験票に記載されてた）を入力すると、採点結果が表示されるという感じ。

それだけです。

お試しとして公開しています。
テストユーザー１　受験番号：TEST001　パスワード：kB2en9SK
テストユーザー２　受験番号：TEST002　パスワード：Ez837h2F

HtmlServiceで作成したサンプルアプリ — 受験番号とパスワードを入力して、結果照会を押すと・・・

作成手順について

ここから作り方を説明しますが、セキュリティ等は完全度外視ですので、間違ってもこの記事の内容をそのまま仕事で使ったりしないようにしてください　笑。

データベース（スプレッドシート）を作成する

まずは、データベースとするスプレッドシートを作成しました。

HtmlServiceを試すのが主目的なので、セキュリティとか無視してます。パスワードも平文です。

Google Apps Scriptでコーディングする

スプレッドシートのツール > スクリプトエディタを起動します。

今回のアプリの画面は、①受験番号とパスワードを入力する画面、②採点結果を表示する画面の２つあります。
その２つの画面のために、①index.html、②result.htmlを作成しました。

コード.gs

function doGet() {
  const htmlTemplate = HtmlService.createTemplateFromFile('index');
  htmlTemplate.errorMsg = "";
  return htmlTemplate.evaluate();
}

function doPost(e) {
  const sheet = SpreadsheetApp.openById("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx").getSheetByName("DB");
  const data = sheet.getDataRange().getValues();

  let examNum;
  let result;
  let score;
  let htmlTemplate;

  for ( const record of data ){
    if ( e.parameter.examNum == record[0] && e.parameter.password == record[1] ){
      examNum = record[0];
      result = record[2];
      score = record[3];
      break;
    }
  }

  if ( result && score ){
    htmlTemplate = HtmlService.createTemplateFromFile('result');
    htmlTemplate.examNum = examNum;
    htmlTemplate.result = result;
    htmlTemplate.score = score;
  } else {
    htmlTemplate = HtmlService.createTemplateFromFile('index');
    htmlTemplate.errorMsg = "受験番号またはパスワードが誤っています";
  }

  return htmlTemplate.evaluate();
}

* xxxxxxxxxxxxx…の部分は、スプレッドシートのIDを入力

doGetは、このWEBアプリにアクセスしてきた時に実行される関数です。
index.htmlをテンプレートとしてhtmlを生成します。

また、index.htmlにはエラーメッセージを表示する場所を用意していますので、そのメッセージを渡してあげる必要があります。初回アクセス時は当然エラーなしですので、htmlTemplate.errorMsg = “”;としています。

doPost(e)は、結果照会ボタンを押した際に呼び出されます。
フォームに入力された受験番号とパスワードは、e.parameter.名前で参照できます。
その値を元に、スプレッドシートを検索し、一致するデータを取得しています。

データが見つかった場合は、result.htmlからhtmlを生成（受験番号、合否、点数を受け渡す）。
見つからなかった場合は、index.htmlからhtmlを生成（エラーメッセージを受け渡す）。

と言う感じです。

index.html

*簡略化するため、style関連の部分は省略しています

<!DOCTYPE html>
<html lang="ja">
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>結果照会サイト</title>
  </head>
  <body>
    <header>
      <h1>結果照会サイト</h1>
    </header>
    <form action="https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec" method="post">
      <p><?=errorMsg ?></p>
      <div>
        <label for="exam-num">受験番号</label>
        <input type="text" name="examNum" required>
      </div>
      <div>
        <label for="exam-num">パスワード</label>
        <input type="password" name="password" required>
      </div>
      <div>
        <input type="submit" value="結果照会">
      </div>
    </form>
  </body>
</html>

* xxxxxxxxxxxxx…の部分は、作成したWEBアプリのIDを入力（後述）

<?=errorMsg ?>の部分は、コード.gsから受け取ったerrorMsgの値が出力されます。

result.html

*簡略化するため、style関連の部分は省略しています

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>結果照会サイト</title>
  </head>
  <body>
    <header>
      <h1>結果照会サイト</h1>
    </header>
    <h2>採点結果</h2>
    <table>
      <tbody>
        <tr>
          <td>受験番号</td>
          <td><?=examNum ?></td>
        </tr>
        <tr>
          <td>合否</td>
          <td><?=result ?></td>
        </tr>
        <tr>
          <td>点数</td>
          <td><?=score ?> 点</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<?=examNum ?>、<?=result ?>、<?=score ?>の部分は、コード.gsから受け取った値が出力されます。