LoginSignup
14
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PowerAppsAdvent Calendar 2019

Day 18
@taku_maru(taku_ maru)

【第２回】初心者、初学者でも簡単に Power Apps を使って勤怠アプリ v2 を作る【#PowerAppsTutorial】

Last updated at Posted at 2019-12-23

概要

このチュートリアルを通して初心者の方でも簡単に Power Apps を使って勤怠アプリv2を作ることができます。
また、このチュートリアルを行う事で以下のことを理解することができます。

  • Power Apps の基本的な使い方や考え方
  • キャンバスアプリでのアプリの作り方
  • Power Apps と Power Automate の接続方法
  • Power Automate を使って SharePoint 上にある Excel（テーブル）に値を書き込む方法
  • タイマーコントロール、バーコードスキャナーコントロールの使い方

また、少し簡単な 第1回 もありますので Power Apps を全く触ったことのない方はこちらを先にご参照ください。

全体像と動作イメージ

今回作るアプリは 2 種類です。

Power Apps のデータを Power Automate を利用して SharePoint の Excel へと書き込みます。
図1.png

データソースの準備

以下のような Excel を SharePoint に配置してください。（ OneDrive でも構いませんが、今回のチュートリアルでは SharePoint を使用しています。）

image.png

  • ファイル名 勤怠管理.xlsx
  • シート名:Sheet2（変更なし）
  • テーブル名:テーブル2 （変更なし）
  • カラム
    • userEmailAddress,guid,actionCode,action,actionDateTime,primaryKey

それぞれ以下の用途で利用しています。

名前 用途
userEmailAddress 誰が出社や退社を行ったか（第1回ではユーザー名に相当）
guid QRコードを正しく読み取ったかどうかの検証用（今回は検証までは行っていない為、特に利用予定はありません。）
actionCode どのボタンを押して QRコードを読み取ったか
action ボタンのラベル
actionDateTime 読み取った時刻
primaryKey レコードを一意にするため。今回は特に利用予定はありません。

受付端末実装

空のキャンバスアプリを作成する

タブレット形式を選択して、空のアプリを作成します。
image.png

Screen1 を HomeScreen に名前を変更します

QRコード表示スクリーンを作成する

左上のファイルの下の「新しい画面」から「空」を選択して画面を作成します。
作成後以下のようにそれぞれ名前を変更します。

  • スクリーン名: QRCodeScreen

image.png

HomeScreen のデザインを作る

ラベルと勤怠管理用のボタンを４つ用意します。
色や大きさは任意で構いません。

image.png

Point

私がアプリを作成する場合は必ず App.Onstart に色コードを5色程度設定するようにしています。利用する場所では（例えばスクリーンの Fill 等）変数を指定します。そうすることで、変更が容易になり、アプリ内で色を統一がしやすく整ったデザインを簡単に作ることができます。
以下が今回利用した色コードを指定した変数になります。

App.OnStart
Set(brand,{
    primary:RGBA(239,48,36,1),
    secondary:RGBA(62,62,62,1),
    additional:RGBA(210,210,210,1),
    white:RGBA(243,244,250,1),
    black:RGBA(123,123,123,1)
})

利用する場合は

Button1.Fill
brand.primary

などと使用します。

各ボタンにアクションを追加する

以下の対応するボタンに対してアクションを設定します。

名前 アクション
Button1 (出社) Set(glbActionCode,"0001");Navigate(QRCodeScreen,ScreenTransition.Fade)
Button1_1 (退社) Set(glbActionCode,"0002");Navigate(QRCodeScreen,ScreenTransition.Fade)
Button1_2 (休憩開始) Set(glbActionCode,"0003");Navigate(QRCodeScreen,ScreenTransition.Fade)
Button1_3 (休憩終了) Set(glbActionCode,"0004");Navigate(QRCodeScreen,ScreenTransition.Fade)

ScreenTransitionとは

スクリーンを遷移（移動）する時のアニメーションを指定しています。Fadeの場合ふわっと消えるように遷移します。ただし、指定しないほうがスムーズにアプリが動く場合があるので、指定する場合はアプリの遷移時の動作確認をしましょう。

現在時刻を右上に表示する

これはタイマーコントロールを利用しています。

Timer1の設定は以下の通りです。

プロパティ 変更前 変更後
Duration 60000 500
Repeat(繰り返し) false true
AutoStart(自動開始) false true
Visible(表示) true false

また OnTimerEnd のアクションには以下を指定しています。
image.png

Timer1.OnTimerEnd
Set(ctxNow,Now())

最後にラベルに対して変数を設定します。

