ちょっと機会があって手を出した、googleスプレッドシートの情報を元にwebページ出力させる方法をまとめます。
以下のURLに記載しているようなスプレッドシートの情報を元に、GASを使ってwebページとして出力します。
GASでdoGet,doPostメソッドを作成した上で、ウェブアプリケーションとして公開するとその公開URLにGET,POSTリクエストが投げられた際に、その各メソッドの返り値がブラウザに返されます。
これを使えば、任意のHTMLをブラウザに返すことが出来ます。さらにGASなので、スプレッドシート等の情報を利用して返すことも可能です。
この時、テンプレートとなるHTMLを作成し、そこに任意のコードを記載した状態で動的にページを返すようにもすることが出来ます。
単純にスプレッドシートの中身をそのままHTMLのテーブルとして出力しようとした場合、以下のdogetメソッドと、テンプレートHTMLで実現できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet() { | |
| var title="スプレッドシートサンプル"; | |
| return HtmlService.createTemplateFromFile('page').evaluate().setTitle(title); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <? 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等を参考に)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <? 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> |
このように単純にそのまま記載した内容を表示するだけでなく、任意の条件で表示させることもでき、かつスプレッドシートの中身を書き換えれば記載内容も修正できるため、簡単な集計ページの作成や、技術者以外の人にも更新作業を簡単に行えるページなどを作る際に良いのではないかと思います。
上記のコードを利用して作成したページを以下に記載します。
