【Web】GASでブラウザ上からGoogle Driveのスプレッドシートにデータを書き込む【Google Apps Script】

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

GASでブラウザに表示したHTMLからスプレッドシートにデータを書き込む

GAS(Google Apps Script)でスプレッドシートにテキストや数値を書き込むのはよくやるが、GASで表示させたHTML上からスプレッドシートにデータを書き込むのは少し工夫が必要だったので、今回はその方法をメモしておく。

 

スプレッドシートの準備

まずはGoogleドライブ上にスプレッドシートをつくっておく。スプレッドシートをつくったときに、下の画像の赤枠の部分がスプレッドシートのIDとなる。GASのコードでこのIDと、シートの名前を指定することでスプレッドシートを操作する。

 

HTMLとGASのサンプルコード

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

まずはgasコード。

ざっと内容を説明する。まず、doGet関数でhtmlを表示させている。writeSheetがスプレッドシートに書き込みを行う関数で、htmlから呼び出して使う。この関数の中でopenSheetという関数を呼び出し、スプレッドシートを開いている。ここで先ほどのスプレッドシートのIDとシート名を指定する。

ss.appendRow([e])で、スプレッドシートの下の行に、引数eを書き込む。

次にhtmlコード。

フォームにテキストを入力してボタンをクリックするとsentText関数が呼び出される。google.script.runでGASコード側のwriteSheet関数に入力したテキストを引数として渡し、スプレッドシートに書き込みを行う。

これだけでも良いのだが、書き込めたかどうかわかりにくいので、withSuccessHandlerでwriteSheet実行後にhtmlコード上で定義したinform()を呼び出し、ブラウザ上で「スプレッドシートに書き込みました」というメッセージを表示させるようにした。

以下がコードをデプロイして実行した結果。

適当にテキストを入力してクリックすると、以下のようにメッセージが表示させる。

スプレッドシートを開いてみると、以下のように書き込めていることがわかる。

なお、スプレッドシートに書いたデータを読み込んで、HTMLでブラウザに表示する方法は以下で書いている。読み込みまでやりたい人は下記記事を参照。

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

1+

投稿者: wakky

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

コメントを残す

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

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