【初心者】未経験がPowerAppsで勤怠管理アプリを作る話【時刻の取得】

色々あってPowerAppsを学ぶことになりました。
どうせならoutputの練習をしようと思うのでここに書き記します。
初心者はとにかく数をこなしてなんぼだと思うので質より量で基礎を極めたいと思います。


( ＾ω＾)「まずは日ごろのルーチンワークを軽くするアプリが作りたいぜ！！！！」
( ＾ω＾)「……できる範囲で！」


■手探りでの作業なので以下のルールで作成します。

・まずは最低限の機能で動くモノを作る
・そこから希望の機能を追加していく
・初めから100%の成果物が作れるはずはないと思え
・どうせ作るなら日常で使えるものを作る(←重要)
・つまずいたところ、不明点を残して今後の反省にする

■作りたいもの

・片手で操作できるタイムカードアプリを作る。
PowerAppsで「出勤」「退勤」の操作画面を作る
↓
・各ボタンを押下した日時をあらかじめ指定したExcelテーブルに入力する

##ざっくり作業手順
1：最低限の動くモノをつくる(＝日時を取得する)
2：日本時刻に合わせたい
3：日時を「日」「時」にわけたい
4：[出勤]行と[退勤]行を同じ行に入れたい

##事前準備

PowerAppsにてボタンが２つあるキャンパスアプリを作成する。
①片手で操作できる
②余計な操作は不要
なので、本当に最低限の、ボタンが２つあるだけのアプリです。

![2019-04-23_113906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/5d1e9b66-295e-5de0-f2f6-a022a5d10702.png)


Excelでデータを格納するテーブルを作成する。(と、ありたき？姿)
・[年月日]
・[出勤時間]
・[退勤時間]
あくまでも私一人のメモ用なので、このぐらいで充分。
OneDriveのてきとうなフォルダに保存する。

![2019-04-23_113928.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/d07469a5-ec68-a6f6-a655-4a25101817ea.png)


##1：最低限の動くモノをつくる(＝日時を取得する)

やりたいことは、
①アプリの[出勤(or退勤)]ボタンを押下すると、
②押下した日時情報をアプリ？が取得して
③指定したExcelシートに記入する
→日時情報の取得、と、記入したいExcelシート情報を上手く指定する必要がある


話を聞くと、Flowを別に作ってアプリに連携させればいいらしいので
アクション　>　Flows > 新しいフローの作成
を選択する
(画像では別に作成済みのFlowが表示されているけど)

![2019-04-23_114751.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/7e4eb48b-a468-1fd3-5d70-b4edce2e21aa.png)



Flow画面に遷移する。
PowerAppsに関してはそのままでいいらしいので[＋新しいステップ]を押下。
![2019-04-23_114826.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/7d27d9e8-8464-90fe-f3fc-71727d66df29.png)




検索Boxがでてきたので試しに「時」と入力すると、それっぽいのがでてきた
「現在の時刻」もそのままでいいらしいので[＋新しいステップ]を押下


![2019-04-23_115218.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/23e9a743-0662-df3b-dbfe-3e85a2ce0405.png)



検索Boxで「Excel」と入力すると、それっぽいのがでてきた
→PowerappsもFlowも会社ライセンスでの契約なので、「Excel Online(Business)」を選択　>　「表に行を追加」を選択


あれよあれよと入力画面が表示される。
これは③の記入したいExcelについて指定する操作だと思われるので、
どこのなんのどういうシートに記載したいのかを入力していく。
(テーブルにしていてよかった)

![2019-04-23_120511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/575f7fef-584b-9c03-9c8b-6a57d3229088.png)


###テスト実行１
PowerApps画面に戻り、作成した[出勤]ボタンにさっきのフローを紐づける。

アクション　>　Flows > 新しいフローの作成

![2019-04-23_142101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/722d6e8f-9057-513a-b7aa-898fc9347bfc.png)


