こんにちは。「タスク管理アプリ」の作成について解説する連載の第2回目です。
今回は、アプリの中に「打刻管理」機能を実装していきたいと思います。
前回までの振り返り
第1回では、タスク管理アプリの概要やアプリのレイアウト、ユーザー情報の表示方法までをご紹介しました。
まだ読んでいない方は、先に第1回を読むことをお勧めします。
前回のゴールの時点では以下の様なイメージです。
今回のゴール
今回のゴールは、アプリの中に「打刻管理」機能を実装することです。
この機能を実装することで以下が実現できます。
- 勤怠開始
- 休憩の開始
- 勤怠終了
※もともとは、トグルで勤怠開始、終了を切り替える想定でしたが、以下の懸念があることからボタンで制御するようにしました。
- トグルだとクリックが連打できてしまい、アプリのパフォーマンスが落ちる懸念がある。（トグルを切り替えるごとにリストに対して休憩時間を登録する処理を入れているため）
- ボタンのほうが見栄えが良い。
では、早速作成していきます。
SharePoint Online の準備
まずは、打刻情報を格納するためのリストを作成していきます。
SharePoint Online（以下SPO）で以下のリストを作成します。
■打刻管理リスト
| 列名 | 列の種類 | 備考 |
| ID | 既定 | - |
| ユーザー名 | ユーザー | - |
| ステータス | 選択肢 | 勤務中/休憩中/退勤中 |
| 勤務開始時間 | 日付と時刻 | 時間を含める |
| 勤務終了時間 | 日付と時刻 | 時間を含める |
| 休憩開始時間 | 日付と時刻 | 時間を含める |
Power Appsの構築
打刻の登録
レイアウトの構築
1. [挿入]タブ>[テキストラベル]の順に選択します。
2. [ラベル]を選択すると画面上にラベルが表示されるので、任意の場所に配置します。
また、挿入したラベルのTextプロパティを"ステータス"に修正します。
3. [挿入]タブ>[チェックボックス]の順に選択します。
（チェックボックスは[入力]に分類されています。）
4. チェックボックスが画面内に作成されたら、大きさや文字を修正します。
▼画像内のチェックボックスの設定値（左がプロパティ名、右が設定値）
- CheckboxSize：25
- Text："休憩中"
- Size：10
- FocusedBorderThickness（チェックしたときに表示される枠線の幅）：0
5. [挿入]タブ>[ボタン]の順に選択します。
6. ボタンが作成されたら、大きさや文字を修正します。
▼画像内のチェックボックスの設定値
- Text："勤務開始"
- Width：75
- Height：28
7. 作成したボタンを選択したまま、Ctrl + C でコピーし、Ctrl + V で貼り付けます。
※このショートカットキー操作はよく使うのでぜひ覚えてください。
8. 手順7で作成したボタンの表示名や色を修正します。
また、ボタンの位置は勤務開始用のボタンと重なるように移動させてください。
▼画像内のチェックボックスの設定値
- Text："勤務終了"
- Fill：RGBA(116, 116, 116, 1)
- HoverFill：ColorFade(RGBA(116, 116, 116, 1), -20%)
これで打刻の登録のレイアウトは一旦完了です。
次に、実際にボタンを押した際に勤怠時間を登録する機能を実装していきます。
補足：コントロール名の修正について
今まではラベルやボタンを追加した際に、そのコントロール名を修正していませんでしたが、ここで修正しておきます。名前をちゃんと付けることでアプリのメンテナンスの向上にもつながります。
【修正方法】
1. 対象のコントロールを選択し、「･･･」 > 名前の変更を選択し、任意の名前に修正します。 （対象のコントロールを選択し、「f2」を押しても修正できます。）
▼修正したもの
※「Ractangle1」は不要のため削除しました。
★コントロール名のつけ方については以下のリンク先にあるコーディング規約を参照してください。
自分の情報の設定
実際に打刻登録機能を実装する前に、今後の手順でよく使用する「自分の情報」を設定します。具体的には、自分の表示名やメールアドレスなどの情報をグローバル変数に格納します。
1. [データ] > [データの追加] から 検索バーに「Office」と入力します。
検索結果に表示されている、「Office 365 Users」を選択します。
2. 接続するアカウントを選択します。
3. 実際に接続したOffice 365 Usersコネクタを使用して自分の情報を変数に格納します。
App > OnStartプロパティに以下の関数を記載します。
⇒Set(myInfo,Office365ユーザー.MyProfileV2());
※OnStartプロパティは、アプリ起動時に処理される部分です。
4. App > 「･･･」 > 「OnStart を実行します」を選択します。
5. App > OnStartプロパティに記載した関数内の"myInfo"をダブルクリックします。
左下に ∨ が表示されるので、クリックします。
6. 自分の表示されている情報が確認出来たら完了です。
勤怠開始時間の登録
1. [データ]から今回作成した「打刻管理リスト」（以下、リスト）を接続します。
※詳細のやり方は、第1回 に記載されている [ギャラリーのデータソース接続]を参照してください。
2. 勤務登録ボタン押下時に、リストに勤怠開始時間を登録できるように実装します。
Home Screen > btnStartWork > OnSelectプロパティに以下の関数を記載します。
▼関数
Patch(
打刻管理リスト,
Defaults(打刻管理リスト),
{
ユーザー名:{
'@odata.type':"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
Claims:"i:0#.f|membership|" & myInfo.mail,
DisplayName:myInfo.displayName,
Email:myInfo.mail,
Department:myInfo.department,
JobTitle:myInfo.jobTitle,
Picture:""
},
ステータス:{Value:"勤務中"},
勤務開始時間:Now()
}
);
Patch関数については以下を参照してください。
※ユーザー列と選択肢列は、画像のように{}で設定する必要があることに注意してください。
3. 実際にボタンを押して動作を確認します。
Altを押しながらボタンをクリックします。（f5を押してアプリを実行モードにしてボタンを押すこともできます。）
※勤務終了ボタンが邪魔で押せない場合は、勤務終了ボタンの表示をオフにします。
4. 打刻管理リストを確認してみると、データが登録されていることがわかります。
これで勤務開始時間の登録は完了です。
勤務終了時間の登録
1. 勤務終了ボタン押下時に、リストに勤怠開始時間を登録できるように実装します。
Home Screen > btnEndWork > OnSelectプロパティに以下の関数を記載します。
▼関数
UpdateContext(
{
myLastWorkData: Last(
Filter(
打刻管理リスト,
ユーザー名.Email = myInfo.mail
)
)
}
);
Patch(
打刻管理リスト,
LookUp(打刻管理リスト,ID = myLastWorkData.ID),
{
ステータス: {Value: "退勤中"},
勤務終了時間: Now()
}
);
2. 実際にボタンを押して動作を確認します。
Altを押しながらクリックします。
※勤務終了ボタンの表示をオンにしてから確認します。
3. 打刻管理リストを確認してみると、データが更新されていることがわかります。
これで勤務終了時間の登録は完了です。
休憩時間の登録
1. 休憩チェックボックス押下時に、リストに勤怠開始時間を登録できるように実装します。
Home Screen > chkStartBreak > OnCheckプロパティに以下の関数を記載します。
▼関数
UpdateContext(
{
myLastWorkData: Last(
Filter(
打刻管理リスト,
ユーザー名.Email = myInfo.mail, ステータス.Value = "勤務中"
)
)
}
);
Patch(
打刻管理リスト,
LookUp(打刻管理リスト,ID = myLastWorkData.ID),
{
ステータス: {Value: "休憩中"},
休憩開始時間: Now()
}
);
2. 実際にボタンを押して動作を確認します。
まずは、勤務開始ボタンをクリックします。
リストにレコードが追加されたら、チェックボックスをクリックします。
3. 打刻管理リストを確認してみると、データが更新されていることがわかります。
これで休憩開始時間の登録は完了です。
ボタンの制御
ここまでで打刻の登録機能の実装が完了しました。
ただ、実際に利用する際には勤務開始ボタンと勤務終了ボタンが一緒に表示されては使いづらいですし、誤って意図していないボタンを押してしまう場合もあります。
そのため、ここからボタンの表示/非表示をうまく利用して制御を行っていきます。
勤務開始・終了ボタンの制御
まずは、勤務開始・終了ボタンの制御を実装します。
具体的には、
ステータスが"退勤中"の場合は、勤務開始ボタンのみを表示させ、
ステータスが"勤務中"の場合は、勤務終了ボタンのみを表示させます。
1. 勤務開始ボタンを押したら、各ボタンの表示・非表示を切り替えるために変数を設定します。
Home Screen > btnStartWork > OnSelectプロパティに以下の関数を追記します。
⇒UpdateContext({visBtnSW:false});
UpdateContext({visBtnEW:true});
※変数名は仮でvisBtnSWとvisBtnEWとしていますが、ほかの名前でも大丈夫です。
2. 勤務終了ボタンも同様に変数を設定します（設定値は勤務開始の逆）。
⇒UpdateContext({visBtnSW:true});
UpdateContext({visBtnEW:false});
3. Home Screen > btnStartWork > Visibleプロパティに以下の関数を追記します。
※Visibleプロパティはコントロールの表示・非表示を設定する部分
⇒visBtnSW
4. Home Screen > btnEndWork > Visibleプロパティに以下の関数を追記します。
⇒visBtnEW
5. 画面を見ると両方のボタンが非表示になっていることがわかると思います。これは、まだ変数に何も設定されていないことが原因です。そのため、[挿入] > ボタン でボタンを追加し、OnSelectプロパティに以下の関数を記載します。
⇒UpdateContext({visBtnSW:true});
6. 手順5で作成したボタンをAlt を押しながらクリックすると、勤務開始ボタンだけ表示されます。
7. 勤務開始ボタンを押下すると、勤務開始ボタンが非表示になり、勤務終了ボタンだけ表示されます。確認出来たら、勤務終了ボタンも押して動作を確かめてください。
休憩チェックボックスの制御
続いて、休憩チェックボックスの制御を実装します。
具体的には、ステータスが勤務中の場合は表示、退勤中の場合は非表示させます。
1. 休憩チェックボックスの表示ロジックは勤務終了ボタンと同じため、
Home Screen > chkStartBreak >プロパティに以下の関数を記載します。
⇒btnEndWork.Visible
アプリ起動時に現在のステータスを反映
ここまでで勤務開始・勤務終了ボタン、休憩チェックボックスの制御の実装ができました。
ただ、このままではいちいちボタン（Button3）を押さないと勤務開始ボタンが表示されなくなります。また、アプリ起動時に現在のステータスに関係なくボタンが表示されない事象が発生します。
そのため、アプリ起動時に現在のステータス情報を取得し、これらの事象を解消していきます。
1. App > OnStartプロパティに以下の関数を記載します。
⇒Set(myStatus,Last(Filter(打刻管理リスト,ユーザー名.Email=myInfo.mail)).ステータス.Value);
2. Home Screen > btnStartWork > Visibleプロパティに以下の関数を記載します。
⇒visBtnSW || myStatus = "退勤中" || IsBlank(myStatus)
※"||"は条件における"または"の機能をもちます。
※IsBlank(myStatus)は、リストにある自分の打刻情報が1件もない場合も勤務開始情報を表示させるために追記しました。
※"||"を使って条件を繋げないやり方もありますが、OnStartプロパティに式を多少記載しなければならなくなるため、今回はVisibleに3つの条件式を入れて対応しました。
3. Home Screen > btnEndWork > Visibleプロパティに以下の関数を記載します。
⇒visBtnEW || myStatus = "勤務中" || myStatus = "休憩中"
4. Home Screen > chkStartBreak > Defaultプロパティに以下の関数を記載します。
⇒myStatus = "休憩中"
5. 不要なボタン（Button3）を削除します。
6. 実際に動作を確認します。まずは現在のリストの中身を確認します。
7. アプリに戻り、App > 「･･･」 > 「OnStart を実行します」を選択します。
手順5の画像では、最新のレコードのステータスが"勤務中"となっていますので、アプリ起動時には、休憩ボタンと勤務終了ボタンが表示されました。
8. 続いてアプリを公開します。
9. Power Apps > アプリ画面からタスク管理アプリを選択し、再生します。
10. 対象のボタンやチェックボックスが表示されていたらOKです。
このままだと、追加したボタン群がギャラリー内に存在せず、複数ユーザーが存在する場合にユーザー数分ボタンが表示されないので、少し修正します。
11. アプリの編集画面内のツリービューにある、以下のコントロールをCtrlを押しながらクリックします（複数選択します）。
- btnEndWork
- btnStartWork
- chkStartBreak
- lblStampingStatus
12. Ctrl + X で切り取り、galUser > shpAttendanceBackを選択した状態で Ctrl + V を実行します。
galUserの配下に配置されればOKです。
13. 配置した4つのコントロールの位置を修正します。
今回はの作業では打刻の登録と各ボタン・チェックボックスの制御まで完成しました。
躓きポイント
今回の躓きポイントは2か所です。
1. Patch関数でユーザー列とステータス列にデータを登録する方法
→このやり方を探すのにとても時間がかかりました。。。
2. アプリ実行時に打刻ステータスが反映されず勤務ボタンが表示されない
→ずっと編集モードを触っていると、どうしても実際に実行したときの挙動を考えないままロジックを組んでしまうため、この事象が発生したときは悩みました。。
今回の作業を実施した当時の感想
今回の実装にあたっては、様々な関数を使ったり、視野を広くして考えないとうまくいかったり、といった箇所で躓きました。
中でも、ボタンの表示・非表示を切り替える方法は、実装自体は簡単でしたが、そのアイデアが生まれるまでに時間がかかりました。
次回予告
今回は、タスク管理アプリに打刻機能の実装方法について紹介しました。
次回は、この機能を元に、打刻時間の表示や打刻の履歴の表示、打刻に応じたアイコンの表示方法について紹介します。
お楽しみに！
茶谷 亮佑（日本ビジネスシステムズ株式会社）
クラウドソリューション事業本部に所属。 現在はPower Platform（特にPower Apps、Power Automate）を活用したアプリ開発業務に従事しています。好きなアーティストは星野源です。
担当記事一覧