【Web】GASでGoogle Driveのスプレッドシートの文字やテキストを読み込んでブラウザに表示させる【Google Apps Script】

投稿日:2021年7月26日
最終更新日:2021年7月26日

Googleドライブのスプレッドシートのデータを読み込んで、GASでブラウザのHTMLに表示させる

以前、GASで表示させたHTML上からGoogleドライブのスプレッドシートにデータを書き込む方法を書いたが、今回はスプレッドシートのデータをブラウザでHTML上で表示させる方法についてメモしておく。

 

スプレッドシートの準備

書き込みの時と同じだが、おさらいしておく。まずはGoogleドライブ上にスプレッドシートをつくっておく。スプレッドシートをつくったときに、下の画像の赤枠の部分がスプレッドシートのIDとなる。GASのコードでこのIDと、シートの名前を指定することでスプレッドシートを操作する。今回は表示のテストのため、あらかじめテキストを書いておいた。

 

HTMLとGASのサンプルコード

以下にクライアント側のブラウザで表示させるHTMLのコードと、サーバー側のGASのコードのサンプルを書いておく。

まずはgasコード。

コードの内容だが、doGet関数でhtmlを表示させるのと、openSheetという関数でスプレッドシートを開くのは同じ。readSheetという関数のgetDataRange()とgetValues()で指定した範囲のデータを取得して、戻り値として値を返す。

このあたりはこのサイトなどが詳しいが、今回はスプレッドシートのデータをすべて取得するようにした。引数で、セルや返すデータ数を指定できるようにすると、結構便利かもしれない。

次にhtmlコード。

<?と?>で囲った部分でまずgasコードのreadSheet関数を使ってスプレッドシートのデータをすべて読み出し、for文のoutput._で1つずつhtmlに表示させている。

 

以下がコードをデプロイして実行してみた結果。先ほどのスプレッドシートのデータが表示されている。

以前ブログに書いたスプレッドシートへの書き込みと合わせて使えば、クライアント側のブラウザで表示したhtmlからスプレッドシートの基本的な読み書きはできるはず。


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。

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