Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@wish

Google Apps Script で集金メモサービスを作る

More than 1 year has passed since last update.

概要

GoogleAppsScript (GAS) でWEBページ、サーバーを作り、GoogleSpreadSheetをデータベースとして、複数人から現金を集めるときのメモを作りました。
紙にメモするとあとの計算がめんどくさい
→スプレッドシートに書き込むからデータ処理しやすい
直接エクセルに書くのはめんどくさい
→スマホのブラウザから簡単に入力できる

動機

部活の会計をしていた経験があるが、集金は本当にめんどくさい。
メモミスったり、あとで計算したりがめんどう。
LINEPAYの送金サービスなどを使えば簡単かもしれないが、みんなにLINEPAYを始めさせるのもめんどくさい。
そこで、簡単に導入できる会計メモアプリを作ろうと思った。今回はその第一弾である。

システム構成

webページでデータ(項目、人名、金額)を書く。

サーバーに送信され、スプレッドシートに記入される。
以上

サーバー

GASのプロジェクト内のgsファイルを編集

code.gs
function doPost(e) {
  var date = new Date();
  Logger.log(e);
  var Data = [[Utilities.formatDate(date, 'Asia/Tokyo', 'yyyy/MM/dd:hh-mm-ss'),
             e.parameter.category, e.parameter.name, e.parameter.money]];

  var key = 'キーをいれてね'
  var spreadsheet = SpreadsheetApp.openById(key);
  var sheetname = 'Collection'
  var sheet = spreadsheet.getSheetByName(sheetname);


  sheet.insertRows(2,1);
  sheet.getRange(2,1,1,4).setValues(Data);

  return 0;
}

キーをいれてね、のところにDBにするスプレッドシートのURLの一部
https://docs.google.com/spreadsheets/d/{ここ}/edit#gid=0)
の{ここ}をいれる。

これで完成。公開ーウェブアプリケーションとして導入から、
Project version - New
Execute the app as - Me
Who has access to the app - Anyone,even anonymous
で公開。表示されるURLをメモ。

webページ

GASのプロジェクト内にhtmlファイルを作り、以下のように編集

post_data.html
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>入力テスト</title>
</head>
<body>
  <h1>入力</h1>
  <form method="post" action="サーバURL">
    <p>
      <label>項目 <input type="text" name="category"></label>
    </p>
    <p>
      <label>人名 <input type="text" name="name"></label>
    </p>
    <p>
      <label>金額 <input type="text" name="money"></label>
    </p>
    <p>
      <input type="submit" value="送信">
    </p>
  </form>
</body>

サーバURLのところに先ほどのURLを入れる。

同じプロジェクト内でgsファイルを作り、以下のように編集

code.gs
function doGet(request) {
  return HtmlService.createTemplateFromFile('post_data')
      .evaluate();
}

同様に公開。出てきたURLにブラウザからアクセス。

結果

問題なく動作しました。

問題(今後の課題)

・入力ページが一度入力すると再度アクセスしないと連続で入力できない。
・スマホにやさしくないHTMLデザイン
・項目や人名を選択式にする
 ・そのために項目、人名登録用のページもつくる。

参考資料

https://developers.google.com/apps-script/guides/html/best-practices?hl=ja
https://qiita.com/taromorimotohf/items/5e52cb9062600e8ccac3
https://breezegroup.co.jp/201906/gas-get/
https://breezegroup.co.jp/201906/gas-get/
https://qiita.com/negito6/items/c64a7a8589faaffcfdcf
https://tonari-it.com/gas-spreadsheet-insertrows-splice/
http://www.googleappsscript.info/2017-07-27/get_now.html
https://qiita.com/ShishidoToru/items/0ab9de4ea281df9358f4

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
wish
大学でPython,C++でROSを使った開発をしています。 個人的にはwebアプリなどかじってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?