Photo by
peishum
プログラミングを勉強します48日目：200510
前回までの振り返り
■前回の外部設計
https://note.com/daichan_dream/n/n09f74decd548
■前回の内部設計
https://note.com/daichan_dream/n/n09f74decd548
■アウトプットイメージ
https://note.com/daichan_dream/n/n2ab044382c9b
昨日はスプレットシートの内容をネット上に公開できるようになりました。
今日はWEB上をインプット形式の表をまずWEB上に
公開できるようにしていきます。
■Google Apps Scriptで簡単にWebアプリケーションを公開する方法
https://www.indetail.co.jp/blog/181219/
上記のサイトを見て入力フォームを作成しようとしたのですが、
結果としてまた壁にぶつかりました。
ということで今日のできたところまでアップします。
上記サイトと同じようにスプレットシートの内容を作成しました。
そしてGASとHTMLのコードをコピペして下記のような状態にしました。
■GAS
function doGet() {
// 表示したいHTMLのファイル名を指定(拡張子は記載しない)
return HtmlService.createTemplateFromFile("index").evaluate();
}
function doPost(e) {
// シートを取得
var sheet = getSheet('シート名');
// シートの最終行を取得
var lastRow = sheet.getLastRow();
// 最終行にデータ挿入
// 「e.parameter.フォーム名」 でフォームから送信されたパラメータを受け取ることができます
sheet.appendRow([lastRow, e.parameter.value, new Date(), e.parameter.name]);
// スプレッドシートのデータ挿入後、元の画面に戻す
return HtmlService.createTemplateFromFile("index").evaluate();
}
function getSheet(name){
// SSIDからスプレッドシートの取得
var ssId = '1DxWdp3kWp2EWPwLGurZO8HV6EmxChTHHXkhzdrBCz9o';
var ss = SpreadsheetApp.openById(ssId);
// 指定されたシート名からシートを取得して返却
var sheet = ss.getSheetByName(name);
return sheet;
}
function getData() {
// 指定したシートからデータを取得
var values = getSheet('シート名').getDataRange().getValues();
return values;
}■HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table{
border: solid 1px #000000;
border-collapse: collapse;
}
th {border: solid 1px #000000}
td {border: solid 1px #000000}
</style>
</head>
<body>
<h2>Hello World</h2>
<form method="post" action="公開時のアプリケーションのURLを入れる">
<label>name：<input type="text" name="name"></label>
<label>value：<input type="text" name="value"></label>
<input type="submit" value="送信する">
</form>
</body>
</html>最初は丸々コピペしていたものの、なぜかHTMLの最後の方の
『スプレットシートからデータを取得』でずっとエラーが出ていたので
消してみました。するとちゃんと下記のようなフォームがネット上に
表示されました。
これでうまくいったと思って、それぞれ入力して送信すると
下記のようなエラーが出てきました。
スプレットシートID、シート名も入れてますがなぜか、
スプレットシートに貯まりません。うーん。今日はここまでにして
明日以降に頑張ります！