皆さんこんにちは！今晩は！！ロト君です。今回は、前回学んだGASをもっと深堀して、スプレッドシートをデータベースの様に扱う、書き込みシステムを簡単に作りたいと思います。(読み込みの方法はまだ分かっていませんww)
1.使うモノ
扱うものとして、下記のモノが必要です。
- コード.gs
- index.html
- result.html
- スプレッドシート
の、4種類です。
上記のモノは、GASを作る際のメニューバーより、「ファイル」→「New」→「HTMLファイル」で、作成出来ます。
2.実際のコード
実際のコードはこんな感じです。
コード.gs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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
|
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 |
<!DOCTYPE html> <html> <head> <base target=”_top”> </head> <body> <h1>doPostによる方法</h1> <form method="post" action="https://script.google.com/macros/s/UseIndexPageURLxxxxxxxxxxxxxxxxxxxxxx/exec"> <p>氏名</p> <input type="text" name="name" value="name"> <p>性別</p> <input type="radio" name="sex" value="男性"><label>男性</label> <input type="radio" name="sex" value="女性"><label>女性</label> <p>好きな動物</p> <input type="radio" name="animal" value="猫"><label>猫</label> <input type="radio" name="animal" value="犬"><label>犬</label> <input type="radio" name="animal" value="イルカ"><label>イルカ</label> <input type="submit" value="ok"> </form> </body> </html> |
result.html
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <base target=”_top”> </head> <body> 送信が完了しました。<br> <a href="https://script.google.com/macros/s/UseIndexPageURLxxxxxxxxxxxxxxxxxxxxxx/exec">One More Try!!</a> </body> </html> |
上記の様に、記載します。
3.解説
|
1 2 3 4 5 6 |
function doGet() { var toppage = HtmlService.createTemplateFromFile("index").evaluate(); return toppage; } |
doGet()関数は、何かしらページが読まれた際に実行される場所です。つまり、UseIndexPageURLxxxxxxにアクセスした際に実行される関数ですね。
今回の場合、テンプレートで用意したindex.htmlを表示させる様にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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と言えるので、そのほかの機能も調べてみたいと思います。
では、今回はここまで！(°▽°)ミ★
- lotokunn
L's Coreの管理人。小林コワーキングスペースでの裏テノの運営。コミックマーケットで同人誌などを販売。AmazonにてWordPressの書籍販売中。アニメ大好きっ子。ALERT HNGARに所属。イラスト・Windowsソフトの開発・Web App開発。
- アルパイングッズを揃えよう！！ 2020年11月20日
- Apple iPhone 12 mini ついに予約開始！！ 2020年11月7日
- 宮崎県 西米良 石堂山(イシドウヤマ)登山！！ 2020年11月4日
- Apple Watch Series 6 使い心地 2020年11月2日
- LG 32UN500-W 31.5インチ 4K PCモニターを買ってみた！！ 2020年10月31日