GAS doPost を使ってスプレッドシートにデータを書き込む

皆さんこんにちは！今晩は！！ロト君です。今回は、前回学んだGASをもっと深堀して、スプレッドシートをデータベースの様に扱う、書き込みシステムを簡単に作りたいと思います。(読み込みの方法はまだ分かっていませんww)

1.使うモノ
2.実際のコード
3.解説
4.まとめ

1.使うモノ

扱うものとして、下記のモノが必要です。

コード.gs
index.html
result.html
スプレッドシート

の、4種類です。

上記のモノは、GASを作る際のメニューバーより、「ファイル」→「New」→「HTMLファイル」で、作成出来ます。

2.実際のコード

実際のコードはこんな感じです。

コード.gs

function doGet() {

var toppage = HtmlService.createTemplateFromFile("index").evaluate();

  return toppage;
}

function doPost(postdata){

var sh=SpreadsheetApp.openById("SpreadsheetIDxxxxxxxxxxxxxxxxxxxxxxx");
var sh_name = sh.getSheetByName("シート1");
var time=new Date();

var name=postdata.parameters.name.toString();
var sex=postdata.parameters.sex.toString();
var animal=postdata.parameters.animal.toString();

sh_name.appendRow(&#91;time,name,sex,animal]);

var resultpage=HtmlService.createTemplateFromFile("result").evaluate();
 
  return resultpage;
}

function doGet() {

var toppage = HtmlService.createTemplateFromFile("index").evaluate();

return toppage;

}

function doPost(postdata){

var sh=SpreadsheetApp.openById("SpreadsheetIDxxxxxxxxxxxxxxxxxxxxxxx");

var sh_name = sh.getSheetByName("シート1");

var time=new Date();

var name=postdata.parameters.name.toString();

var sex=postdata.parameters.sex.toString();

var animal=postdata.parameters.animal.toString();

sh_name.appendRow([time,name,sex,animal]);

var resultpage=HtmlService.createTemplateFromFile("result").evaluate();

return resultpage;

}

index.html

&lt;!DOCTYPE html>
&lt;html>

&lt;head>
&lt;base target=”_top”>
&lt;/head>

&lt;body>
&lt;h1>doPostによる方法&lt;/h1>

&lt;form method="post" action="https://script.google.com/macros/s/UseIndexPageURLxxxxxxxxxxxxxxxxxxxxxx/exec">

&lt;p>氏名&lt;/p>
&lt;input type="text" name="name" value="name">

&lt;p>性別&lt;/p>
&lt;input type="radio" name="sex" value="男性">&lt;label>男性&lt;/label>
&lt;input type="radio" name="sex" value="女性">&lt;label>女性&lt;/label>

&lt;p>好きな動物&lt;/p>
&lt;input type="radio" name="animal" value="猫">&lt;label>猫&lt;/label>
&lt;input type="radio" name="animal" value="犬">&lt;label>犬&lt;/label>
&lt;input type="radio" name="animal" value="イルカ">&lt;label>イルカ&lt;/label>

&lt;input type="submit" value="ok">

&lt;/form>

&lt;/body>

&lt;/html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>doPostによる方法</h1>

<p>好きな動物</p>

</form>

</body>

</html>

result.html

&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;base target=”_top”>
&lt;/head>
&lt;body>
送信が完了しました。&lt;br>
&lt;a href="https://script.google.com/macros/s/UseIndexPageURLxxxxxxxxxxxxxxxxxxxxxx/exec">One More Try!!&lt;/a>
&lt;/body>
&lt;/html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

送信が完了しました。<br>

</body>

</html>

上記の様に、記載します。

3.解説

function doGet() {

var toppage = HtmlService.createTemplateFromFile("index").evaluate();

  return toppage;
}

function doGet() {

var toppage = HtmlService.createTemplateFromFile("index").evaluate();

return toppage;

}

doGet()関数は、何かしらページが読まれた際に実行される場所です。つまり、UseIndexPageURLxxxxxxにアクセスした際に実行される関数ですね。

今回の場合、テンプレートで用意したindex.htmlを表示させる様にしています。

function doPost(postdata){

var sh=SpreadsheetApp.openById("SpreadsheetIDxxxxxxxxxxxxxxxxxxxxxxx");
var sh_name = sh.getSheetByName("シート1");
var time=new Date();

var name=postdata.parameters.name.toString();
var sex=postdata.parameters.sex.toString();
var animal=postdata.parameters.animal.toString();

sh_name.appendRow(&#91;time,name,sex,animal]);

var resultpage=HtmlService.createTemplateFromFile("result").evaluate();
 
  return resultpage;
}

function doPost(postdata){

var sh=SpreadsheetApp.openById("SpreadsheetIDxxxxxxxxxxxxxxxxxxxxxxx");

var sh_name = sh.getSheetByName("シート1");

var time=new Date();

var name=postdata.parameters.name.toString();

var sex=postdata.parameters.sex.toString();

var animal=postdata.parameters.animal.toString();

sh_name.appendRow([time,name,sex,animal]);

var resultpage=HtmlService.createTemplateFromFile("result").evaluate();

return resultpage;

}

doPost(postdata)関数は、Postが発生した際にPOSTデータをpostdataに格納します。格納されたデータは、postdata.parameter.xxxxxで取得します。

xxxxxに相当するのは、index.htmlで作成したformのinput内のname属性に対応します。

4.まとめ

今回は上手く、書き込む事が出来るWebAppを作る事が出来ました。然し乍ら、実際には新規作成、参照、編集、削除の4工程が出来て初めてAppと言えるので、そのほかの機能も調べてみたいと思います。

では、今回はここまで！(°▽°)ミ★

シェアをよろしくお願い致します！！

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

lotokunn.com

GAS doPost を使ってスプレッドシートにデータを書き込む

1.使うモノ

2.実際のコード

3.解説

4.まとめ

コメントするコメントをキャンセル

GAS doPost を使ってスプレッドシートにデータを書き込む

1.使うモノ

2.実際のコード

3.解説

4.まとめ

コメントする コメントをキャンセル

コメントするコメントをキャンセル