【実用レベル】appsheetで出勤アプリを作ってみよう

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回はアプリ開発の実践記事です。

私がappsheetを勉強して、一番最初に作ったアプリが出退勤を管理するアプリでした。

あの頃はアプリ開発なんて全く出来る気がしなかったな・・

上司に言われて嫌々ノーコードの勉強をさせられて・・

でも、気がついたら休日返上でノーコードの勉強をしている変態勇者にまで成長しました！笑

当時のアプリはとても使いやすいものではありませんでしたが、今なら出来る！と思い記事にしました。

それでは勉強していきましょう(^^)

アプリ開発をしたことがない人は参考記事から勉強するのがおすすめです

データシートの作成

管理する項目については、以下のカラムで今回は実践しています。

出退勤管理一覧

項目としては、出勤者の名前と日付、就業時間が分かるようなカラム構成としました(^^)

チームメンバー

こちらのシートには名前とemail、あとは管理者のみ見せたいViewを作ろうと思うので、管理者カラムを作ってあります(^^)

管理者カラムを作ることのメリットについては、こちらの記事を参考にしてください

読み込むデータの作成が完了したら、appsheetにデータを取り込みましょう。

データカラムの設定とアクションボタンの作成

次に読み込んだデータを扱いやすいように修正を加えていきます。

まずはデータタイプの編集から参ります(^^)

出退勤管理一覧のデータカラム編集

IDカラム

IDカラムのShow?のチェックを外します。

日付カラム

日付カラムのデータタイプをDateにして、Initial Valueにtoday()を入力します。

名前カラム

名前カラムのタイプをRef、参照テーブルをチームメンバーにします。

また、Initial Valueにはuseremail()を入力しておきましょう。

始業時刻カラム

始業開始カラムのタイプをTime、Ignore secondsにチェックを入れます（秒を無視する設定）

また、Initial Valueにはtimenow()を入力しておきましょう。

終業時刻カラム

終業開始カラムのタイプをTime、Ignore secondsにチェックを入れます（秒を無視する設定）

以上で出退勤管理一覧テーブルの設定は完了です。

始業時コメント、終業時コメント、連絡事項はそのまま（タイプText）で構いません。

続いて、チームメンバーテーブルの編集に移ります。

チームメンバーのデータカラム編集

カラムのKEY値とLABEL値の設定

emailをKEY値、名前をLABEL値に変更します。

他の項目はいじらなくて大丈夫です。

データタイプの編集はこれで完了です。

お疲れさまでした(^^)

アクションボタンの作成

ここからは、アクションボタンの作成の説明をします。

アクションボタンでは

• CSVにデータをエクスポート
• 他のView画面に遷移
• メールを送信

と様々なことを実装することが可能です。今回使うのは

セットしておいた値をカラム値に送る

この機能を使ってみたいと思います。

終業時刻を打刻するアクションを作成する

写真の赤枠部分を参照し、同じようにデータを編集してください。

input()アクションを作成する

• 終業時刻に[_input].[終業時刻]
• 終業時コメントと連絡事項に[_input].[終業時コメント]と[_input].[連絡事項]

AdvancedのInputsを上図のように設定します。

input()関数について

2024年6月にinput()関数の仕様が変わりました！

括弧の中に引数を入れるものではないので、関数と呼べるものではなくなりました・・

作成したアクションを1つにまとめる終業ボタンを作成する

Actionsは打刻（timenow()を取得する）アクションを上にしてください。

この条件式を入力することで、終業ボタンは一度しか押せなくなります

仮に間違えて押してしまった場合もやり直しがきかないので、それを防ぎたい場合は条件式を入力しないでください。

isblank()関数については、こちらの記事を参考にしてください

参考記事

Yes/Noを返す条件式が求められる箇所や関数についてまとめました(^^)
【永久保存版】appsheetで覚えておくべきYes/No関数

AddボタンとEditボタンを画面から消す(System generated)

ProminenceをDo not displayに変更します。（Editボタンも同じように）

これでアクションボタンの設定は完了です。お疲れさまでした(^^)

View画面を整える

続いてViewの設定をしていきます。

アプリの画面は使用者にとって非常に重要なものなので、そこを作り込んでみましょう。

新規に出勤情報を登録するViewを作成する

まずは、チームメンバーの出勤状況を登録するViewを作成します。

Form Viewの作成

設定としては赤枠の部分だけでOKです(^^)

自分の出勤状況が分かるViewを作成する

次に、登録したデータの中で自分が登録したデータだけが表示されるViewを作成します。

今回は、スライステーブルを使用してみたいと思います。

スライステーブルの作成

• Source Tableは出退勤管理一覧
• Row filter conditionに[名前]=useremail()

この設定でスライステーブルを作成したら、今度はViewの作成をします。

自分の出社状況がわかるViewの作成

参照テーブルには、先ほど作成したスライステーブルを指定します。

上記設定で、自分が登録したデータのみを表示させるViewの完成です(^^)

管理者がチームメンバーの状態を確認できるViewを作成する

最後に、管理職の人がチームメンバーの就業状況を確認するためのViewを作成したいと思います。

管理者専用のViewを作成

赤枠で囲まれた部分を参考にデータの編集をします。

any(select(チームメンバー[管理者],[email]=useremail()))

Show ifには上記の構文を入力してください。

アプリ画面の確認

作成したアプリに出社と退社の入力、表示されるデータの確認をしてみます。

チームメンバーの場合

まず、管理者ではないチームメンバーのアプリの見え方からいきましょう(^^)

出勤の日時を登録する

最初に出社登録タブをクリックします。

始業時刻と始業時コメントを入力してSaveを押します。

退勤時間を登録する

自分の出社表タブを選択した状態で、本日の日付をクリックします。

画面右下にある終業ボタンを押します。

終業ボタンを押すと終業時刻、終業時コメント、連絡事項のポップアップが立ち上がるので入力してSaveを押します。

入力したデータが無事にアテンドされています(^^)

管理者の場合

続いて、管理者がログインした場合のアプリ画面を見てみましょう。

管理者にはメンバーの就業状況のタブが見えるようになっています。

Viewの中身は従業員ごとの就業状況が一覧で見られるようにしてあります。

まとめ

以上、出退勤アプリの作成でした。

他にもまだまだ機能として考慮すべき点は多々あります。

• 従業員の現在のステータスを表示させる（出社、在宅、出張など）
• 勤務時間の自動計算（残業時間の合計）
• 上司への終業自動連絡

こういった機能を実装するのも面白いかもしれません。

需要がありそうならアプリ作成第二弾も考えたいと思います。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)