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

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

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

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

# 全体像と動作イメージ
今回作るアプリは 2 種類です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a><a href="https://twitter.com/hashtag/JPAUG?src=hash&amp;ref_src=twsrc%5Etfw">#JPAUG</a><br>Power Appsで誰でも作れる勤怠アプリv2 <a href="https://t.co/gP7XPzepbE">pic.twitter.com/gP7XPzepbE</a></p>&mdash; たく丸 (@taku_ma_ru) <a href="https://twitter.com/taku_ma_ru/status/1209011454713532417?ref_src=twsrc%5Etfw">December 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ユーザー端末 <a href="https://t.co/oMxdcuNKEi">pic.twitter.com/oMxdcuNKEi</a></p>&mdash; たく丸 (@taku_ma_ru) <a href="https://twitter.com/taku_ma_ru/status/1209011596443258881?ref_src=twsrc%5Etfw">December 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Power Apps のデータを Power Automate を利用して SharePoint の Excel へと書き込みます。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/b9975e34-cd94-2da2-d01c-20d367740b3b.png)




# データソースの準備

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/62fdd0a1-0d08-7bb2-ad0a-6525d2df853a.png)

- ファイル名 勤怠管理.xlsx
- シート名:Sheet2（変更なし）
- テーブル名:テーブル2 （変更なし）
- カラム
    - userEmailAddress,guid,actionCode,action,actionDateTime,primaryKey
   
それぞれ以下の用途で利用しています。

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


# 受付端末実装

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

タブレット形式を選択して、空のアプリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/fe43e73a-7ee0-9fa3-6730-c3671f7a2716.png)

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

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

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

- スクリーン名: QRCodeScreen

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/32899ded-e469-3ef6-2638-937ef770a656.png)

## HomeScreen のデザインを作る

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/27a4fd2d-34e8-b8b3-ce4a-7ecdcee02e54.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/5e29a16f-8d89-f62f-0a2a-20d5c424271b.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/f4603607-b3c7-3d4f-9af2-656fd97052c6.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/5f90e18e-e4de-69ae-6eb9-aa571632aacf.png)

### Back() vs Navigate()

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

## アプリを保存する

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

# ユーザー端末実装

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

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

受付端末と同様にデザインを実装します。
HomeScreen
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/2b4c076c-4929-facd-a3ac-3ae44d825caf.png)

ScanSuccessScreen
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/7d6c9fcc-2544-fac9-3fff-02aad2958981.png)

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

## Power Automate を作成する。

全体像はこちらになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/0bf18494-bccc-7a17-d281-1f34d691eaab.png)

### タイムゾーンの変換

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/3e752224-7fc9-a9f4-a76a-9e02c03aedaa.png)

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

```
yyyy/MM/dd HH:mm:ss
```

```
年/月/日/ 時:分:秒
```


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/85d020d1-addc-bb50-0e40-017387e864d4.png)

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

## 残りを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183354/7f56e227-48df-12ea-7181-c7b7d4f350a3.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 ボタンで動かしましょう

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a><a href="https://twitter.com/hashtag/JPAUG?src=hash&amp;ref_src=twsrc%5Etfw">#JPAUG</a><br>Power Appsで誰でも作れる勤怠アプリv2 <a href="https://t.co/gP7XPzepbE">pic.twitter.com/gP7XPzepbE</a></p>&mdash; たく丸 (@taku_ma_ru) <a href="https://twitter.com/taku_ma_ru/status/1209011454713532417?ref_src=twsrc%5Etfw">December 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ユーザー端末 <a href="https://t.co/oMxdcuNKEi">pic.twitter.com/oMxdcuNKEi</a></p>&mdash; たく丸 (@taku_ma_ru) <a href="https://twitter.com/taku_ma_ru/status/1209011596443258881?ref_src=twsrc%5Etfw">December 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>