kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- appsheetの勉強をしながらアプリを自分で作ってみたい人
- 自分の本当の時給を計算したい人
いきなりですが面白いアプリを作りました！(^^)
社会人のおよそ9割が会社員とのことで、毎月の給与明細を楽しみにしている人も多いと思います。
日本には納税の義務があるので、税金や健康保険料が給料から控除されます。
私は読書が好きで、資産形成の本などもたまに読みます。その時ふと思いつきました。
収入から控除を差し引いた手取り収入をベースに、労働時間や残業時間、通勤時間などの実質の労働時間を考慮し、自分の本当の時給を計算できるアプリを作ったら面白いのでは？と
興味のある読者のかたは、ぜひ作ってみていただきたいと思います。
それでは勉強していきましょう(^^)
アプリ作成のためのデータについて
使用するのは毎度おなじみのスプレッドシートです。
Googleアカウントを持っている方は無料で使えますので、以下の参考リンクからどうぞ(^^)
今回のアプリで使うカラムです。
このようなイメージです(^^)
当月の時給換算を計算するためにあれこれ入力するんだと思ってください。
今回のアプリで使うカラムです。
このようなイメージです(^^)
平均時給の情報を入手するために、あれこれ入力するんだと思ってください。
これで下準備は完了です。早速アプリの作成に移りましょう！
カラムのデータタイプの設定
まずは給与明細シートと時給計算シートの両方をデータとして読み込んでください。
シートの読み込みが終わったら、上図のように登録するデータのタイプを設定していきます。
設定する項目が非常に多いので1つずつ確実に処理していきましょう！
給与明細シート
先に給与明細シートから編集をしていきます。
各カラムの設定内容については下記のボックスを参考にどうぞ(^^)
Show？のチェックを外します。
TypeをPriceに変更、Decimal digitsを0、Currency symbolを￥にします。
控除額カラムについても同じ設定をします。
TypeをPriceに変更、Decimal digitsを0、Currency symbolを￥にします。
App formulaに[支給額]-[控除額]を入力します。
こうすることにより、自動で手取り収入を算出することが可能です。
TypeをNumberにし、Initial valueに20を入力します。
この20は、1か月のうち20日働くというイメージです。
TypeをDecimalに変更し、赤枠の部分を参考に数値の設定をします。
Valid ifに[有給日数]>=0、Initial valueに0を入力
TypeをDecimal、App formulaに1.0*[出勤日数]-[有給日数]を入力します。
TypeをDecimal、赤枠の部分を参考に数値の設定をします。
App formulaに[実働日数]*8.00+[残業時間]と入力する。
ここの計算式にある数値に関しては、
勤務先で定められている一日の就業時間を入力（仮で8.00と入力しています）
小数点第二以下まで入力が必要
TypeをNumber、Valid ifに[_this]<=[出勤日数]を入力します。
[_this]が指すものは今選択しているカラムです（この場合は[出社日数]）
出社日数は出勤日数よりも多いことはありえないので、入力制限のために設定
TypeをDecimal、App formulaに[出社日数]*1.00と入力します。
ここの計算式にある数値に関しては、
一日の往復にかかる通勤時間をHour単位で入力（1時間半なら1.50、40分なら0.66）
小数点第二以下まで入力が必要
TypeをDecimal、App formulaに[実務時間]+[通勤時間]と入力します。
TypeをPriceに変更します。
Currency symbolを￥、App formulaに[手取り収入]/[総勤務時間]と入力
続いて、バーチャルカラム（データとしては存在するカラム）の設定をします。
Add Virtual columnをクリックします。
Column nameにyyyy/mm、App formulaにtext([支給日],”yyyy/mm”)と入力
参考記事のご紹介です
Text関数の中で最低限覚えておくべきものが学べます(^^)
【永久保存版】appsheetで覚えておくべきText関数
以上で給与明細シートの設定は完了です。お疲れさまでした！
時給計算シート
続いて、時給計算シートのカラム設定に移ります。
もう飽きた！って思うところですが、あともうちょっとなので頑張りましょう(^^)
こちらのシートは先にVirtual columnの作成から行います。
最初にAdd virtual columnをクリックします。
Column nameに選択期間の手取り収入、App formulaに[算出期間][手取り収入]と入力
最初にAdd virtual columnをクリックします。
Column nameに選択期間の勤務時間、App formulaに[算出期間][総勤務時間]と入力
続いて、フィジカルカラムの設定をします。
Show?のチェックを外します。
TypeをEnumlist、Base typeをRef、Referenced table nameを給与明細にします。
Suggested valueに給与明細[ID]と入力します。
TypeをPriceに変更します。
Decimal digitsを0、Currency symbolを￥にします。
App formulaにsum([選択期間の手取り収入])と入力
TypeをDecimalに変更します。
Decimal digitsを2、App formulaにsum([選択期間の勤務時間])と入力
TypeにPriceを選択します。
Decimal digitsを0、Currency symbolを￥にします。
App formulaに[合計手取り収入]/[合計総勤務時間]と入力
これでカラムの設定は完了です。お疲れさまでした！
Viewの設定
ここではアプリやブラウザで表示する画面の設定をします。
UXペインのViewタブから赤で囲まれた部分を修正します。
こちらも以下の赤で囲まれた部分を修正します。
View画面の挙動を検証
カラム設定とView設定が完了したので最後にアプリの使用感をチェックします。
入力が完了したら画面下にあるSAVEを押して保存します。
算出期間を入力したら残りは全て自動で計算されます。
本記事の手順を追っていただいた方は、無事に登録や編集ができていると思います(^^)
まとめ
以上、時間単価を計算するアプリの作成についての記事でした。
このアプリは、enumlistやrefなどappsheetでアプリを開発するうえで、重要な設定についても学べます。
手順が多くて嫌になりそうですが、基本を抑える意味でもぜひ最後までトライしてみてください。
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)