---

はじめに

Microsoft 365 を担当させていただいている三島です。今回も業務改善やDX推進のヒントになる話題を皆様にお届けしたいと思います。

前回に引き続きタイムカードアプリの作成方法について解説します。前回は打刻データを書き込むためのリストをSharePointで作成しました。今回はSharePointリストに打刻データを書き込むためのアプリを Power Apps で作成してみたいと思います。

今回作成するアプリはこのようになっています。始業ボタンを押すとタイムカードリストに新しくデータが追加され、メールアドレス、日付、始業時間がセットされます。終業ボタンを押すと、始業と同じデータに終業時間が書き込まれます。当日の打刻データは、顔写真付きで一覧表示することができます。

---

空のアプリを作成する

アプリを作成するには Power Apps のホーム画面を開き「＋作成」を選択します。今回はアプリを一から作成したいと思いますので、「空のアプリ」を選択します。

アプリの種類を選択します。今回は「空のキャンバスアプリ」を使用します。

---

アプリ名と形式を選択する

アプリ名と形式を選択します。アプリ名は自由に設定できますが、当コラムでは「タイムカードアプリ」としています。形式は、スマートフォンから素早く入力できるアプリを作成したいと思いますので、「電話」を選択します。入力ができたら「作成」ボタンを押します。

しばらくすると、 Power Apps の開発画面が表示されます。

---

アプリのタイトルをテキストで作成する

アプリのタイトルをテキストで作成してみたいと思います。開発画面左にあるメニューから「＋」ボタンを選択します。テキストラベルを選択すると、キャンバスにテキストラベルが追加されます。テキストラベルのプロパティ「Text」には初期値として”テキスト”がセットされていますので、これを”タイムカード”に変更をします。変更をすると、キャンバス上のテキストラベルも”タイムカード”に変更されます。テキストラベルはマウス操作で自由に動かせますので、適切な場所に配置をしてみてください。

---

SharePoint に接続する

続いてタイムカードの打刻ボタンを作成してみたいと思いますが、SharePoint リストにデータ書き込みをするためのコネクタを作成しておく必要があります。コネクタを作成するには、左メニューにある円筒の「データ」アイコンを選択し、「＋データの追加」からデータソースを選択します。キーワード検索で「SharePoint」と入力をすると、SharePointのデータソースが検索できるはずです。データソースを選択し、メニューから直接接続を選択、「接続」ボタンを押すとSharePointに接続できるようになります。

---

リストに接続する

SharePointへ接続できるようになると、サイトが選択できるようになります。ここで前回のコラムでリストを作成したサイトを選択します。すると、サイトに含まれるリストが表示されますので、「タイムカード」を選択して「接続」ボタンを押します。データメニューに「タイムカード」が表示されていれば、リストへの接続は成功です。

---

始業の打刻ボタンを作成する

始業の打刻ボタンを作成します。ボタンを作成するには、「＋挿入」ボタンからメニューを表示し、「ボタン」を選択します。キャンバスにボタンが表示されますので、ボタンのプロパティから「Text」に”始業”と入力をしてみましょう。ボタンをダブルクリックして、直接テキストを編集することもできます。

始業の打刻ボタンのアクションを設定します。ボタンを押したときのアクションは、OnSelectプロパティに設定します。ボタンを選択した状態で、左上のプロパティ一覧からOnSelectを選択します。

Patch関数を使用すると、リストに対してデータを追加したり、変更したりすることができます。プロパティの入力フォームに”Patch”と入力し、カッコ（）の中に、データの追加先となるリスト名（タイムカード）を設定します。続いてカンマを打ち、リストへのアクションを指定します。Patch関数を使うと、データの追加も更新もできますが、”Default”を指定するとデータを追加するアクションとなります。ここでは”Default”を設定します。更にカンマを打ち、続く中カッコ｛｝の中には列に登録をする値を設定します。コロンを挟んで左側に列名、右側に登録する値を設定します。

始業時間には現在時刻を登録します。現在時刻を取得するにはNow関数を使用します。

最後にカッコを閉じれば設定完了です。下図に設定内容を載せていますので、参考にしながら設定をしてみてください。

---

始業の打刻ボタンを実行してみる

設定ができたら、プレビュー実行をしてボタンの動作を確認してみます。プレビューは開発画面の右上にあるプレビューボタンを押すか、F5キーで実行できます。プレビュー画面から始業ボタンを押すとタイムカードリストにデータが追加されるはずです。各列に正しい値がセットされているか確認をしてみてください。列の値が正しくなかったり、データが作成されていなかったりしている場合はPatch関数の書き方に何か誤りがある可能性がありますので、上図のPatch関数の記述と見比べながら確認をしてみてください。

---

終業の打刻ボタンを作成する

終業の打刻ボタンを作成します。キャンバスに打刻ボタンを挿入する方法は始業ボタンと同じです。「＋挿入」からボタンを追加、ボタンのテキストを”終業”に変更します。

終業ボタンのアクションはOnSelectに設定します。始業時に登録したデータの終業時間の列に現在時刻を登録したいと思いますので、Patch関数を設定します。始業時はデータの追加でしたが、今度はデータの更新となりますので、更新対象となるデータを絞り込む必要があります。データの絞込みにはLookUp関数を使用します。

