Power Appsでタイムレコーダを作る

Microsoft365のサービスの中で、他のサービスとは異なりちょっと独特なのが、Power Apps。ノーコードでウェブアプリを作成できるサービスなのですが、スマフォ対応のちょっとしたアプリケーションを作成可能です。また作成したアプリは、Teams等に表示させる事も可能で、腕があれば下手なウェブサービス契約するよりも、作ってしまったほうが全然安上がりにDX実現出来てしまうかもというサービスです。

現在、無償で「できる Power Apps 特別版」というPDFの電子書籍も配布されており、ちょっと手を出してみました。バックエンドの色々な処理はPower Automateを利用し、フロントエンドの処理はPower Queryのように関数を使って構築する点が独特だと思います。

今回利用するサービス

• Power Apps - Microsoft365

フロント側はPower Appsで作成しますが、バックエンドはPower Automateでそれぞれ構築が必要なので、両方の知識が必要になります。ノーコードではありますが、他のサービスに比べるとちょっとハードルが高い印象。開発に当たっての資料もPower Automateと比較すると少ない気がする。

図：こんな感じのアプリを作ります

#PowerApps に出会って1年半 業務改善でタイムカード廃止にまでたどり着きました。見ず知らずの方々のさまざまな情報を駆使して仕上げました。
全体的な流れ、#PowerApps で出退勤の打刻 、そのデータは #SharePoint に蓄積、勤怠承認者用に勤怠確認用アプリも作成して勤怠を決定します。 pic.twitter.com/pQWJXD7r6f

— なおぴ～ (@_dainao_) June 8, 2022

タイムレコーダを作成する

OneDriveに記録用のファイルを用意する

Power Appsで打刻したデータを自動で格納する為のExcelワークブックを用意します。

1. OneDrive BusinessにExcelのワークブックを用意する
2. ID, ユーザのメアド, 氏名, 打刻タイプ, 日付時刻5列で作成
3. テーブル化しておく（timemanと命名）

図：こんなスタイルでデータ置き場を用意

Power Automateで処理を作成する

先に、ボタンクリック時のイベントを作っておきます。出勤打刻と退勤打刻という名前で、Power Automateにフローを作成し、クリックする事で、OneDrive Business上のExcelにデータが書き込まれる仕組みです。

1. メニューより、アクション⇒Power Automateをクリックする
2. サイドバーが開くので、フローの追加をクリックする
3. フローを新規作成するをクリックすると、Power Automateが開かれる
4. 一から作成をクリックして、真っ更の状態から作成を行います
5. PowerAppsというトリガーが自動で追加されて、ここにフローを作り込んでいく

ここからExcelシートへ記録する為のいろいろな情報を取得し、Excel Online Businessへと書き込みをして、最後は返り値を返す処理をFlowとして構築する事になります。以下の手順で作成していきます。

1. フローの名称をクリックして、「出勤打刻」として命名。もう一個作る時は「退勤打刻」とする。
2. 新しいステップをクリックして、プロフィールで検索。「マイプロフィールの取得(V2)」を選択して追加。特に設定はしません。
3. 新しいステップをクリックして、日時で検索。「現在の時刻」を選択して追加。
4. 新しいステップをクリックして、日時で検索。「タイムゾーンの変換」を選択して追加。
5. タイムゾーンの変換では、基準時間は2.の現在の時刻を選択し、変換元タイムゾーンをUTC、変換先タイムゾーンを東京、書式はカスタム書式を選んで、「yyyy/MM/dd hh:mm:ss」としました。
6. 新しいステップをクリックして、Excelで検索。Excel Online Businessの中の「表に行を追加」を選択して追加
7. 場所、ドキュメントライブラリ、ファイル、テーブルを選択していく。前述で作ったExcelファイルを指定する項目です。
8. IDには1.の中のIDを指定、ユーザアドレスには1.の中のメールアドレス、氏名には1.の中の表示名を選択する
9. 出勤タイプは今回は「出勤」と直接入力。もう一個作る場合は、「退勤」とする
10. 時刻には、4.の変換後の時間を入れておく
11. 最後に、新しいステップをクリックして、PowerAppsで検索。「PowerApp または Flow に応答する」を追加する
12. flowflagという文字を入力して、値を1として設定する。これをPowerApps側で受け取ります
13. 最後に保存して終了
14. また、追加のフローとして、Teamsのフローを追加して、出勤退勤のメッセージをチャンネルに自動追加するものを入れておくと尚良いでしょう。

