Google AppSheet で簡単帳面アプリ作成!

google風のアイコン AppSheet

AppSheetでNoCode で簡単にモバイル、webのアプリが作れるということで早速チャレンジ!

今回は、スプレッドシートを使う

エクセルや外部Mysql、Google Cloud Mysqlなども使えるようですが今回は、お手軽にスプレッドシートを使用したいと思います。

アプリ用にスプレッドシートを作る

作ると言っても、普通にスプレッドシートを新規作成で作るだけwww
そして、テーブル名?のような感じで使いたい項目を1列目に記述します。

AppSheetでは、1列目にある物をテーブル名として認識するようです。
太字にすると認識しやすい、的な事とか書いてましたので後でAppSheetと紐付ける際に思っているように紐付けされなければ、太字にしてみてもいいのかもしれません。
ちなみに私のはこのような感じで作りました!!

驚くほど適当ですが、その辺はお試しなのでご了承ください笑

AppSheetへアクセス!!

AppSheet : mobile apps from spreadsheets :
Make apps with no-code. AppSheet's no-code app building platform allows you to quickly build apps to collect, or connect to, data. Start building for free now.

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倍は時間かかるんじゃーないでしょうか??
恐ろしい世の中です。。

次は、どうやってスマホに入れて使うのかをやって行こうと思います!

コメント

タイトルとURLをコピーしました