スプレッドシートに記載されたデータを表形式でHTML出力する方法について書きます

こんにちは。システムエンジニアのDiavoloです。
チーム内で利用するWEBアプリケーションを作成しましたので、備忘録として作成方法を記事にします。主な利用目的としましては、課題に対する対応を記録しておいて、閲覧、更新できるようにするWEBアプリケーションです。完成までを複数の記事に分けて投稿する予定です。
第二回目の記事としましては、スプレッドシートのデータを取得して表示するところまでを書いていきます。スプレッドシートをデータベースの代わりに使用します。

以下のスプレッドシートを作成します。今回作成するGASはスプレッドシートIDを利用しますので、ファイル名は何でも構いません。

スプレッドシートのデータは手入力して下さい。WEB+DBであれば、データベースに直接Insert文を投入してデータを作成するイメージです。GASからスプレッドシートにデータを追加、変更、削除は次回以降に記事を書きますね！！

スプレッドシートのデータをGASで取得して表示します

まずはコード.gsの編集をします。

前回作成したコード.gsにfunction getData()を追加します。

コード.gs

function doGet() {
  var tpl = HtmlService.createTemplateFromFile('index');
  return tpl.evaluate();
}
function getData() {
  // スプレッドシートの取得
  var sheet = SpreadsheetApp.openByUrl("スプレッドシートのURL")

  // データの取得
  var sheetName = 'シート1';
  var values = sheet.getSheetByName(sheetName).getDataRange().getValues();

  return values;
}

スプレッドシートのURLは先程作成したスプレッドシートを開いているときのURLバーに表示されているURLをコピーして貼り付ければオッケーです。
(例)エイチはhに読み替えて下さいね。
エイチttps://docs.google.com/spreadsheets/d/hogehogefugafugawowwowowowowfugahogehogewow/edit#gid=0

つぎはindex.htmlを編集します。

ポイントとしては、コード.gsに作成したfunctionをコールすることです。～ ?>で囲んでコールします。今回のGASでは、取得したデータはv変数dataに保存していますので、= ～ ?>で表示することができます。data[0][0]はスプレッドシートのA1セル、data[0][1]はA2セル、data[5][2]はC6セルの値を指し示しています！！！！スプレッドシートを二次元配列に置き換えているイメージになります。イメージ伝わるでしょうか。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <?= data[0][0] ?>
  <?= data[0][1] ?>
  <?= data[0][2] ?><br>
  <?= data[1][0] ?>
  <?= data[1][1] ?>
  <?= data[1][2] ?><br>
  <?= data[2][0] ?>
  <?= data[2][1] ?>
  <?= data[2][2] ?><br>
  <?= data[3][0] ?>
  <?= data[3][1] ?>
  <?= data[3][2] ?><br>
  <?= data[4][0] ?>
  <?= data[4][1] ?>
  <?= data[4][2] ?><br>
  <?= data[5][0] ?>
  <?= data[5][1] ?>
  <?= data[5][2] ?><br>
  </body>
</html>

セーブしてデプロイしましょう。出来上がったURLをクリックするとブラウザに以下の表示がされます。

はい。パチパチパチ。無事にスプレッドシートからデータを取得して、ブラウザに表示させることが出来ました～。う～ん、ちょっと見た目が素っ気ないので、テーブルに表示させます。index.htmlを編集します。コード.gsは変更不要です。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <tr>
      <th><?= data[0][0] ?></th>
      <th><?= data[0][1] ?></th>
      <th><?= data[0][2] ?></th>
    </tr>
    <tr>
      <th><?= data[1][0] ?></th>
      <th><?= data[1][1] ?></th>
      <th><?= data[1][2] ?></th>
    </tr>
    <tr>
      <th><?= data[2][0] ?></th>
      <th><?= data[2][1] ?></th>
      <th><?= data[2][2] ?></th>
    </tr>
    <tr>
      <th><?= data[3][0] ?></th>
      <th><?= data[3][1] ?></th>
      <th><?= data[3][2] ?></th>
    </tr>
    <tr>
      <th><?= data[4][0] ?></th>
      <th><?= data[4][1] ?></th>
      <th><?= data[4][2] ?></th>
    </tr>
    <tr>
      <th><?= data[5][0] ?></th>
      <th><?= data[5][1] ?></th>
      <th><?= data[5][2] ?></th>
    </tr>
  </table>
  </body>
</html>

セーブしてデプロイしましょう。出来上がったURLをクリックするとブラウザに以下の表示がされます。

ちょっと、ソースコードが間延びしてしまったので、forループでグルグルして出力するようにコードを修正しました。

（注）このソースコードを利用するためには、Chrome V8 ランタイムを無効にする必要があります。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <?
      for(var i=0; i < data.length; i++){
        output.append('<tr>');
        output.append('<th>' + data[i][0] + '</th>');
        output.append('<th>' + data[i][1] + '</th>');
        output.append('<th>' + data[i][2] + '</th>');
        output.append('</tr>');
      }
    ?>
  </table>
  </body>
</html>

ちなみに、Chrome V8 ランタイムを有効にすると以下のエラーになります

TypeError: output.append is not a function
このエラーを回避するソースコードは以下になります。

Chrome V8 ランタイムを有効にする場合には、こちらのソースコードになります

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <?
      for(var i=0; i < data.length; i++){
        output._=('<tr>');
        output._=('<th>' + data[i][0] + '</th>');
        output._=('<th>' + data[i][1] + '</th>');
        output._=('<th>' + data[i][2] + '</th>');
        output._=('</tr>');
      }
    ?>
  </table>
  </body>
</html>

ちょっとそれっぽく（WEBアプリっぽく）なってきましたかね？第二回の記事はこれで終わります。次回以降はWEBからスプレッドシートへのデータ追加を実装していきます。