GASでブラウザに表示したHTMLからスプレッドシートにデータを書き込む
GAS(Google Apps Script)でスプレッドシートにテキストや数値を書き込むのはよくやるが、GASで表示させたHTML上からスプレッドシートにデータを書き込むのは少し工夫が必要だったので、今回はその方法をメモしておく。
スプレッドシートの準備
まずはGoogleドライブ上にスプレッドシートをつくっておく。スプレッドシートをつくったときに、下の画像の赤枠の部分がスプレッドシートのIDとなる。GASのコードでこのIDと、シートの名前を指定することでスプレッドシートを操作する。
HTMLとGASのサンプルコード
以下にクライアント側のブラウザで表示させるHTMLのコードと、サーバー側のGASのコードのサンプルを書いておく。
まずはgasコード。
function writeSheet(e) { | |
var ss = openSheet(); | |
ss.appendRow([e]); | |
} | |
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を表示させている。writeSheetがスプレッドシートに書き込みを行う関数で、htmlから呼び出して使う。この関数の中でopenSheetという関数を呼び出し、スプレッドシートを開いている。ここで先ほどのスプレッドシートのIDとシート名を指定する。
次にhtmlコード。
<!DOCTYPE html> | |
<html> | |
<head> | |
<base target="_top"> | |
<script type="text/javascript"> | |
function sendText(){ | |
google.script.run | |
.withSuccessHandler(inform()) | |
.writeSheet(document.forms['formText'].elements['message'].value); | |
} | |
function inform() { | |
alert('スプレッドシートに書き込みました'); | |
} | |
</script> | |
</head> | |
<body> | |
<h1>スプレッドシート書き込みテスト</h1> | |
<p>スプレッドシートに書き込む内容を入力↓</p> | |
<form name="formText"> | |
<input type="text" name="message"> | |
<input type="button" onclick="sendText()" value="送信"> | |
</form> | |
</body> | |
</html> |
フォームにテキストを入力してボタンをクリックするとsentText関数が呼び出される。google.script.runでGASコード側のwriteSheet関数に入力したテキストを引数として渡し、スプレッドシートに書き込みを行う。
これだけでも良いのだが、書き込めたかどうかわかりにくいので、withSuccessHandlerでwriteSheet実行後にhtmlコード上で定義したinform()を呼び出し、ブラウザ上で「スプレッドシートに書き込みました」というメッセージを表示させるようにした。
以下がコードをデプロイして実行した結果。
適当にテキストを入力してクリックすると、以下のようにメッセージが表示させる。
スプレッドシートを開いてみると、以下のように書き込めていることがわかる。
なお、スプレッドシートに書いたデータを読み込んで、HTMLでブラウザに表示する方法は以下で書いている。読み込みまでやりたい人は下記記事を参照。
【Web】GASでGoogle Driveのスプレッドシートの文字やテキストを読み込んでブラウザに表示させる【Google Apps Script】