GoogleAppsScriptとGoogleスプレッドシートを連携したWEBアプリケーションを作成してみた【第二回】

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

###以下のスプレッドシートを作成します。今回作成するGASはスプレッドシートIDを利用しますので、ファイル名は何でも構いません。
![スプレッドシート1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321513/e289d0c8-0856-a2a6-fa27-dbcd12ddad6a.png)

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

##スプレッドシートのデータをGASで取得して表示します
###まずはコード.gsの編集をします。
前回作成したコード.gsにfunction getData()を追加します。

```JavaScript:コード.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セルの値を指し示しています！！！！スプレッドシートを二次元配列に置き換えているイメージになります。イメージ伝わるでしょうか。

```html: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をクリックするとブラウザに以下の表示がされます。
![スプレッドシート2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321513/44cc0f5a-bf7e-b200-6b68-3b0526ae33eb.png)

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

```html: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をクリックするとブラウザに以下の表示がされます。
![スプレッドシート3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321513/012d0515-61fc-44b4-2f17-4cdc7951620c.png)

###ちょっと、ソースコードが間延びしてしまったので、forループでグルグルして出力するようにコードを修正しました。
####（注）このソースコードを利用するためには、Chrome V8 ランタイムを無効にする必要があります。

```html: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 ランタイムを有効にする場合には、こちらのソースコードになります

```html: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からスプレッドシートへのデータ追加を実装していきます。