OnSelect = Flow_time.Run(

OnSelect = Flow_time.Run(**)**
になおす(エラーがないってことはこれで問題ない？)

実行

↓

![2019-04-23_142549.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/8302b366-0bbc-756c-bd5b-54643061b65e.png)


日時？が入った！…が。
日本時間じゃない　→　日本時間に変更するアクションが必要
[年月日]と[時刻(＝出勤時間)]と、セルを分けたい


##2：日本時刻に合わせたい

日時情報は取得できている(はず)なので、
日時情報をget　→　**日本時刻に修正？変換**　→　Excelに追加
の作業が必要なのでは？と推論。

検索Boxがでてきたので試しに「時」と入力すると、「タイムゾーンの返還」というのがでてきたので、
指示通りに入力
(ここで誘導してもらえるのは初心者的には助かるなぁ)

・[基準時間]=[現在の時刻]
・[変換元のタイムゾーン]=時間のズレからして、たぶん協定世界時？？になってるっぽい？
・[変換先のタイムゾーン]=ここは日本なので、UTC+9　東京　を選択
・[書式設定文字列]=　一般的な日付パターン(長い形式の時刻)　-2009/6/15　午後1:45:30[G]　を選択

本当は[書式設定文字列]を[2019/04/25 13:45]とかにして(24h表示)、日時を分割、とかしたかったけど
選択肢にないっぽい。
これはExcelみたいにカスタムで作るべき？
それとも「汎用の完全な日時パターン　2009年6月15日(月)　午後8:45:30[u]」とかにして、
それをExcel上で表示変換すべき？

とりあえず今のゴールは「日本時刻に合わせたい」なので、一旦「短い形式の日付パターン」として登録&テスト。

![2019-04-24_112017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/2f535e2b-cfb0-fce1-8d73-853000f9f057.png)

(;＾ω＾)・・・？？
日本時間になってない？(4/24　11時に操作しました)

Flowの実行履歴を見ると
![2019-04-24_112924.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/435c0d3d-5b01-93d6-d9cb-1dee388a444b.png)

(;＾ω＾)・・・日本時間出力されてる？

![2019-04-24_112953.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/9f9d3787-c10a-17b0-1ea5-2556089433c0.png)

・・・おまえか！！！


ということで原因と確認の仕方がわかった(基本…)ので「表に行の追加」の項目を以下に変更。
・[年月日]=[変換後の時刻]
・[出勤]=[変換後の時刻]

![2019-04-24_114246.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/03971065-06d4-18ed-fc5d-6b8f26138f2e.png)

(*＾ω＾*)！！！！ﾃﾃﾃﾃﾃｯﾃｯﾃｰ!(ﾄﾞﾗｸｴの効果音)
できた！！！
あとなぜか知らないけどちゃんと？「日」「時」にわかれてる！！！！SU！GO！I！！

##3：日時を「日」「時」にわけたい

なんか勝手に「日」「時」がわかれてて自己解決したんですけど、
よくよく調べてみるとこれは「2019/4/24 11:35:03」が両方のセルに格納されていて、
Excel上で表示変換されていただけみたいだった。
→今後の「4：[出勤]行と[退勤]行を同じ行に入れたい」で、
『「日」列を判定基準にして、[出勤]行と[退勤]行を同じ行に入れるか判定する』とやりたいので(予定は未定)
できるなら「日」列は日付情報だけを(そして「出勤/退勤」行は時刻情報だけを)格納したい。

↓

調べてみると参考資料③さんの情報が役に立ちそうなので実験してみる。

![2019-04-25_144300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/e1276c02-8a53-2bea-b708-c3b0a02e59c4.png)

・同じアクションを繰り返すと、2つ目は「２」と名前がついて区別できるようになる
・書式設定文字列は、大文字と小文字で意味が変わる(知らなかった)
例：yyyy : mm : dd = 2019-45-25 / yyyy-MM-dd = 2019-04-25
hh:mm = 02:45 / HH:MM = 14:04

![2019-04-25_145650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317739/20bb0134-5107-845c-ce91-1ce1a48856d7.png)

( ＾ω＾)これだよこれ私が作りたかったものは！！

##4：[出勤]行と[退勤]行を同じ行に入れたい
(;＾ω＾)「…なぜだ」
(;＾ω＾)「……なぜ」

GW中悩んでも条件分岐？がうまくできないので一旦保留。
今後の課題にします。

##参考資料
今後ともよろしくお願いいたします

①ひと目でわかるPowerAppsノンコーディングでのビジネスアプリ作成入門
https://www.amazon.co.jp/dp/B07F1L13H2/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
②コードを書けない行政マンがPowerAppsを使って「タイムカード」作ってみたら作れた体験記
https://qiita.com/howmori/items/35c88194700770ec7bca
③Flow で扱う時刻を日本時間に変換したい
http://mokudai.jp/knowledge-base/microsoft-flow/flow-convert-time-utc2japantime/