ちょっと機会があって手を出した、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); | |
| } |
| <? 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> |
また、テンプレート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> |
このように単純にそのまま記載した内容を表示するだけでなく、任意の条件で表示させることもでき、かつスプレッドシートの中身を書き換えれば記載内容も修正できるため、簡単な集計ページの作成や、技術者以外の人にも更新作業を簡単に行えるページなどを作る際に良いのではないかと思います。
上記のコードを利用して作成したページを以下に記載します。
