【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コード。

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とシート名を指定する。

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

次に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】

+2

投稿者: wakky

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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