始めに

本記事では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のサービスとの連携等の様々な応用ができるので，機会があれば挑戦しようと思います．

【Google Apps Script】データ登録webアプリを作る

始めに

完成品

webアプリを作る

使用したもの

機能

コードを書く

使ってみる

まとめ