少し複雑なので下図の画面を見ながら設定方法を確認していただくとわかりやすいと思いますが、LookUp関数のカッコの最初にリスト名、カンマを打ち、データを絞り込むための条件式を設定します。条件にはメールアドレス列と日付列を設定しています。複数の条件を組み合わせるには”&&”を使用します。メールドレスの指定にはUser関数を使用しています。日付関数にはToday関数を使用していますが、ここでもText関数で書式を整えています。プロパティの入力フォームを見ていただくとわかると思いますが、Today関数にフォーカスを当てると、関数に何がセットされているのかを確認することができます。関数には現在日付だけでなく、時刻までセットされているのがわかります。Text関数で変換をせずに使用すると列の値が不一致となってしまい、正しく更新ができません。そのため、条件式の中で日付の書式を整える処理が必要となります。

---

終業の打刻ボタンを実行してみる

終業ボタンの設定ができたら、プレビュー実行をしてみます。終業ボタンを押した後に、始業時に作成したデータの終業時間列に現在日時が正しく登録されていれば成功です。

---

始業、終業時刻をテキストラベルで表示する

打刻した時間をアプリに表示してみたいと思います。打刻時間の表示はテキストラベルで表示できます。「＋挿入」からテキストラベルを追加して、LookUp関数でデータを呼び出し、時刻だけ表示するように書式設定をすれば表示できます。プロパティの書き方は打刻ボタンの応用ですので、下図を参考に設定をしてみてください。リストに登録をした始業時間と終業時間が正しく時刻のみ表示できればOKです。

---

始業ボタンをデータの[ある/なし]で[有効化/無効化]する

これで始業ボタンと終業ボタンのアクションの設定ができましたが、利用者に正しく運用してもらうために、もう一工夫をしてみたいと思います。始業前には始業ボタンを、業務中は終業ボタンを、終業後はどちらのボタンも押せないように設定することで、不正にボタンが押されることを防ぐことができます。

まずは始業ボタンから設定してみます。始業ボタンを押すとリストにデータが作成されますので、リストに当日のデータがあるかどうかを条件に、[有効/無効]の設定をすれば実現できそうです。下図を使って解説したいと思います。始業ボタンの[有効/無効]の設定はプロパティDisplayModeで設定をします。メールアドレスが利用者、日付が当日であることを条件に、タイムカードリストをフィルタリングし、IsEmpty関数でデータの有無を確認します。結果がtrueの場合はデータが無いということになりますのでDisplayMode.Editで有効にし、データがある場合はDisplayMode.Disableで無効にするように設定します。

---

始業ボタンをデータの[ある/なし]と[終業時間の有無]で[有効化/無効化]する

利用者の打刻状況が確認できるよう、一覧をアプリに表示させてみましょう。一覧はギャラリーで作成します。「＋挿入」からメニューを表示して、「垂直ギャラリー」を選択します。ギャラリーがキャンバスに追加されると、データソースの選択メニューが表示されますのでタイムカードを選択します。ギャラリーにリストの内容が正しく反映されていればOKです。データには「Office365ユーザー」コネクタも追加します。このコネクタは、後で利用者情報を表示するために使用します。

---

利用者の打刻状況をキャラリーで表示する

利用者の打刻状況が確認できるよう、一覧をアプリに表示させてみましょう。一覧はギャラリーで作成します。「＋挿入」からメニューを表示して、「垂直ギャラリー」を選択します。ギャラリーがキャンバスに追加されると、データソースの選択メニューが表示されますのでタイムカードを選択します。ギャラリーにリストの内容が正しく反映されていればOKです。データには「Office365ユーザー」コネクタも追加します。このコネクタは、後で利用者情報を表示するために使用します。

---

ギャラリーの内容を設定する

ギャラリーの内容を設定します。ギャラリーの中の左にあるのは画像コントロールです。ここには利用者の顔写真を表示します。「Office365ユーザー」コネクタが接続されていれば、テナントに登録されている顔写真を取得することができます。顔写真の画像は画像コントロール使用しており、「Office365ユーザー.UserPhotoV2(ThisItem.メールアドレス)」と設定することで取得できます。顔写真のデータが取得できない場合はエラーが返るため、下図ではIsError関数を組み合わせており、エラーが返った際はサンプル写真を表示するように設定しています。

利用者名も「Office365ユーザー」コネクタを使用しています。テキストラベルを追加して、Textプロパティに「Office365ユーザー.UserProfileV2(ThisItem.メールアドレス).displayName」と設定します。顔写真と同じく、テキストが取得できずにエラーが返る場合は空白を表示するよう、IsError関数とIf文を設定しています。始業時間と終業時間も同じくテキストラベルで作成します。Textプロパティで時刻のみを表示するよう書式を設定します。

ギャラリーには当日のデータのみを表示するようFilter関数を設定しています。Filter関数には日付のみを条件として設定します。

---

タイムカードアプリ完成イメージ

最後に各コントロールの位置や大きさ、色などを整えてアプリは完成です。完成イメージを下図の通りです。イメージではギャラリーの上にテキストラベルを追加して、今日の日付も表示しています。

今回は設定箇所も多くて大変だったと思いますが、アプリの作りは非常にシンプルで、基礎学習には良いテーマではないかと思います。工夫次第で色々とアレンジもできると思いますので、ぜひ皆さんもトライしてみてください。それでは次回もお楽しみに。

---

本コラムは2024年3月現在の情報を基に作成しています。

---

Power Platform 製品関連情報・サービス

---

Microsoft Power Apps ハッカソン、イベント登壇レポート

---

Power Platform 導入事例