出欠管理アプリを作る【PowerApps】

#はじめに

前回はPowerAppsについて理解を深めることができました

【前回記事：PowerAppsとは】
https://qiita.com/cacs-saki/items/dd301b9f901f4a5a9464
<br>

今回は実際にPowerAppsをさわってみて、簡単な出欠管理アプリを作ってみようと思います
こちらの記事を参考にさせていただきました！
https://qiita.com/tsumasakky/items/9cd84c0d9b86009493eb


#データソースの準備
前回の記事にもありますが、PowerAppsではMicrosoft系のサービスやその他の外部サービス（kintoneやSalesforce）など延べ200種類以上のデータと連動することができるようになっています
どのデータソースが使いやすいかは人それぞれだと思います
私自身はデータソースを扱った経験があまり無いため、色々なデータソースを扱いつつアプリを作成してみようと思います
<br>

ということで、まずアプリを作成するためにデータが必要となるので、最初にデータを準備していきます
今回はExcelのデータを用意してOneDrive for Businessにアップロードします
PowerAppsでExcelのデータを使用するときは必ずテーブルに設定しなければなりません
またテーブルの内容がすぐわかるようにテーブル名も変えておくとよいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/4592db4f-fe74-8aa3-6755-311f05ab4d5c.png)

ExcelデータができたのでOneDrive for Businessにアップロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/d1478383-2b4a-f40a-bf02-79058110a58d.png)


#アプリの作成
まずPowerAppsを立ち上げます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/8d06aafa-034c-9724-c15b-c6e593ae0ce4.png)
<br>

次にキャンバスアプリを一から作成するをクリックします
アプリ名を入力した後に書式を選びます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/11c3a932-91d0-f732-bed8-f1efacc30df9.png)
<br>

作成ボタンを押すと、このようなアプリ作成画面が出てきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/a7517826-c34a-64e2-d862-74f693c6e67e.png)
<br>

ここでOneDrive for BusinessにアップロードしたExcelのデータを出力する作業を行います
アプリ作成画面（前画面）のファイルをクリックするとこの画面が出てきます
そこから新規をクリックし、OneDrive for Businessを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/ddde147d-89c9-d028-51b4-608f33a1d66c.png)
<br>

するとこのような画面が出てくるので、Excelファイルの出欠表を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/6b95fad2-edbb-0262-31a4-6b2ba2c08aa9.png)
<br>

テーブルを選択して接続をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/1c886f06-9dbc-a386-e4c0-ef3c8c731f26.png)
<br>

するとデータが入力された状態でアプリをビルドしてくれます
ここではBrouseScreen（一覧画面）、DetailScreen（詳細画面）、EditScreen（編集画面）が作成されています
ここからは自由に画面を作ることができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/c06f4ef3-7fd3-8b46-0b4b-9245a8237ee3.png)

#BrowseScreen（一覧画面）
ここにある項目は、Excelデータの項目であればどれでも変更することができるみたいです
試しにThisItem.No→ThisItem.氏名に変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/0c452924-64ed-449b-268d-6039f6741ff6.png)
<br>

氏名が出力できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/fc23591f-7530-5e8e-3466-14e4dcf0bd36.png)
<br>

他の項目も変更してみます
部署名と出欠の項目を入れました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/ef4b42b2-d84b-11cd-246a-6fbec7915ee0.png)


#DetailScreen（詳細画面）
ここでは項目の順番を入れ替えてみようと思います


画面をクリックすると、右側にプロパティが出てきます
フィールドの編集をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/9607f960-412e-c98b-6176-36c8eaa12dad.png)
<br>

するとこのような画面が出てきます
ここでは、項目の順番を変更することができ、各項目はドラッグしながら動かすことができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/8afc493a-5066-b6be-3b74-2299dc04b204.png)
<br>

順番を並び替えることができました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/ff22d272-4887-4658-e5a0-c952c31bec14.png)


#EditScreen（編集画面）
ここもDetailScreenと同じく、項目の順番を入れ替えてみようと思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/e0a69dde-d621-0a8b-55c9-93cddc90d888.png)
<br>

このような感じになりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/cae5f6b7-3d40-f53c-c3d7-e1f61a655b5b.png)


これで一通りは完成です


#完成したアプリを動かしてみる
アプリ作成画面の右上にある▷を押すと、作成したアプリを実際に動かすことができます
実際に上から２番目のデータを更新してみます
<br>

まずはBrowseScreenからDetailScreenに移動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/beb2dc4f-4f8a-2e0a-b3e4-9f0698d39687.png)
<br>

今回はこの人の出欠を〇にしたいと思います
右上の鉛筆マークを押して、EditScreenに移動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/1fbdace7-e4e2-0f91-27c4-0c50ff5f4203.png)

<br>

編集した後に右上の✓マークを押すとデータが更新されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/58f47ad8-64dd-55c6-b798-ca82bb4937ca.png)

<br>

無事に更新されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/77f60e29-ce2a-6d07-9e50-f308888c20b0.png)
<br>

Excelの方もしっかり更新されていました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373059/7e286393-a17d-1324-d754-5ccb8bcf2e6f.png)


#まとめ
アプリの作成において、ゼロから手を動かして作成したのは実質Excelデータくらいだったと思います
あとはそのデータに基づいて作成するという流れで、殆ど手を加えず簡単にアプリを作成することができました

実際はもっと色々な機能を使って作成することになると思いますが、これだけでも登録・更新・削除処理は十分使えると思いました
次回はより様々な機能を使ってアプリを作ってみたいと思います