Label2.Text
Text(ctxNow,"[$-ja]yyyy/mm/dd hh:mm:ss")

Text 関数と Tips

DateTime型 の値は Text 関数を利用することで、任意の表示形式に変更することができます。
詳しくはこちらをご覧ください。
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-text

注意点として、 Power Automate でも同様の書き方で表示形式を変更可能ですが、微妙に指定の方法に差異があるので注意が必要です。

QRCodeScreen のデザインを作成する

image.png

OnVisible の設定

GUID を生成し、変数へと格納します。

QRCodeScreen.OnVisible
Set(glbGuid,GUID())

OnHidden の設定

タイマーをリセットする為の関数を書きます。

QRCodeScreen.OnHidden
Reset(Timer2)

Point

OnVisible や OnHidden はスクリーンの表示、移動時（非表示時）に関数を実行できます。
非常に便利ですが、どこで処理を行っているかがわかりにくくなる為、個人的にはあまりこのプロパティに多くの関数を書くのはお勧めしません。（今回のようにスクリーンが少ない場合はよいと思います。※あくまで個人の自由です。）

QRコードを表示する

今回利用しているのは　http://goqr.me/api/doc/ を利用しています。
他に様々利用できるものがありますので、ご自身で利用可能なAPIを利用してください。
画像(Image1)のImageに対して以下のように設定ます。

Image1.Image
"https://api.qrserver.com/v1/create-qr-code/?data="& glbActionCode & glbGuid

残り秒数を表示する

こちらもタイマーとラベルコントロールを利用しています。

プロパティ 変更前 変更後
Duration 60000 1500
AutoStart(自動開始) false true
Visible(表示) true false
Timer2.OnTimerEnd
Back()
Label4.Text
15 - Round(Value(Timer2.Value/1000),0)

Round 関数

四捨五入を行っています。
因みに Power Apps では文字の途中の大きさを変えることは不可能なので、個のアプリではラベルを2つ(Label3とLabel4)を利用しています。
image.png

Back() vs Navigate()

よくある質問で Back() と Navigate() どちらが良いかという質問があります。
回答として、 Back() が利用できる場合は必ず Back() を利用しましょう。
基本的に Navigate()が実行されるたびに Power Apps 内部に履歴が積みあがります。また、 Back() 関数を利用すれば Navigate()時に指定したアニメーション(ScreenTransition)を参照してアニメーションしながらスクリーンを戻るので、変更も容易になります。

アプリを保存する

これで Power Apps の受付端末側が完成です。
[Ctrl] + [S]で保存を行いましょう。（すでに保存していた場合は発行も忘れずに。）

ユーザー端末実装

スマホ用アプリを作成する

ユーザー端末はスマートフォンを想定していますので、受付端末とは違い、スマートフォン用のアプリケーションを作成します。

スクリーンをデザインする

受付端末と同様にデザインを実装します。
HomeScreen
image.png

ScanSuccessScreen
image.png

ここまでデザインが完了したら一度アプリケーションを保存しましょう。

Power Automate を作成する。

全体像はこちらになります。
image.png

タイムゾーンの変換

image.png

Power Automate では現在の時刻がアクションによって取得可能ですが、こちらは UTC で取得できるため9時間の時差が存在します。その為タイムゾーンを UTC→ JST(+9時間) に変更する必要があります。
また、書式設定のカスタム文字列として Power Apps の Text 関数と同様に書式を変更できますが、 Tips でも書いた通り指定の仕方に微妙な差異が存在しますので注意が必要です。

yyyy/MM/dd HH:mm:ss

年/月/日/ 時:分:秒

Power Apps からの入力を受け取る変数を作成する

image.png

変数の理由は 第1回でも説明した通り、修正、変更を行いやすくするためです。

残りを作成する

image.png

Point

Excel コネクターは Business と OnDrive が存在しますが、SharePoint 上の ファイルや OnDrive for Business、 Teams の場合は Business を利用しましょう。（実体全ては同じ）

バーコードスキャナーコントロールのアクションに関数を追加する

OnScan プロパティに以下の関数を追加します。

BarcodeScanner1.OnScan
Set(qrValue,BarcodeScanner1.Value);
出勤管理.Run(Left(qrValue,4),Right(qrValue,32),User().Email,Switch(Left(qrValue,4),"0001","出社","0002","退社","0003","休憩開始","0004","休憩終了","不明"));

Navigate(ScanSuccessScreen)

完成！実際に F5 ボタンで動かしましょう

アプリを発行し、実機で動かしましょう。（バーコードスキャナーはスマートフォンでしか動かない点に注意が必要です。）

14
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?