GASでユーザー登録フォームを作った
cistLTサークルのアドベントカレンダー4日目への寄稿です。
目的
友人と共同で制作し、10月のサークル合同LTで発表したWebサイト（未完成）chitose-fts.web.appにお気に入り機能追加したい。
合同LTcist-lt.connpass.comで使用したスライドについてはこちら
経緯
友人とGASを使って共同でまたやろうか、という運びになり
- スプレッドシートでデータベースっぽいこともっとしたい
- ユーザー登録ページ作ってお気に入り機能とか実装したいね
- ページ遷移どうする？ -> GASプロジェクトは基本1プロジェクト1htmlしか呼び出せない*1のでページ遷移大変そう...
などなどありました。
結果
わりとなんとかなりました。
実際に作成したページ
script.google.com
スプレッドシート
docs.google.com
以下でソースコードと軽い解説を。
<!DOCTYPE html> <html> <head> <base target=”_top”> </head> <body> <h1>ユーザー登録フォーム</h1> <form action="https://script.google.com/macros/s/AKfycbwLU-A0l5788vTO0sAXT1nL5VYWLNZqCt5hfy8vH8EFO_1rSvY/exec" method="post"> <p> ユーザー名：<input type="text" name="namae"> </p> <p> 性別：<br /> <input type="radio" name="gender" value="男性">男性<br /> <input type="radio" name="gender" value="女性">女性 </p> <p> <input type="submit" value="送信する"> <input type="reset" value="入力内容をリセットする"> </p> </form> </body> </html>
<input>タグのname属性で付与した名前をスプレッドシートに書き込む際に受け渡します
<form>タグのaction属性でWEBアプリケーションとして公開したページのURLを指定しpostしています
<!DOCTYPE html> <html> <head> <base target=”_top”> </head> <body> 送信が完了しました。<br><br> <!-- ページ内遷移ここから --> <?var url = getScriptUrl();?> <input type="button" value="もう一度回答する" onclick="window.top.location.href = '<?!=url?>?page=kakunin';"/> <!-- ここまで --> </body> </html>
ここの<input>タグでページを切り替えるためのボタンを作成しています。
onclicでwindow.top.location.href(現在のページの場所を指します)に<?!=url?>?page=kakunin';"/>を渡してあげることで
kakunin.htmlに遷移させてあげることができます。
function doGet(e) {
Logger.log( Utilities.jsonStringify(e) );
if (!e.parameter.page) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate(); /* page=kakuninのpage,この配列に"kakunin"のようなページ名が追加されていく */
}
function doPost(postdata){
var sh=SpreadsheetApp.openById('1juOUKCyip7z0EBwVFSLriP30whTEBvB_lYJV12ZtEuw');
var time=new Date();
var namae=postdata.parameters.namae.toString();
var gender=postdata.parameters.gender.toString();
sh.appendRow([time,namae,gender]);
return HtmlService.createTemplateFromFile("result").evaluate();
}
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
doGet()では
function doGet(e)
で、e.parameterの中にURLのパラメーターが配列として格納され、
return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate()
で、URLのpage="kakunin"のパラメーターの値を取得し、変数pageに格納したものを戻り値として返しています
<input type=”submit”>でdoPost関数を呼び出した際の処理をみてみます。
今回のGASはスタンドアロン型スクリプトで作成しているので
SpreadsheetApp.openById(“”)
とします。
(部分に入るシートIDはスプレッドシートのURLのd/と/editの間
https://docs.google.com/spreadsheets/d/**********/edit#gid=597941997
で確認できます)
スクリプトと紐付いていないスプレッドシートを指定して取得しています。
引数で受け取ったオブジェクト型のpostdataをtoString()メソッドで文字列型に変換し、appendRowメソッドでスプレッドシートの最終行にtime,name,genderを追加しています。
感想
ネックだったページ遷移の問題は解決できたので、残る課題はログインページとお気に入り機能の実装ですね。
ゆくゆく着手していきたい。
またサークルのLTなどで何度かプレゼンしているのですが、GASのよいところは
①無料（お財布にやさしい）
②サーバーレスであること
③スプレッドシートをデータベースとして代用できること
であると思います
制約のないレンサバはお金かかるし、データベースは学習コストが重いので、小規模でWeb開発したいとか、とりえあずデータベースつかってみたい
って人にもGASおすすめできると思うなぁという記事でした。
余談
ページ上部のバナー、英文になってちょっと主張がおちついた感じ
