AppSheetでNoCode で簡単にモバイル、webのアプリが作れるということで早速チャレンジ!
今回は、スプレッドシートを使う
エクセルや外部Mysql、Google Cloud Mysqlなども使えるようですが今回は、お手軽にスプレッドシートを使用したいと思います。
アプリ用にスプレッドシートを作る
作ると言っても、普通にスプレッドシートを新規作成で作るだけwww
そして、テーブル名?のような感じで使いたい項目を1列目に記述します。
AppSheetでは、1列目にある物をテーブル名として認識するようです。
太字にすると認識しやすい、的な事とか書いてましたので後でAppSheetと紐付ける際に思っているように紐付けされなければ、太字にしてみてもいいのかもしれません。
ちなみに私のはこのような感じで作りました!!

驚くほど適当ですが、その辺はお試しなのでご了承ください笑
AppSheetへアクセス!!
start for freeをクリックしてユーザー登録をしましょう。

使うグーグルアカウントの選択をし、データとして使うサービスの選択をします。
今回の場合は、スプレッドシートなのでGoogleDrive?だったかな??を選択しました。
すると、このような管理画面に移ります。

+ New app 〜!!
管理画面には既に存在する、スプレッドシートが紐付けられていて物凄い驚きに見舞われましたw
今回は、「帳面」をアプリ化したいので帳面を選択致します。
すると、上部に「Table」「Column」「slices」「user Setting」と4つのタブがありますので、
Columnをクリックして、Typeを編集。

とりあえずこんな感じにしてみました。
画面右にある、モバイル画面の「+」をクリックしてみて下さい!

すると。。。
それっぽいのができた
備考欄をドロップリストにする
備考のTypeを「Enum」に変更。
左のテーブルを表示している画面で、左端の鉛筆マークをクリックで編集。
下の画像のように「values」に表示させたい項目を入力。
入力が終わると「done」をクリックして下さい。

アプリ画面右上のリロードをクリックしてから備考欄をみて見ると
スプレッドシートの方にも、値が入れられている!

合計金額を算出
ここで上記項目ではうまくできなかったので、「差分」項目を付け足した。
AppSheetで「Regenarate sturacture」とすると付け足したカラムが追加されます。
計算式を入力
AppSheetのcolumnタブを選択。
FORMULAのところの = のとこを選択。

[入金]-[出金]と書いてセーブ。
すると、行ごとに計算してくれます。
次に、合計を算出したいので
スプレッドシート側で、G2のところで(=SUM(F:F))と計算式を入力。

すると、

このように、合計金額を算出することができましたー!!
合計金額確認
AppSheetで新しいtableを作成。
選ぶスプレッドシートは、今まで使っていた物と同じ物を選択。
今回は合計金額を参照するだけなので、新規で作成したtableを選択しcolumnタブをクリック。
合計金額以外の「Show」をoffにします。
左側のUXをクリック

それぞれViewNameを使用したい名前に変更してSave。
最終的に
とりあえずこんな感じになりました。
ブログ書きつつ、調べもって計8時間くらいかな?でできました。
これをコード書いて作ると軽く10倍は時間かかるんじゃーないでしょうか??
恐ろしい世の中です。。
次は、どうやってスマホに入れて使うのかをやって行こうと思います!