スプレッドシートに記載されたデータを表形式でHTML出力する方法について書きます
こんにちは。システムエンジニアのDiavoloです。
チーム内で利用するWEBアプリケーションを作成しましたので、備忘録として作成方法を記事にします。主な利用目的としましては、課題に対する対応を記録しておいて、閲覧、更新できるようにするWEBアプリケーションです。完成までを複数の記事に分けて投稿する予定です。
第二回目の記事としましては、スプレッドシートのデータを取得して表示するところまでを書いていきます。スプレッドシートをデータベースの代わりに使用します。
以下のスプレッドシートを作成します。今回作成するGASはスプレッドシートIDを利用しますので、ファイル名は何でも構いません。
スプレッドシートのデータは手入力して下さい。WEB+DBであれば、データベースに直接Insert文を投入してデータを作成するイメージです。GASからスプレッドシートにデータを追加、変更、削除は次回以降に記事を書きますね！！
スプレッドシートのデータをGASで取得して表示します
まずはコード.gsの編集をします。
前回作成したコード.gsにfunction getData()を追加します。
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セルの値を指し示しています！！！！スプレッドシートを二次元配列に置き換えているイメージになります。イメージ伝わるでしょうか。
<!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は変更不要です。
<!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 ランタイムを無効にする必要があります。
<!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 ランタイムを有効にする場合には、こちらのソースコードになります
<!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からスプレッドシートへのデータ追加を実装していきます。