これで、出勤打刻というフローが出来たので、次項にて、ボタンのアクションであるOnSelectにて出勤打刻.Run()と記述すると、フローが発動する仕組みになっています。

同様の処理を退勤打刻としてもう一個フローを作り、バックエンドの処理の準備は完了です。

図：ボタン割当用のフローを作成開始

図：打刻のフローの全体図

図：表に1行追加するフロー

図：返り値を返すフロー

Power Appsで画面を作成する

Power Appsを開いて、タイムレコーダの打刻画面を作成します。いくつかのパーツとイベントの処理を追加していく事になります。今回はPower Appsで打刻後にPower Automateでの処理を加え、完了したらメッセージを表示する仕組みにしています。

1. 左サイドバーからアプリ⇒新しいアプリ⇒キャンバスをクリック
2. アプリ名を入力して、作成をクリックする
3. Screen1というデフォルトの画面の背景色を黒にしておく
4. 挿入⇒ボタンから2個ボタンを用意（出勤と退勤用のボタンです）
5. ボタンの詳細設定を開き、OnSelectには以下のような数式を入れる
   
   UpdateContext({res:出勤打刻.Run()}); Set(ret,res.flowflag);

   1 2	UpdateContext({res:出勤打刻.Run()}); Set(ret,res.flowflag);

   
   resがPower Automate側からの返り値を受け取る変数。ボタンクリックで返り値が返ってきたら、変数retに対してresの中にあるflowflagの値を入れてあげる数式となります。
   この出勤打刻.Run()ですが、これがPower Automateのプロジェクトの名前であり、そのFlowを実行するという意味になります。
6. 上部の時計表示用のラベルを用意する
7. 5.のラベルの詳細設定⇒Textに以下のような数式を入れる
   
   Text( CurrentTime, "[$-ja]yyyy/mm/dd/ hh:mm:ss" )

   1	Text( CurrentTime, "[$-ja]yyyy/mm/dd/ hh:mm:ss" )

8. 追加ラベルを画面の下に配置する
9. 7.の詳細設定を開き、OnSelectイベントに以下のような数式を入れる（変数retを定義して、初期値を0とする）
   
   Set(ret,"0")

   1	Set(ret,"0")

   
   retとはPower Automateからの処理に対するステータスのようなもので、Power Automateの処理完了通知が来ると、値が1になる。
10. 次に、挿入⇒入力⇒タイマーを選択して、適当に貼り付ける。
11. タイマーの表示はオフにし、期間は1000を指定。繰り返し・自動開始はオンにしておく。自動一時停止はオフでOK
12. タイマーの詳細設定を開き、OnTimerEndには以下の数式を入れる
    
    Set( CurrentTime, Now())

    1	Set( CurrentTime, Now())

    
    CurrentTimeという変数に現在の時刻を入れるという数式
13. タイマーの詳細設定のTextには以下の数式を入れる
    
    Text(Time(0, 0, Self.Value/1000), "hh:mm:ss")

    1	Text(Time(0, 0, Self.Value/1000), "hh:mm:ss")

    
    時間の形式を整えて表示する。このCurrentTimeを7.のラベルが拾って、時刻が表示される仕組みです。
14. もう一つのボタンにも同じような挙動を設定しておきます。
15. 最後に、返り値が返ってきたら文字を表示するラベルを1個追加しておく。表示はデフォルトではオフのまま。
16. 15.のラベルはテキストは「打刻が完了しました」とし、詳細設定のVisibleには以下の数式を入れておく。返り値がretに入ると、表示される仕組みです。
    
    If(ret="1",true,false)

    1	If(ret="1",true,false)

17. 続けて、15.のラベルの詳細設定にあるOnSelectには以下の数式を入れておく。クリックすると表示が非表示になる仕組みです。
    
    Set(ret,"0")

    1	Set(ret,"0")

