googleスプレッドシートをGoogle Apps ScriptでHTMLページとして出力する


ちょっと機会があって手を出した、googleスプレッドシートの情報を元にwebページ出力させる方法をまとめます。

以下のURLに記載しているようなスプレッドシートの情報を元に、GASを使ってwebページとして出力します。

GASでdoGet,doPostメソッドを作成した上で、ウェブアプリケーションとして公開するとその公開URLにGET,POSTリクエストが投げられた際に、その各メソッドの返り値がブラウザに返されます。
これを使えば、任意のHTMLをブラウザに返すことが出来ます。さらにGASなので、スプレッドシート等の情報を利用して返すことも可能です。

この時、テンプレートとなるHTMLを作成し、そこに任意のコードを記載した状態で動的にページを返すようにもすることが出来ます。
単純にスプレッドシートの中身をそのままHTMLのテーブルとして出力しようとした場合、以下のdogetメソッドと、テンプレートHTMLで実現できます。


function doGet() {
var title="スプレッドシートサンプル";
return HtmlService.createTemplateFromFile('page').evaluate().setTitle(title);
}

view raw

doGet.js

hosted with ❤ by GitHub


<? var data = SpreadsheetApp
.openById('1BqDVWjXT5lYw6UKPcCXlnxPleMkfnwF1Dhe01Icbwdo')
.getActiveSheet()
.getDataRange()
.getValues(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>

view raw

page.html

hosted with ❤ by GitHub

また、テンプレートHTMLには任意のコードを記載できるので、条件に当てはまるものだけを出力するといったことも可能です。以下のコードでは2列目に記述のある行だけを出力するテーブルと、2列目に記述のない行だけを出力するテーブルを分けて出力するようにしています。(テンプレートの記載方法に関しては、公式のhelp等を参考に)


<? var data = SpreadsheetApp
.openById('1BqDVWjXT5lYw6UKPcCXlnxPleMkfnwF1Dhe01Icbwdo')
.getActiveSheet()
.getDataRange()
.getValues(); ?>
<table border="1"><? for (var i = 0; i < data.length; i++) { ?> <? if(data[i][1]){ ?>
<tr><? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td><? } ?>
</tr><? } ?> <? } ?>
</table>
<hr>
<table border="1"><? for (var i = 0; i < data.length; i++) { ?> <? if(!data[i][1]){ ?>
<tr><? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td><? } ?>
</tr><? } ?> <? } ?>
</table>

view raw

page2.html

hosted with ❤ by GitHub

このように単純にそのまま記載した内容を表示するだけでなく、任意の条件で表示させることもでき、かつスプレッドシートの中身を書き換えれば記載内容も修正できるため、簡単な集計ページの作成や、技術者以外の人にも更新作業を簡単に行えるページなどを作る際に良いのではないかと思います。

上記のコードを利用して作成したページを以下に記載します。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください