🐩

Power Appsで勤怠報告アプリを作る

2024/04/24に公開

Power Apps

はじめに

Power Appsのハンズオンを検索すると山のように出てくる勤怠報告アプリを作成しようと思います。

今でもTeamsのチームや、グループチャットなどに毎日手動で投稿する『何か』がある人もいらっしゃると思います。
そんな日々の情報をデータとして残すと、もしかしたら何かしらの分析に使えるかもしれません。

今回は勤怠報告アプリですが、1on1、週次や月次の評価報告、売上報告などなど・・・。
定期的に発生するイベントをアプリケーションを通してデータ化すると、いつか役に立つときが来ると思うので、チャット等の情報が流れてしまう状態でやり取りをしている方は、Power Appsでアプリケーションを作成してみてください。

記事の結論

以下のような画面作成と、処理の流れができるようになります。

Power AppsのアプリからPower Automateを実行
Power AutomateからTeamsへのif文を使った定型文投稿

Power Appsで作成した画面

Power Automateで作成したフロー

アプリケーションから投稿した定型文

Power Appsとは？

これもググればさんざん情報が出てきますが、ローコードでアプリケーションが開発できるMicrosoftの製品です。
Power Pointで絵を描くようにアプリケーションの画面を作ることができ、Excelの関数みたいなものを利用してアプリケーションの挙動を操作することができます。

全く何も知らない人でも、webで操作方法からアプリの作成方法を検索するだけで、一つのアプリケーションを作ることができてしまう便利な製品です。

『アプリケーション開発』と聞いてアレルギー反応が出る人も、Power Appsならば開発できると思います。

事務的な作業をされている方も、工場内等で作業している方も、自分の好きなようにモノを作り、自分の仕事を効率化することができるので、作り方を覚えるのはおススメです。

Power Appsにアクセスしてみる

以下のURLにアクセスしてください。
URL：https://make.powerapps.com/

Microsoftのログイン画面が出ますので、アカウントをお持ちの方は自身のIDとパスワードを入力してください。
アカウントをお持ちでない方は、MicrosoftE3ライセンス等、Power Appsが利用できるライセンス
を試用版で良いので手に入れつつ、新規で作成してください。

以下のようなポータルサイトにアクセスできます。

アプリケーションを作成する前に、欲しい機能を考える

勤怠報告アプリを作成するにあたり、以下のような機能が欲しいと考えました。

Teamsに勤務開始、終了の定型文を自動投稿したい

まずはこれだけの機能を作ってみます。
追加で必要になったら都度入れてみましょう。

アプリケーションを作成してみる

先ほどのPower Appsポータルの左側にある『作成』をクリックします。

次に、『空のアプリ』をクリックします。

次に、『空のキャンバスアプリの作成』をクリックします。

名前は「勤怠登録アプリ」とし、タブレット形式で作成しましょう。

※　タブレットと電話では、画面のサイズ比等が異なります。

そうすると、真っ新な状態でアプリケーションの作成画面に到達しました。

ここから画面を作っていきます。

オブジェクトを配置する

画面を綺麗に作る方法はありますが、難しいことは考えずにPower Pointで資料を作る感覚で作ってみましょう。

まずは、画面のタイトルを配置しましょう。

画面上部の『挿入』をクリックし、『テキストラベル』をクリックします。
人気順の欄になければ、入力欄の中にあります。

「テキスト」という文字が設定された状態でオブジェクトが作られます。
そのオブジェクトをクリックし、左上にもっていきましょう。

文字のサイズを変えたいので、そのオブジェクトをクリックし、右側のプロパティにあるフォントサイズを30に変更します。

アプリ名は勤怠報告アプリなので、"テキスト"となっているのを"勤怠報告アプリ"と変更しましょう。
"テキスト"が表示されていない方は、左上のドロップダウンを開き、Textを選択すれば表示されるようになります。

これで、どんな画面を開いているのかがわかるようになりました。

次は、実際にアプリケーションの動作を作っていきましょう。

画面にある勤務開始ボタン、勤務終了ボタンを押すと、Teamsに自動投稿されるようなイメージで作ってみます。

まず、画面上の『挿入』からボタンを選択し、画面の中央に二つ配置します。

