Googleドライブのスプレッドシートのデータを読み込んで、GASでブラウザのHTMLに表示させる
以前、GASで表示させたHTML上からGoogleドライブのスプレッドシートにデータを書き込む方法を書いたが、今回はスプレッドシートのデータをブラウザでHTML上で表示させる方法についてメモしておく。
スプレッドシートの準備
書き込みの時と同じだが、おさらいしておく。まずはGoogleドライブ上にスプレッドシートをつくっておく。スプレッドシートをつくったときに、下の画像の赤枠の部分がスプレッドシートのIDとなる。GASのコードでこのIDと、シートの名前を指定することでスプレッドシートを操作する。今回は表示のテストのため、あらかじめテキストを書いておいた。
HTMLとGASのサンプルコード
以下にクライアント側のブラウザで表示させるHTMLのコードと、サーバー側のGASのコードのサンプルを書いておく。
まずはgasコード。
| function readSheet(){ | |
| var data = openSheet().getDataRange().getValues(); | |
| return data; | |
| } | |
| function doGet() { | |
| const htmlOutput = HtmlService.createTemplateFromFile('ss_open_test').evaluate(); | |
| htmlOutput.setTitle("スプレッドシート読み込みテスト"); | |
| return htmlOutput; | |
| } | |
| function openSheet() { | |
| var id = "1lDnkZwZxwB0DCN5FtKQJvE44y-LIu9_vsviz9Yn-j7s"; | |
| var ss = SpreadsheetApp.openById(id).getSheetByName("messages"); | |
| return ss; | |
| } |
コードの内容だが、doGet関数でhtmlを表示させるのと、openSheetという関数でスプレッドシートを開くのは同じ。readSheetという関数のgetDataRange()とgetValues()で指定した範囲のデータを取得して、戻り値として値を返す。
このあたりはこのサイトなどが詳しいが、今回はスプレッドシートのデータをすべて取得するようにした。引数で、セルや返すデータ数を指定できるようにすると、結構便利かもしれない。
次にhtmlコード。
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| </head> | |
| <body> | |
| <h1>スプレッドシート読み込みテスト</h1> | |
| <p>スプレッドシートから読み込んだ内容を表示↓</p> | |
| <? | |
| var data = readSheet(); | |
| for(var i=0;i<data.length;i++){ | |
| output._ = '<p>' + data[i][0] + '</p>'; | |
| } | |
| ?> | |
| </body> | |
| </html> |
<?と?>で囲った部分でまずgasコードのreadSheet関数を使ってスプレッドシートのデータをすべて読み出し、for文のoutput._で1つずつhtmlに表示させている。
以下がコードをデプロイして実行してみた結果。先ほどのスプレッドシートのデータが表示されている。
以前ブログに書いたスプレッドシートへの書き込みと合わせて使えば、クライアント側のブラウザで表示したhtmlからスプレッドシートの基本的な読み書きはできるはず。