18. これで完了。右上の▶をクリックして、実際の挙動を確かめてみて、問題がなければExcelに追記され、15.のラベルが表示されるハズです。
19. 戻るをクリックすると保存するか聞かれるので、もちろん保存する。ただし、アプリの一覧に表示されるまでちょっとタイムラグがあり、作ったハズなのに、表示されないというケースはしばらく待てば出てくるはずです。

図：Timerの挙動を設定中

図：ボタンクリックイベントの数式

Teamsに追加する

作成したアプリを直接開かせて、使ってもらうのも良いのですが、Microsoft365というサービスはTeamsをハブとして利用することを目的としてるものであるため、いちいちこのサービスはこのURLでといった事は非常にスマートではありません。そこで、作成した今回のアプリをTeamsのチャンネルに追加する事で、ユーザが毎朝出勤してきたらチャンネルを開いて、打刻をクリックするだけOKといった導線を作ってあげるまでが仕事です。

1. PowerAppsのメイン画面を表示して、左サイドバーの「アプリ」をクリック
2. 作ったアプリの右にある「…」をクリックする
3. Teamsに追加をクリックする
4. 右サイドバーが開き、編集でアイコンとかを後から編集することもできますが、ここではTeamsに追加をさらにクリックします。
5. ダイアログが出てくるので、開くの横のVをクリックして、チームに追加をクリックします。
6. チームチャンネルを選び、タブを設定をクリック
7. 保存をクリックするとチームのチャンネルに追加されて、作成したアプリが表示されるので、後は打刻するだけ
8. Android等のアプリからも開くことが可能です。

このように、簡単に社内向けのアプリを構築できるので、「すぐ外部のソリューションに毎月人数分固定費払って」なんて発想をするのではなく、自分たちでまず内製するというのは世界の常識です。特にこれからは外部に作成依頼という発想をしてる企業は、キャッシュアウトで苦しむ事になりますので、いかに内製するかを考えた場合の１つの選択肢としてPowerAppsは悪い選択肢ではありません。

図：Teamsに追加している様子

図：タブを開けばTeams上から打刻が可能になる

図：Androidのアプリ上で開いてみた

今回のプロジェクトのサンプル

プロジェクトサンプルダウンロード

• タイムレコーダープロジェクトファイル
• 記録するExcelファイル

上記のファイルはZIPで固められています。インポートする為には解凍せずそのままインポートすればOKです。このサンプルでTeamsにアダプティブカードを送ると以下のようなスタイルのものが送信されます。

PowerAppsでインポートすることで、Power Automateのフローも含めてまるごと復元可能です。予め、ExcelファイルはOneDriveに用意しておいてください。

プロジェクトのインポート方法

プロジェクトのサンプルはZIPで固められています。このファイルを自分の環境にインポートする事で、今回のフローを復元する事が出来ます。但し、利用するExcelファイルへのパスであったり、利用するアカウント等の手修正は必要です。インポートする手順は以下のとおりです。

1. Power Appsを開き、サイドバーからアプリを開く
2. 上部にある「キャンバスアプリのインポート」をクリックする
3. アップロードボタンをクリックして、ダウンロードしたZIPファイルを選択する
4. 基本新規作成で設定していますが、関連リソースのアカウントは修正が必要です。（Office 365 ユーザー 接続とExcel Online (Business) 接続の2つ）
5. インポートをクリックするとプロジェクトが復元される
6. 対象のフローは無効化された状態になってるので、編集をクリックする
7. 色々手直しをして保存する（Excelファイルパス等）
8. Power Automate側のフローチェッカーをクリックして、このフローをオンにするをクリックする

これで、利用できるようになります。アプリに表示されるまでちょっとタイムラグがあるので、出てくるまで辛抱強く待ちましょう(5分くらい掛かる印象）。

図：プロジェクトのインポート画面

関連リンク

• コードを書けない行政マンがPowerAppsを使って「タイムカード」作ってみたら作れた体験記
• Power Apps キャンバスアプリのコーディング規約とガイドライン日本語版をリリース
• 【PowerApps】超簡単！！リアルタイムに時間を表示する方法
• OneDriveforBusinessのファイルの直接ダウンロードリンクを取得する