ボタンの名称を"勤務開始"と"勤務終了"に変更したいので、
ボタンオブジェクトをクリックし、左上にあるドロップダウンからTextを選択し、画面上部のfx欄の右側に"勤務開始"、"勤務終了"と入力します。

これで報告するためのボタンが配置できました。
次に、Teamsに投稿するための処理を作ろうと思うのですが、せっかくなので、Power Automateとの連携をしてみましょう。

補足：Power Automateとは？

話が脱線しますが、Power Automateについて説明します。
これまたネットに溢れかえっている情報ですが、これもローコードでアプリケーションが開発できるMicrosoftの製品です。
先ほど作ったボタンをクリックしたら裏で処理を行ったり、決まった周期で処理を行ったりしてくれる便利な製品です。
毎日決まった作業をする人は、Power Automateにお任せすると自分の手が空くかもしれません。

Power Automateにアクセスしてみる

以下のURLにアクセスしてください。
URL：https://make.powerautomate.com/

Power Apps同様、Microsoftのログイン画面が出ますので、アカウントをお持ちの方は自身のIDとパスワードを入力してください。
アカウントをお持ちでない方は、MicrosoftE3ライセンス等、Power Automateが利用できるライセンスを試用版で良いので手に入れつつ、新規で作成してください。

以下のようなポータルサイトにアクセスできます。

Power Automateでフローを作ってみる

先ほどのボタンを押したら、Teamsに業務開始した旨を投稿したいので、そのようなフローを作ってみます。
画面左側の『作成』をクリックし、画面の中央にある『インスタントクラウドフロー』をクリックします。

次の画面でフロー名と、このフローが何に応じて動作するかを決めます。
名前を「勤怠報告ワークフロー」とします。
トリガーは先ほど作った画面のボタンに起因したいので、PowerAppsV2を設定します。

右下の作成を押すと、Power Automateの作成画面に飛びます。

まずはTeamsに勤務開始を告げる投稿をしてみましょう。

Power Automateでは処理のことをアクションと呼びます。
（また、そのアクションを束ねるモノをコネクタと呼びます。）

早速アクションを追加してみます。

画面に表示されている⊕をクリックして、『アクションの追加』をクリックします。

左にアクションを選択する画面が表示されるので、検索欄にteamsと入力します。
すると、Microsoft Teamsのコネクタが一番上に表示されるので、さらに表示をクリックします。

勤務開始する旨を投稿したいので、『チャットまたはチャネルでメッセージを投稿する』をクリックします。

そうすると、PowerApps(V2)の下に、先ほど選択したアクションが追加され、左側にパラメーターを設定できる画面が表示されます。

投稿者は、Teamsに投稿する人を誰にするかです。
ロボットとして投稿するのか、ボタンを押した本人として投稿するのか等を選択できます。
投稿先は、グループチャットにするのか、チャネルにするのかを選択できます。

今回は勤怠に関するアプリなので、投稿者は自分自身、部や課等のチームがあるという想定で、投稿先はチャネルとします。

チャネルを選択すると、どのチームのどのチャネルに投稿するのかを選択できます。
自分自身が所属しているチームでないと選択肢として現れません。

何かしらのチーム及びチャネルを設定してください。

最後に、メッセージを設定します。
定型文を設定してください。

全ての設定が完了したらフローを保存しましょう。
画面上部の『保存』をクリックします。

作成したフローが想定通りに動作するかテストしてみましょう。
画面上部にある『テスト』をクリックします。

手動が選択されていると思うので、そのままテストをクリックします。

Microsoft等のログインが求められるコネクタを利用している場合、初回実行の際にサインイン情報を求められます。
自分が所属しているチームを設定している場合、特にイレギュラーな状態にはならないと思います。
続行をクリックします。

それではテストを実行してみましょう。

正常に完了した場合、完了を押してください。

完了を押すと、フローの全体が確認できる画面に戻ります。
各アクションの右上に緑のチェックが入っていれば、そのアクションは正常に動作しています。

先ほど投稿先としたチャネルを見てみると、投稿されていることを確認できると思います。

さて、フローが一旦完成したので、PowerAppsで作成した画面からフローを動かす設定をします。

Power AppsからPower Automateを実行する

