始めに
本記事ではGASを使い，情報を登録する簡単なwebアプリを作成します．
完成品
作成方法を紹介する前に，まずは完成品を紹介します．
最終的に，以下のような挙動をするwebアプリを作ります．
webアプリを作る
使用したもの
- Google Apps Script
- Bootstrap（外観を整えるために使用）
機能
フォームから以下の情報を受け取ります．（いずれも入力必須）
- 利用者名
- メールアドレス
- パスワード
その後送信ボタンを押すと，以下の情報をスプレッドシートに保存します．
- id
- 利用者名
- メールアドレス
- パスワード
- 登録日時
コードを書く
今回は，スプレッドシートのツールからスクリプトエディタを開きます．
詳細な方法は他の記事を参照してください．
-
コード.gsを以下のように修正します． - webアプリのURLを取得するために，一旦webアプリとしてデプロイします．
- 右のメニューから「ファイル」 > 「＋」 > 「HTML」を選択し，HTMLファイルを作成します．
-
index.htmlを以下のように修正します． - もう一度デプロイします．
コード.gs
// GET通信時の処理
function doGet(e){
return HtmlService.createTemplateFromFile('index').evaluate();
}
// POST通信時の処理
function doPost(e){
const sheet = SpreadsheetApp.getActiveSheet();
// 保存する情報を取得
let id = sheet.getLastRow(); // id
let username = e.parameter.name; // 利用者名
let e_mail = e.parameter.mail; // メールアドレス
let password = e.parameter.password; // パスワード
let date = new Date(); // 登録日時
// 取得した情報をスプレッドシートに記入
sheet.appendRow([id, username, e_mail, password, date]);
return HtmlService.createTemplateFromFile('index').evaluate();
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>app_test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body class="container">
<h1 class="display-4">My awesome database app</h1>
<form method="post" action="事前に取得したwebアプリのURL">
<div class="form-group">
<label>username：</label>
<input type="text" name="name" class="form-control" placeholder="name" required>
</div>
<div class="form-group">
<label>e-mail：</label>
<input type="email" name="mail" class="form-control" placeholder="xxx@yyy.zzz" required>
</div>
<div class="form-group">
<label>password：</label>
<input type="password" name="password" class="form-control" required>
</div>
<input type="submit" class="btn btn-primary" value="SUBMIT!">
</form>
</body>
</html>
使ってみる
デプロイが終わったら，発行されたURLにアクセスしてみましょう．
最初の完成品と同じ挙動になっていれば成功です．
まとめ
ここまでで，簡単なデータ登録webアプリを作成しました．
入力するデータを変更したり，他のgoogleのサービスとの連携等の様々な応用ができるので，機会があれば挑戦しようと思います．