HapInSアドベントカレンダー2023、21日目です！
こんにちは！MHR:SでMR/HR=999、ランスとハンマーそしてヘビィボウガンをこよなく愛するponです🐕🐈
今回は巷で話題のAppSheetで子どものお小遣い管理アプリを作ってみたのでご紹介いたします。
AppSheetの概要
（公式ページより）
Google Cloud の AppSheet はコードのいらないアプリ開発プラットフォームで、既存のデータを使って素早くモバイルアプリやデスクトップ アプリを構築できます。
↑要するに、難しいコードを書かなくてもあらかじめ用意された部品をポチポチ組んでいくとアプリが出来ちゃうよ！という話です。
※ただし、データベースの構造をうっすらとでも理解していないと「あれ？動かない？なんで！？」とハマります。
アプリ開発の背景
我が家では子どもたちの家事のお手伝いに応じて、お給料が発生します。 子どもたちはお手伝いをするたびに冷蔵庫のカレンダーに書き込んでいき、 毎月始め、妻が電卓をはじいて計算したお給料を子どもたちへ支払うというシステムがあります。 しかし、そのお給料を計算するのが面倒くさいので何とかならないか、と妻から要望があったわけです。
今回やりたきこと
子どものお手伝いによって発生するお小遣いの記録をスマホでカンタンに管理したい！
まずデータベースって何？
タイトルに「ノーコード」と銘打っているので、一応データベースの用語についてChatGPT先生に「データベースのテーブル、カラム、レコードについて小学生でもわかるように教えて！」と聞いた結果を記載しておきますのでご参照ください。
データベース（Database）:
データベースは、情報やデータを整理して保存する特別な場所のようなものです。例えば、本の図書館やおもちゃの箱のようなものと考えることができます。
データベースは、たくさんの情報を整理して保存するための大きなファイルや場所です。
テーブル（Table）:
テーブルはデータベースの中で、特定の種類の情報をまとめて保存する箱のようなものです。例えば、本の情報をまとめた本のテーブルやおもちゃの情報をまとめたおもちゃのテーブルがあります。
テーブルにはたくさんの列や行があり、それぞれが特定の情報を表しています。
カラム（Column）:
カラムはテーブルの中で、1つの情報の種類（例: 本のタイトル、作者、出版年など）を表します。本のテーブルなら、タイトルや作者、出版年などがそれぞれのカラムになります。
カラムは縦になっていて、同じ列にある情報は同じ種類のものです。
レコード（Record）:
レコードはテーブルの中で、1つのデータセット全体を表します。本のテーブルなら、1つの本の情報（タイトル、作者、出版年など）が1つのレコードになります。
レコードは横になっていて、同じ行にある情報は同じ本やおもちゃの情報など同じグループのものです。 簡単に言えば、データベースは情報を整理して保存する場所で、テーブルはその中で特定の種類の情報をまとめて保存する箱です。そして、カラムは箱の中の縦の列で、レコードは箱の中の横の行です。
データの準備
ノーコードと言いつつも、AppSheetでアプリを動かすためにはデータが必要となります。
まずはGoogleスプレッドシートで、DB（データベース）っぽくテーブルとカラム、あとは必要に応じてレコードを作成します。
スプレッドシートのシート自体がテーブルとなり、1行目がカラム、2行目以降がレコードとして認識されます。
テーブル内にカラムを増やしたい場合は、B列以降に追加しましょう。
テーブル1：表示画面
| テーブル名 | 定義 |
|---|---|
| allowance | 画面表示用データ |
| カラム名 | 定義 |
|---|---|
| uid | ユニークID |
| date | 日付 |
| children | 子どもの名前 |
| chores | お手伝い種別 |
| count | 回数 |
| price | 金額 |
このテーブルは、画面からお手伝い情報をポチポチ入れると情報が登録されていくので、レコードはあえて空にしておきます。
テーブル2：子どもの情報
| テーブル名 | 定義 |
|---|---|
| children | 子どもの情報 |
| カラム | 定義 |
|---|---|
| name | 子どもの名前 |
| レコード | 定義 |
|---|---|
| Takashi | たかし |
| Yasuko | やすこ |
| Yasue | やすえ |
| Daisuke | だいすけ |
| Maki | まき |
| Yutaka | ゆたか |
ここでは、アプリ内のドロップダウンリストから子どもの名前を選べるようにあらかじめ子どもの名前情報を登録しておきます。
※名前は吉本新喜劇からインスパイアされています。
テーブル3：お手伝い種別
| テーブル名 | 定義 |
|---|---|
| chores | お手伝い種別 |
| カラム | 定義 |
|---|---|
| name | お手伝いの項目 |
| price | 金額 |
| レコード | 定義 |
|---|---|
| Dish-washing | お皿洗い |
| Cleaning the bath | お風呂掃除 |
| Wipe the plate | お皿拭き |
| Toilet cleaning | トイレ掃除 |
| Cleaning of the entrance | 玄関掃除 |
| Folding laundry | 洗濯たたみ |
| Hang out the laundry | 洗濯干し |
ここでも、あらかじめお手伝いの種類を登録しておくことで、データベースを参照するときに自動的にドロップダウンリストが生成されます。
※お手伝いのお給料は、一律50円としました。
アプリの作成
次に「拡張機能」→「AppSheet」→「アプリを作成」を順番にクリックします。
アプリ作成画面へ遷移しましたが、ぜ、全部英語だと…！？
※今のところAppSheetのUIはすべて英語ですが、英語アレルギーの方ももう少しお付き合い頂けますと幸いです。
アプリ作成のために、まずは先ほど作成したデータベース（Googleスプレッドシート）を参照します。
本棚のようなアイコンをクリックすると、「Data」というタブが開きますので、「+」ボタンを押して先ほど作ったスプレッドシートを指定しましょう。
今回は先ほど作成した「PocketFlow」というスプレッドシートを選択しました。
データベースとテーブルをポチポチ選択すると、自動である程度アプリっぽいものが組み上がります（賢い！）
データのチューニング
もちろん、まだこのままでは色々と不都合があるため、データの細かい調整をしていきます。
まずは、「allowance」テーブルから見てみましょう。
調整する箇所を項目ごとに列挙していきますので、一旦記載の通りに設定してみて、
ご自分のオリジナルアプリを作る際は設定を変更してみてください。
◆allowanceテーブル
| NAME | TYPE | KEY? | LABEL? | FORMULA | SHOW? | EDITABLE? | REQUIRE? | INITIAL VALUE | (省略) | SEARCH? |
|---|---|---|---|---|---|---|---|---|---|---|
| uid | Text | オン | - | - | - | オン | オン | =UNIQUEID() | - | - |
| date | Date | - | オン | - | オン | オン | オン | =TODAY() | - | オン |
| children | Ref | - | - | - | オン | オン | オン | - | - | オン |
| chores | Ref | - | - | - | オン | オン | オン | - | - | オン |
| count | Number | - | - | - | オン | オン | オン | =1 | - | - |
| price | Price | - | - | =([count] * 50) | オン | オン | - | =50 | - | - |
ここの設定部分で2つ注意点があります（両方ともデフォルト設定に起因しています）
1つは、デフォルトのままでは$（ドル）表示となっているため、¥（円）表示に直す必要があります。
2つ目は、価格が小数点第二位まで表示するようになっているため、小数点以下を表示しないように修正します。
設定を変更するために、allowanceテーブルのpriceカラムの横の鉛筆マークをクリックします。
Decimal digitsの値を2から0へ変更し、
Currency symbolの値は$から¥に変更しましょう。
これで、allowanceテーブルのチューニングは完了です。
◆childrenテーブル
| NAME | TYPE | KEY? | LABEL? | FORMULA | SHOW? | EDITABLE? | REQUIRE? | INITIAL VALUE | (省略) | SEARCH? |
|---|---|---|---|---|---|---|---|---|---|---|
| name | Name | オン | オン | - | オン | オン | オン | - | - | オン |
※Related allowancesの項目は自動で紐づけられるため、FORMULAにREF_ROWS("allowance", "children")と記載があることをご確認ください。
◆choresテーブル
| NAME | TYPE | KEY? | LABEL? | FORMULA | SHOW? | EDITABLE? | REQUIRE? | INITIAL VALUE | (省略) | SEARCH? |
|---|---|---|---|---|---|---|---|---|---|---|
| name | Name | オン | オン | - | オン | オン | オン | - | - | オン |
| price | Price | - | - | - | オン | オン | オン | - | - | - |
※Related allowancesの項目は自動で紐づけられるため、FORMULAにREF_ROWS("allowance", "chores")と記載があることをご確認ください。
設定項目の説明
以下、設定した項目に関するざっくりとした注釈です（※知見のある方、間違っていたらご指摘ください）
KEY?：今回は文字通り、ユニークID（uid）が情報を登録するたびに独自のIDを生成するようにしています。
FORMULA：priceに設定した数式により、金額の項目には自動的に「回数 x 50」が計算された値が格納されます。
SHOW?：アプリ使用者に情報を見せるかどうかを決めます。
EDITABLE?：項目を編集可能にするかどうかを設定します。
REQUIRE?：データの登録を必須とし、項目が未入力だとエラーが出るようになります。
INITIAL VALUE：デフォルト値を設定します。
countを1回、priceを50円などと初期表示することができます。
dateに設定した「=TODAY()」は、Excelと同様に今日の日付を取得します。
uidに設定した「=UNIQUEID()」は、データが登録されるたびに自動的にユニークIDを生成してくれます。
SEARCH? ：該当の項目で検索できるかどうかを設定します。
アプリの見た目を設定する
次に、スマホ画面のUI（見た目）を決めていきます。
スマホの形をしたアイコンを選び、以下の項目を確認していきましょう。
※「Allowances」の項目がなければ、「PRIMARY NAVIGATION」の横の「+」から項目を追加します。
View name：Allowances
For this data：allowance （データ参照元のテーブルを選択します）
View type：deck（こちらはお好みで選択してOKですが、無難にdeckが見やすいです）
Position：middle
View Options：
Sort by：date, Ascending
Group by：
children, Ascending
date, Ascending
Group aggregate：SUM::price（ここの設定で、子どもたちのお小遣いの統計を自動算出したものが表示されます）
Main image：Auto assign(None)
Image shape：Square Image
Primary header：date
Secondary header：chores
Summary column：count
Nested table column：None
Show action bar：オン
Actions：デフォルトの状態でOK
インストール準備と動作確認
さぁ、これでアプリ作成完了です！
どんなふうに動くようになったのか確認してみましょう。
上部ツールバーの「Share」をクリックし、アプリを使用するユーザーのメールアドレスを入力します。
メールアドレスの横に「Use app」を選択し、ウインドウ右下の「Send」でアプリをインストールするURLを送信します。
受信したメールをスマホで開きます。今回はスマホにアプリをインストールしますが、このアプリはタブレットまたはPCでもそのまま利用できます。
スマホから動作確認していますが、もちろんPCでAppSheetを作成している画面上からでも動作確認が可能です。
画面上の「+」ボタンを押すことで、データが登録できるようになっています。
データを登録すると、子どもの名前とお小遣いの小計が表示されるようになりました。
子どもの名前をクリックすると、お手伝いをした日付と、その日稼いだお小遣いの合計額が表示され、
ゴミ箱ボタン、編集ボタンを押すことでそれぞれデータの削除、更新ができます。
まとめ
AppSheetを使ったお小遣いアプリの作成はいかがだったでしょうか？
今回はシンプルなアプリを作成してみましたが、他にも見た目の画面を追加することで月統計、年統計タブを作成したり、
カレンダーで予定帳アプリを作ることもできるようです。
スマホ、タブレット、PCと機器ごとに作り分ける必要がなく、サーバやデータベースの用意はおろか、データベースのおおまかな知識さえあればコーディングさえ必要ないノーコードアプリAppSheetについて今回はお伝えしました。
ご家庭やスポーツ少年団、サークル、地域のコミュニティー、あるいは個人事業などで活用されてみてはいかがでしょうか？
HapInSではこのようなアプリ開発、Web開発を得意とする人材が多く在籍していますので、ご興味のある方はぜひお問い合わせ頂けますと幸いです！