Power Appsの開発画面に戻りましょう。
URL：https://make.powerapps.com/

勤怠報告アプリを選択すると、鉛筆マークが出てくると思うので、そちらをクリックします。

開発画面に戻ってきました。
早速先ほどのフローとの連携を設定します。

左側のワークフローマークをクリックし、『フローの追加』をクリックします。

そうすると、先ほど作成した勤怠報告ワークフローが画面上に表示されます。
これでPower Appsから呼び出すことが可能となります。

勤務開始を押したら先ほどのフローを呼び出す処理を追記します。
勤務開始オブジェクトをクリックし、左上のドロップダウンでOnSelectをクリックします。

画面上部のfx欄に「run」と打つと、予測で「勤怠報告ワークフロー.Run」と出てくるので、それをクリックします。

「勤怠報告ワークフロー.Run」まで入力されたら、最後に「()」を追記してください。
これでフローを呼び出す準備が完了しました。

実際にフローを呼び出してみましょう。
画面右上の保存ボタンをクリックと、再生ボタンをクリックします。

その後、勤務開始ボタンをクリックしてください。

実際にフローが正常に動いたかの確認を行います。
Power Automateにアクセスします。
URL：https://make.powerautomate.com/

その後、左側にある『マイフロー』をクリックし、勤怠報告ワークフローをクリックします。

画面を下のほうにスクロールすると、過去の実行履歴を参照できます。
直近の実行は一番上にあります。
状況を見ると成功しているので、Power AppsとPower Automateの連動は成功しました。

実際にTeamsを見に行っても定型文が投稿されているのを確認できると思います。

これで、勤務を開始したことを、画面のボタンを押すことによって投稿できるようになりました。
しかし、今のままでは勤務を終了したことを、画面のボタン経由で投稿できません。

Power Apps、Power Automateの両方に少し修正を加えて、対応できるようにしましょう。

勤務開始、勤務終了の投稿を一つのフローで実行する

先ほど作成したフローは、動いたら必ず勤務開始を投稿するものでした。
Power Apps側の押されたボタンによって、投稿内容を変更すれば、今回の目的は達成します。

複数の条件から一つを選び、狙った処理を行うことを条件分岐処理といいます。
それでは『勤務開始ボタンを押したら勤務開始』、『勤務終了ボタンを押したら勤務終了』という条件分岐処理を追加します。

Power Automateにアクセスします。
URL：https://make.powerautomate.com/

先に説明した通りの手順で、勤怠報告ワークフローの編集画面に移動します。

Power Appsにある二つのボタンのうち、どちらがクリックされたか判断できるようにするため、
Power Appsから情報を連携してもらうように変更します。
今回は、勤務開始ボタンを押したら「1」を、勤務終了ボタンを押したら「2」を連携するようにします。

まず、PowerApps(V2)をクリックします。
そうすると、左側にパラメーターを設定できる画面が出てきます。
情報を連携してもらう入れ物を作る必要があるので、『入力の追加』をクリックします。

そうすると、どのような情報を連携してもらうかの設定ができます。
今回は「1」と「2」連携してもらうので、テキストか数値のどちらでもよいのですが、とりあえずテキストを設定します。

「入力」という欄と、「入力を指定してください」という欄が出てきます。
「入力」欄は欄の名前、「入力を指定してください」は説明文と捉えてください。
「入力」だとわかりづらいので、「勤務フラグ」に変更します。
説明分はそのままとします。

次に、Power Appsから連携された情報を基に、条件を判断するアクションを追加します。

PowerApps(V2)の下にある⊕をクリックし、『アクションの追加』をクリックします。

左から出てくる画面上で、Controlをクリックします。

条件アクションをクリックします。

条件アクションが追加されました。
左側に条件を設定できる欄が出てきました。
条件に合致した場合の処理と、合致しなかった場合の処理を、条件アクション内で設定することができます。
後々出てきますが、条件と合致した場合は「True」と表現され、合致しなかった場合は「False」と表現されます。
先ほど説明した通り、勤務開始した場合は「1」が連携されるので、勤務フラグが「1」の時、勤務開始する旨の投稿をしたいと思います。

左側の値を選択してください欄をクリックすると、雷みたいなマークと、fxという文字が現れるので、雷マークをクリックしてください。