【 AppSheet 実践】勤怠アプリをつくろう【サンプルあり】
こんにちは。吉積情報(株)アプリケーション開発部のイイズナです。
アプリのつくりが簡単にわかる「AppSheet 実践シリーズ」。
今回は「勤怠アプリ」のつくり方です。
見ているだけよりも自分でやってみた方が早く覚えられます。
ぜひ一緒にアプリをつくってみてください。
▼今回のサンプルはこちら▼
こちらからサンプルアプリをご確認ください。
記事だけじゃわからない!という方は実際のアプリの設定を見て真似してみてくださいね。
【利用場面】
小規模の店舗における、アルバイトの出勤管理。
【機能】
・出勤、退勤、休憩時間の記録
・現在出勤中のスタッフの一覧
・過去の出勤記録の確認
・所属スタッフの一覧
サンプルのため、あえてユーザー別の画面表示制御などは最小限にしております
データソース
サンプルのため Table が 2 つのみと、シンプルなつくりになっています。
■「勤怠ログ」Table
日々の勤務データを蓄積するログデータです。
■「従業員一覧」Table
ユーザーである従業員のデータを格納するマスタデータです。
実用であれば、マスタデータは限られた人のみが編集できる権限を持つことが推奨されます。
勤怠ログには、全ての従業員の勤怠データがまとめて格納してあります。
これを、後ほどご説明する Slice という機能で「個人別の勤怠データ」などほしい情報のみを表示させたりなどします。
従業員一覧には、ユーザーに関する情報、給与計算用の時給や権限などがあります。
実用的にするのであれば、この「権限」に基づいて画面ごとの編集権限・閲覧範囲などを制御することが望ましいでしょう。
今回はサンプルである便宜上、権限周りの設定は割愛しております。
Table 設定
Data の中、Table の設定について見ていきます。
「勤怠ログ」Table
「勤怠id」カラムをキーとして構成されています。
特徴的なのは、DateTime、Duration などの時間に関する TYPE、お金に関する TYPE の Price、小数点(時給計算時の時間)の計算に関する TYPE の Decimal、整数に関する TYPE の Number など、「数値」に関するデータ TYPE の使い分けが多いことです。
従業員カラムは従業員 Table を Ref で参照しているので、VC_プロフィール写真カラムをつくることで従業員 Table にある写真データもこの Table で表示することができます。
▼設定値▼
「従業員一覧」Table
初回にアプリを開いた際に表示される Form 画面でユーザー登録をすると、従業員一覧に表示されるようになります。
実用場面では、この画面は管理者のみが閲覧できるようにし、「スタッフ」や「リーダー」など管理者権限を設定して画面の表示権限制御を行うとよいでしょう。
▼設定値▼
仮想列
仮想列(virtual column)がありますが、時間や少数などは給与計算をするために使う数字の前処理、合計給与は給与計算、VC_プロフィール写真は「従業員一覧」からプロフィール写真を参照するためのカラムとして存在します。
VC_プロフィール写真の FORMULA の内容例。
勤怠ログ Table の「従業員」カラムは、従業員のメールアドレスを使って従業員 Table を参照しているので、従業員 Table のデータを取りに行くことができます。
以下の例では、仮想列をつくって従業員カラムを通して参照して、プロフィール写真を表示できるようにしています。
[従業員].[プロフィール写真]
Slice 設定
Table のデータのうち「フィルタリングされたデータのみを View に表示したい」場合は、Table の代わりにデータソースに Slice を指定します。
Slice の作り方は、Slice 名やソーステーブルを設定し、フィルタ条件に条件式を書くだけです。
必要に応じて適宜必要カラムの絞り込みや、データ編集に関する制御も行うことが可能です。
このアプリでは「自分の勤怠(出勤中)」と「出勤中」の2つの Slice をつくります。
これらは後ほど View のデータソースに指定します。
条件式は、それぞれ以下のとおりです。
Slice:自分の勤怠(出勤中)
AND([従業員]=USEREMAIL(),TEXT([出勤],"yyyy/mm/dd")=TEXT(TODAY(),"yyyy/mm/dd"))
ユーザーのメールアドレスと日付をもとに、ユーザー自身の本日の出勤データを取得します。
Slice: 出勤中
ISBLANK([退勤])
”退勤していない”=”出勤中の”ユーザー一覧を取得します。
こちらは ISBLANK 関数に退勤カラムをネストするだけなので簡単ですね。
あわせて覚えよう
基本的な関数 ISBLANK、ISNOTBLANK。
以下のように、関数のカッコ内にカラムを入力すると、そのデータがブランク(空白)かどうかを判定できます。
ISBLANK([カラム]) :カラムが空白かどうか
ISNOTBLANK([カラム]):カラムにデータが存在する(=空白ではない)かどうか
View 設定
つくる必要のあるViewは、全部で5つです。
また、それ以外にも SYSTEM GENERATED で自動生成されたビュー(Detail、Form、Inline)にも場合によって適宜設定が必要なことも忘れないでください。
ビューの役割や構成をざっくり説明します。
Primary Navigation
- 出勤
- 出勤した時に、ユーザー名を確認しつつタイムカードを打刻する画面。
- タイムカード
- 休憩の開始・終了、退勤時にタイムカードを打刻する、勤務時間を確認する画面。
Menu Navigation
- 出勤中
- 出勤している従業員(ユーザー)の一覧を確認する画面。
- 勤怠ログ
- 全ユーザーの過去の勤務データ全てを表示する画面。
- 実用場面では、管理者のみに表示させるようなものです。
- 全ユーザーの過去の勤務データ全てを表示する画面。
- 従業員マスタ
- 従業員の設定時給、給与等を確認する画面。
- 実用場面では、管理者のみに表示させるようなものです。
※サンプルである便宜上、管理者にのみ表示すべき画面も制御せずに全てのユーザーに表示しています。
- 実用場面では、管理者のみに表示させるようなものです。
- 従業員の設定時給、給与等を確認する画面。
各 View の代表的な設定値は以下のとおりです。
アプリを初めて開いた時に表示されるユーザー登録のビューは、System Generated にある自動生成の「従業員一覧 Form」です。
本来は、この Form を管理者のみが利用できるようにした方がよいですが、サンプルのため最初にご自身のログインアドレスでユーザー登録できる仕様になっています。
Action 設定
タイムカードを打刻する場合などに使う”ボタン”、Action の設定をしましょう。
「遷移_自分のタイムカードへ」ボタンは画面遷移をするので Target に設定する値には数式「LINKTOVIEW」を使います。
似たような関数、LINKTOROW や LINKTOFORM なども存在しますが、今回は「タイムカード」ビューへ遷移するのでこのLINKTOVIEWを使います。
LINKTOVIEW("タイムカード")
あわせて覚えよう
Target の設定値には ""(ダブルクォーテーション)で囲った URL を直に指定することも可能です。
今回の例では、
例「"https://www.appsheet.com/start/37f41....."」
とすることもできますが、
例「 LINKTOVIEW ("タイムカード")」を設定値にします。
この” URL ”は対象ビューの「Behavior」に記載の App link です。
各 Action の代表的な設定値は以下のとおりです。
つくったアプリを確認する
アプリができたらアプリの動作確認等をしてみましょう。
ポイントは、ユーザー目線で不便がないかどうか、混乱するような導線になっていないか、設定漏れがないかどうかです。
具体的には、
- 画面が適切に表示されているか(表示制御ができているか、不要な画面が出ていないか)
- 画面の並び順がわかりやすいか(よく使う画面などが優先されているか)
- 必要・不要なボタンの設置有無(編集させたくない画面に編集ボタンをおいていないか)
- ユーザーごとのカスタマイズができているか(他の人のデータが不用意に見ることができる設定になっていないか)
- 初期値の設定をしているか(Initial Value などでデフォルト値が設定できる)
- Action や 画面遷移が想定通りに動いているか
- 画面名やカラム名の不備はないか(適宜ユーザーフレンドリーな名前をつける必要がある)
といったことに留意すると、良いアプリがつくれると思います。
おわりに
いかがでしたか。
このようにアプリをつくる練習を続けていれば、自然と AppSheet 特有のコツが掴めるようになりますので、ぜひつくってみてください。
「そんな時間ない!」「直接質問したい!」という方などに向けて、弊社 吉積情報(株)では AppSheet トレーニングやサポートサービスも提供しております。
お困りのことがございましたら、AppSheet を利用するのに必要な Google Workspace の知見も豊富な弊社にご相談ください。
無料の Webセミナーも随時開催しておりますので、ご興味があればいらしてくださいね。
ありがとうございました。それではまた次回お会いしましょう。
サンプルアプリのご案内
※いただいたコメントは全て拝見させていただきますが、全てのご質問にはお答えできないことがございますので、あらかじめご了承くださいませ。
Discussion